:root{
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

body{
    background: #f2f2f2;
    background: linear-gradient(-100deg, #f2f2f2 0%, #eeeeee 100%);

    margin:0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    scroll-behavior: smooth;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

.disable-hidden{
    opacity: 0 !important;
    pointer-events: none !important;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.undraggable{
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* CUSTOM ATTR */
.spinning-ring{
    position: absolute;

    background-color: transparent;
    border: 6px solid;
    border-radius: 999rem;
    width: 5rem;
    height: 5rem;

    transform-style: preserve-3d;
    perspective: 75rem;

    shape-rendering: crispEdges;
    transition: opacity 0ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
    transition-delay: 200ms;
} #ring-check{
    position: absolute;
    top:0;
    transform: scale(0.45) translate(0.45rem, 0);
    pointer-events: none;    
}

/* logo */
.logo-thing{
    bottom:0rem;
}.logo-img{
    height:2.75rem;
}

progress {
    background-color: #e6e6e6;
    border: none;
    height: 0.5rem;
    border-radius: 100rem;
    box-shadow: inset 0 0 5px #bfbfbf;
    width: 20rem;
    margin-top:0.5rem
}
progress::-webkit-progress-bar {
    background-color: #e6e6e6;
    box-shadow: inset 0 0 5px #bfbfbf;
    border-radius: 7px;
}
progress::-webkit-progress-value {
    background-color: #ff891a;
    border-radius: 100rem;
}
progress::-moz-progress-bar {
    background-color: #ff891a;
    border-radius: 100rem;
}

.menu-btn{
    font-size: 1.5rem;
    padding: 0.3rem 1rem 0.3rem 1rem;
    border-radius: 100rem;
    border: 1px #3a3a3a solid;
    color: #3a3a3a;
    background-color: transparent;
    cursor:pointer;

    transition: color 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000), background-color 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
}.menu-btn:hover{
    background-color: #1d1d1d;
    color: white;
}

.img-display{
    display: grid;
    grid-template-columns: repeat(28, 0.9rem);
    grid-template-rows: repeat(28, 0.9rem);
    grid-column-gap: 0;
    grid-row-gap: 0;
}.img-pixel{
    width:110%; height:110%;
    background-color: #000000;
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
}

#input-box{
    position: absolute;
    width: 100%;
    height: 100%;
    image-rendering: optimizeQuality;
    cursor: url("../img/cursor.png") 17 17, pointer !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
#input-box > h3{
    transition: opacity 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
}
@media (hover: hover) {
    #input-box:hover > h3{
        opacity: 0 !important;
        transition: opacity 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
    }
}
#input-box:active > h3{
    opacity: 0 !important;
    transition: opacity 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
}

/* number lines */
.h-numberline-container{
    width:calc(100% + 2px); height: fit-content;
    display: flex;
    justify-content: space-between;
    position: absolute;
    transform: translateX(-1px);
    bottom:calc(-0.75rem - 1.5rem);

    cursor: default;
}.v-numberline-container{
    height:calc(100% + 2px); width: fit-content;
    display: flex;
    justify-content: space-between;
    transform: translateY(1px);
    flex-direction: column;
    position: absolute;
    bottom:0;
    left:calc(-0.75rem - 1.4rem);

    cursor: default;
}

.h-scale{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: fit-content;
}.v-scale{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
}

.verticle-tick{
    width:1px;
    height:0.75rem; 
    background-color: #000;
}.horizontal-tick{
    height:1px;
    width:0.75rem; 
    background-color: #000;
}

.h-scale-number{
    width:1px;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    font-size: 1.2rem;

    cursor: text;
}
.v-scale-number{
    height:1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-right: 0.2rem;
 
    cursor: text;
}

/* popups */
.popup-card-container{
    position: fixed;
    width: 90%; height:80%; z-index: 99999;
    background-color: #fbfbfb;
    border-radius: 2.25rem;
    border: 1px solid rgba(128, 128, 128, 0.231);
    box-shadow: 0 0 200px #0000005d;
    padding:0;

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

.close-card{
    transform: rotate(45deg);
    opacity: 0.2;
    width: 2.75rem; height: 2.75rem;
    position: absolute;
    top:1.25rem; right:1.25rem;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
    box-shadow: 0 0 0 black;
    border-radius: 100rem;
}
@media (hover: hover) {
    .close-card:hover{
        opacity: 0.7;
        scale: 1.15;
        box-shadow: 0 0 5px #9e9e9e;
    }
}
.close-card:active{
    opacity: 0.7;
    scale: 1.15;
    box-shadow: 0 0 5px #9e9e9e;
}

.popup-card-container a{
    text-decoration: none;
    font-size: 1.3rem;
    font-family: "Red Hat Display";
    color:#3e3e3e;
    border:1px solid #3e3e3e;
    border-radius: 100rem;
    padding: 0.2rem 1.5rem 0.2rem 1.5rem;
    transition: color 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000),
                background-color 150ms cubic-bezier(0.260, 0.050, 0.250, 1.000),
                scale 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000); /* custom */
}
@media (hover: hover) {
    .popup-card-container a:hover{
        color:#fbfbfb;
        background-color:#3e3e3e;
    }
}
.popup-card-container a:active{
    color:#fbfbfb;
    background-color:#3e3e3e;
}

