:root {
    --m: 0.5rem;
    --dark: black;
    --light: white;
    --color: blue;
    --gray: #888;



    --lineHeight: 1.25;

    --fullW: 100vw;
}

@font-face {
    font-family: 'ultimate';
    src: url('assets/ULTIMATESOLIDV2-MONO.otf') format("opentype");
    font-style: normal;
}

@font-face {
    font-family: 'blend';
    src: url('assets/ToBlendTrial-Regular.otf') format("opentype");
    font-style: normal;
    font-weight: normal;
}

/* @font-face {
    font-family: 'blend';
    src: url('assets/ToBlendTrial-Black.otf') format("opentype");
    font-style: normal;
    font-weight: bolder;
} */

@font-face {
    font-family: 'modelo';
    src: url('assets/Modelo-Regular.woff2') format("opentype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'blend';
    src: url('assets/ToBlendTrial-RegularItalic.otf') format("opentype");
    font-style: italic;
    font-weight: normal;
}

/* @font-face {
    font-family: 'blend';
    src: url('assets/ToBlendTrial-BlackItalic.otf') format("opentype");
    font-style: italic;
    font-weight: bolder;
} */

html {
    font-family: "blend", sans-serif;
    font-weight: normal;
    font-size: 1vw;
    color: var(--color);
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}


/* TYPO */
h1 {
    font-size: 4rem;
    line-height: var(--lineHeight);
}

h2 {
    font-size: 1.25rem;
    line-height: var(--lineHeight);
}

button {
    font-size: 1.25rem;
}

p {
    font-size: 1.25rem;
    line-height: var(--lineHeight);
}

.modelo {
    font-family: modelo, sans-serif;
}

/* LANDING */
.landingDom {
    position: absolute;
    top: 0;
    width: var(--fullW);
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    margin: var(--m);
    gap: calc(3 * var(--m));
}

.wrapper * {
    width: fit-content;
}

.loaderWrapper {
    height: 4em;
    width: 80%;
}

.loadingBar {
    background-color: blue;
    width: 100%;
    height: 100%;
}

.loaderWrapper,
button,
.error {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: unset !important;
    color: white;
}

/* WebXR */
button,
.error {
    font-family: 'UltimateSolid';
    padding: var(--m);
    border: none;
    background-color: unset;
    color: var(--light);
    z-index: 1;
}

.error {
    background-color: var(--gray);
}

.arLayer {
    position: absolute;
    bottom: var(--m);
    right: var(--m);
    color: var(--light);
}

/* .lil-gui {
    display: none;
    top: calc(2*var(--m)) !important;
    left: calc(2*var(--m)) !important;
} */

/* POEM TEMP USE */
.poem {
    position: fixed;
    bottom: 0px;
    left: 50vw;
    transform: translate(-50%, 0%);
    padding: var(--m);
    /* display: flex; */
    /* justify-content: center; */
    /* width: var(--fullW); */
    background-color: var(--color);
    color: var(--light);
    width: 100vw;
    text-align: center;
    /* background-color: blue; */
}

.poemOnly {
    background-color: blue;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 2;
}

.poemOnly .poem {
    bottom: unset;
    top: 50dvh;
    transform: translate(-50%, -50%);
}

.poem:has(p:empty),
.poem:empty {
    padding: 0;
}

.fragmentin {
    font-size: 2.5rem;
    font-family: ultimate, sans-serif;
    font-variant-ligatures: discretionary-ligatures;
}

@media screen and (orientation: portrait) {
    html {
        font-size: 4vw;
    }
}