:root {
    --font-mid: 1.5rem;
    --font-large: 2rem;
    --text-color-main: rgb(22, 22, 22);
    --text-color-inactive: rgb(39, 39, 39);
    --controls-fade-duration: 3s;

    --ui-raised-col: rgba(255, 255, 255, 0.5);
    --ui-shadow-col: rgba(156, 156, 156, 0.5);
    --ui-highlight-col: rgb(255, 255, 255, 0.8);
    --ui-depth: 3px;
    --ui-bg-col: rgba(230, 230, 230, 1);
    --ui-col-clear: rgba(255, 255, 255, 0);
}

/* @font-face {
    font-family: 'Pathway Extreme';
    src: url('resources/PathwayExtreme.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style:normal;
}

@font-face {
    font-family: 'Pathway Extreme';
    src: url('resources/PathwayExtremeItal.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style:italic;
} */



html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
    /* cursor:move; */
    font-family: "Miriam Libre", sans-serif;
    /* font-stretch: 50%; */
    color: var(--text-color-main);

    font-size: 0.8rem;

    -webkit-user-select: none;
    /* iOS Safari */
    user-select: none;
    /* other modern browsers */
    -webkit-touch-callout: none;
    /* optional: no tap‑and‑hold menu */

}




iframe {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.vignette {
    z-index: 10;

    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: linear-gradient(rgba(200, 200, 200, 0.5) 10%, rgba(200, 200, 200, 0) 25%, rgba(200, 200, 200, 0) 75%, rgba(200, 200, 200, 0.5) 90%);

    pointer-events: none;

}

.bgtexture {

    z-index: 15;

    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    opacity: 0.3;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 1100" fill="white"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/></svg>');
    background-size: 20px 20px;
    background-repeat: repeat;

    mask-image: linear-gradient(rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 1) 90%);

    pointer-events: none;
}

.loadscreen {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    background-color: rgb(230, 230, 230);
    z-index: 10;

    transition-delay: 0.1s;
    transition-duration: 1s;

    pointer-events: none;
}

.loadscreen.ready {
    background-color: rgba(255, 255, 255, 0);
}

.load {

    font-size: 2rem;
    font-weight: 700;
    text-align: center;

    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;

    pointer-events: none;
    animation: pulse 1s infinite alternate;

    transition-delay: 0.1s;
    transition-duration: 1s;
}

.load.ready {
    opacity: 0;
    animation: none;
}

/* simple pulse animation */
@keyframes pulse {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}





.sideControls {
    position: absolute;
    pointer-events: none;
    right: 0px;
    width: fit-content;
    height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: top;

    z-index: 100;
}

.resetCameraBtn {
    margin: 20px;
    pointer-events: all;
    /* positioning */

    color: var(--text-color-inactive);
    width: 36px;
    height: 36px;
    text-align: center;
    box-shadow: inset 0px 0px 0px 0px var(--ui-highlight-col), inset 0px 0px 0px 0px var(--ui-shadow-col),
        3px -3px 5px 2px var(--ui-highlight-col), -5px 5px 10px 5px var(--ui-shadow-col);
    border-radius: 18px;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    opacity: 1;

    /* transition */
    transition-property: box-shadow, opacity;
    transition-duration: 1.5s;
}

.resetCameraBtn:hover {
    box-shadow: inset 3px -3px 5px 2px var(--ui-highlight-col), inset -3px 3px 2px 2px var(--ui-shadow-col),
        2px -2px 3px 2px var(--ui-highlight-col), -2px 2px 5px 3px var(--ui-shadow-col);
    /* background-color: rgba(0,0,0,0.05); */
    /* font-weight: 600; */
}

#resetCameraBtn.hide {
    opacity: 0;
}


#extra {
    position: absolute;
    right: 0px;
    top: 800px;

    z-index: 99999;
}

#btn_extra {
    padding: 10px;
    font-size: 1rem;
    color: blue;


}


/* tablets */
@media (min-width: 600px) and (min-height: 600px) {

    html,
    body {
        font-size: 1rem;
    }
}