/* nav */
#main-nav{
    transition: all 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
    background-color: #f6f6f65a;
    backdrop-filter: blur(10px);
    border-width: 1px;
}
@-moz-document url-prefix() {
    #main-nav{
        backdrop-filter: blur(10px);
        background-color: #f0f0f0e3;
    }
}

#nav-content{
    display: flex;
    position: fixed;
    flex-direction: column;
    width: 100%; height:calc(100vh - 4rem - 1px);
    padding: 0;
    justify-content: flex-start;

    top:4rem;
    left:0;
    border-top: 1px solid #00000022;

    transition-property: filter, opacity;
    transition: 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
}

#menu-open-btn{
    opacity: 0.3;
    transition: all 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
    cursor: pointer;
    transform: rotate(0deg);
}
@media (hover: hover) {
    #menu-open-btn:hover{
        opacity: 0.7;
        scale: 1.15;
    }
}
#menu-open-btn:active{
    opacity: 0.7;
    scale: 1.15;
}

/* plot */
.numberline{
    transition: all 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
    opacity: 0;
    pointer-events: none;
}
/* latent & gen grid sizes */
.img-display{
    display: grid;
    grid-template-columns: repeat(28, max(min(3.2vw, 2vh), 0.5rem));
    grid-template-rows: repeat(28, max(min(3.2vw, 2vh), 0.5rem));
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-radius: 2.3rem;
    border: 1px solid #00000044;
}.img-pixel{
    width:110%; height:110%;
    background-color: #000000;
    opacity: 0;
    /* transition: opacity 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000); */
}
/* hide plot numberlines */
/* plot redistribution: set latent plot ontop of gen plot */
#latent-grid{
    position: absolute;
    margin:none;
}
#latent-grid .numberline{display:none}
/* hide plot titles */
.plot-title{display:none}

/* copyright msgs */
.cr-msg{
    transition: all 300ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
}

/* ==================== TABLET VIEW ==================== */

/* medium */
@media screen and (min-width: 900px) {
    /* logo */
    .logo-thing{
        right:0;
    } .logo-img{
        height:3rem;
    }

    .popup-card-container{
        width: 80%;
    }
    #nav-content{
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        border:none;
        width: fit-content;
        height: fit-content;
        top:0;

        background-color: transparent;
        backdrop-filter: none;
    }

    #main-nav{
        background-color: #f6f6f65a !important;
        backdrop-filter: blur(10px) !important;
    }
    @-moz-document url-prefix() {
        #main-nav{
            backdrop-filter: blur(10px) !important;
            background-color: #f0f0f0e3 !important;
        }
    }

    /* latent & gen grids */
    .img-display{
        display: grid;
        grid-template-columns: repeat(28, max(min(1.2vw, 2.1vh), 0.5rem));
        grid-template-rows: repeat(28, max(min(1.2vw, 2.1vh), 0.5rem));
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin: 0 5vw 0 5vw;

        /* reset border back to normal */
        border-radius: 0;
        border: 1px solid #000000;
    }.img-pixel{
        width:110%; height:110%;
        background-color: #000000;
        opacity: 0;
        transition: opacity 100ms cubic-bezier(0.260, 0.050, 0.250, 1.000);
    }
    /* reset number lines to normal */
    .numberline{
        opacity: 1;
    }
    /* plot redistribution: restore latent plot position */
    #latent-grid{all: unset}
    #latent-grid .numberline{display:flex}
    /* reset plot titles */
    .plot-title{display:inline}
}

/* ==================== DESKTOP VIEW ==================== */

/* large */
@media screen and (min-width: 1300px) {
    .popup-card-container{
        width: 65%;
    }
}

/* ==================== LOW HEIGHT VIEW ==================== */

/* low height */
@media screen and (max-height: 575px) {
    #main-nav{
        transform: translateY(-4rem);
        border-width: 1.25rem !important;
    }
    @media (hover: hover) {
        #main-nav:hover{
            transform: translateY(0);
            border-width: 1px !important;
        }
    }
    #main-nav:active{
        transform: translateY(0);
        border-width: 1px !important;
    }

    .popup-card-container{
        height: 85%;
    }

    /* hide plot numberlines */
    .numberline{
        opacity: 0;
        pointer-events: none;
    }
}

/* ==================== SPECIAL MOBILE ONLY =================== */
@media screen and (max-width: 899px) {
    #main-nav{
        transform: none !important;
        border-width: 1px !important;
    } /* prevent the nav from moving up & having a large bottom border in low height mode */
}