html { height:100%; }

body { 
    height:100%; 
    overflow:hidden; 
    margin:0; padding:0; 
    background-color:#000000; 
    --transition-duration: 0.5s;
    --menu-width: 28rem;
    --border-radius: 1rem;
    --btn-border-radius: 1.0rem;
    --tolltip-border-radius: 0.7rem;
    --logo-height: 16rem;
    
    /* Color Variables */
    --primary-color: #A27A5A;
    --primary-color-rgb: 162, 122, 90;
    --secondary-color: #000000;
    --secondary-color-rgb: 0, 0, 0;
}

* {
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.no-scrollbars {
    -ms-overflow-style: none;  /* Hide native scrollbars IE and Edge */
    scrollbar-width: none;  /* Hide native scrollbars Firefox */
}

.no-scrollbars::-webkit-scrollbar {
    display: none; height: 0; width: 0; /* Hide native scrollbars Webkit */
}

html, body { font-size: 9px; } /* define REM size in pixels */

main {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 10;
}

#pano {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 0;
}

section[nav_dots] {
    position: absolute;
    right: 18rem; bottom: 2.4rem;
    width: auto; height: auto;
    transition: opacity var(--transition-duration);
    z-index: 5;
}

#group-title {
    position: absolute;
    right: 18rem; bottom: 5.5rem; 
    width: auto; height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    pointer-events: none;    
    white-space: nowrap;
}

section[description] {
    position: absolute;
    right: 2rem; bottom: 8rem;
    /* width: 46rem;  */
    height: auto;
    z-index: 4;
    transition: opacity var(--transition-duration);
}

section[btns][common] {
    position: absolute;
    left: 2rem; bottom: 2rem;
    width: auto;
    background-color: rgba(0,0,0,0.0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    pointer-events: all;
    transition: opacity var(--transition-duration);
}

section[btns][nav] {
    position: absolute;
    right: 2rem; bottom: 2rem;
    width: auto; height: auto;
    display: flex;
    flex-direction: row;
    z-index: 5;
    pointer-events: all;
    transition: opacity var(--transition-duration);
}

section[btns][common][autorotonly] {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration);
}

body.ui-hidden.autorotonly section[btns][common][autorotonly] {
    pointer-events: all;
    opacity: 1;
}



section[ui] {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 1;
    transform: scale(1);
}

body.ui-hidden section[ui] {
    opacity: 0;
    transform: scale(1.5);
    pointer-events: none;
}

#scene_title {
    position: absolute;
    left: 50%; bottom: 2rem; transform: translateX(-50%);
    width: auto; height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.6rem;
    color: #fff;
    pointer-events: none;    
    display: none;
}

section[ui] > section[logo] {
    /* TEMPORARILY HIDDEN - Top menu logo, remove 'display: none;' to show again */
    display: none;
    position: absolute;
    left: 2rem; top: 2rem;
    width: auto; height: auto;
    opacity: 1;
    transition: opacity var(--transition-duration);
}

section[ui] > section[logo] img {
    width: 20rem; height: auto;
    object-fit: contain;
}

@media screen and (max-width: 900px) {

    section[nav_dots] {
        right: 2rem;
        bottom: 11rem;
        /* transform: translate(0,50%); */
    }

    #group-title {
        left: 50%; top: 2rem;
        transform: translateX(-50%);
        right: auto; bottom: auto; 
    }

}


    
@media screen and (max-width: 1500px) {
    section[menu_top] {
        display: none; /* This can be removed since top menu is hidden globally above */
    }

    section[ui] > section[logo] {   
        opacity: 0;
        pointer-events: none;
    }

}

/* TEMPORARILY COMMENTED OUT - Uncomment to hide aside menu on large screens and show top menu instead */
/* @media screen and (min-width: 1500px) {
    aside {
        display: none!important;
    }
} */

@media screen and (max-width: 500px) {
 
    #vn_logo {
        display: none;
    }


    section[description] {
        right: 1rem; bottom: 6rem;
        width: calc(100% - 2rem);
    }

    section[btns][nav] {
        right: 1.1rem; bottom: 1rem;
    }

    section[btns][common] {
        left: 1rem; bottom: 1rem;
        z-index: 2;
    }

    body:not(.aside) section[btns][common] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[nav] {
        opacity: 0;
        pointer-events: none;
    }

    section[nav_dots] {
        right: 1rem;
        bottom: 8rem;
        z-index: 3;
        /* transform: translate(0,50%); */
    }

    body.aside section[nav_dots] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[description] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[description] my-description {
        pointer-events: none;
    }

    #group-title {
        left: 1rem; top: 1rem;
        right: auto; bottom: auto; 
        transform: none;
    }

}

body.theme-light section[ui],
body.theme-light section[logo] {
    filter: invert(1);
}