@charset "utf-8";

:root{
    --high : #fff;
    --middle : #f2f2f2;
    --under : #3e3f40;
    --back : #fff;
    --accent : #5f6c7f;
    --hyper : #000;
    --undersvg : invert(20%) sepia(6%) saturate(187%) hue-rotate(169deg) brightness(96%) contrast(83%);
    --accentsvg : invert(43%) sepia(6%) saturate(1461%) hue-rotate(176deg) brightness(92%) contrast(87%);
    --active : scale(0.975);
}

:root.darkmode{
    --high : #292d33;
    --middle : #474f59;
    --under : #99a9bf;
    --back : #333840;
    --accent : #bfaf99;
    --hyper : #cce1ff;
    --undersvg : invert(66%) sepia(31%) saturate(200%) hue-rotate(175deg) brightness(96%) contrast(91%);
    --accentsvg : invert(93%) sepia(8%) saturate(1025%) hue-rotate(336deg) brightness(80%) contrast(82%);
}

*{  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "helvetica-neue-lt-pro", "a-otf-ud-shin-go-pr6n" , sans-serif;
    font-size:calc(0.625vh / 1.5);
    transform-origin: center;
    transition: 0.3s ease-out;
    color: hsl(225, 2, 80);
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: none;
}

.sideinfonav input , #modecng{
    display: none;
}

.novision , .novisions{
    display: none !important;
}

.disappear{
    visibility: hidden;
}

.appear{
    visibility: visible;
}

*::-webkit-scrollbar{
    display: none;
}

a{
    width: fit-content;
    display: block;
    text-decoration: none;
    color: var(--hyper);
}

/* loading */

.loading{
    width: 100vw;
    height: 100vh;
    background-color: var(--back);
    position: absolute;
    z-index: 10;
}

.dis{
    animation-name: dis;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes dis{
    0%{
        opacity: 100%;
    }

    75%{
        opacity: 100%;
    }

    100%{
        opacity: 0%;
        display: none;
    }
}

/* body */

body{
    width: 100vw;
    height: 100vh;
    background-color: var(--back);
}

/* main */

main{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr;
}

.sidecontainer , .maincontainer{
    padding: 8rem;
}


/* sidecontainer */

.sidecontainer{
    display: grid;
    grid-template-rows: 1fr 8rem 8rem;
    row-gap: 4rem;
    width: 70%;
    height: 100%;
    grid-column: 1 / 2;
    background-color: var(--middle);
    position: fixed;
    top: 0;
    left: -70%;
    z-index: 15;
}

.sideinfo{
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
}

.sideinfoname , .sideinfonavtag , .sideinfonavswc{
    display: flex;
    width: 100%;
    gap: 2rem;
    border: none;
    transition: 0.1s;
    transform-origin: center;
}

.sideinfonavtag:hover , input:checked + label.sideinfonavtag , .sideinfonavswc{
    background-color: var(--high);
    color: var(--under);
    border-radius: 2rem;
    height: 8rem;
}

.sideinfonavtag:active , .sideinfonavswc:active , .maincontainermenubtn:active{
    transform: var(--active);
}

.sideinfonav{
    margin-top: 12rem;
    height: 100rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    overflow: auto;
}

.sideinfoicon , .sideinfonavtagicon{
    width: 8rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.sideinfonavtagicon{
    filter: var(--undersvg);
    padding: 2rem;
    opacity: 50%;
}

.sideinfosoftname{
    font-size: 6rem;
    line-height: 8rem;
    color: var(--accent);
}

.sideinfonavtagname{
    font-size: 3rem;
    line-height: 8rem;
    font-weight: 500;
    opacity: 50%;
    color: var(--under);
    user-select: none;
}

label#sideinfonavtagselect p{
    color: var(--accent);
    opacity: 100%;
}

label#sideinfonavtagselect img{
    filter: var(--accentsvg);
    opacity: 100%;
}

.sideinfonavswcicon , .sideinfonavswcicondark{
    filter: var(--accentsvg);
    display: block;
    height: calc(100% - 3rem);
    aspect-ratio: 1 / 1;
    margin: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: none;
}

.sideinfonavswcicon{
    background-image: url(../img/light.svg);
}

.sideinfonavswcicondark{
    background-image: url(../img/dark.svg);
}

/* maincontainer */

.maincontainer{
    width: 100%;
    height: 100%;
    padding-top: 20rem;
    grid-template-rows:4rem 7rem 1fr 8rem;
    gap: 4rem;
    display: grid;
}

.maincontainermenubtn{
    width: 8rem;
    height: 8rem;
    margin: 8rem 0 0 8rem;
    background-color: var(--middle);
    border: none;
    outline: none;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.maincontainermenubtn img{
    filter: var(--accentsvg);
    width: 3rem;
    height: 3rem;
}

.maincontainerh1{
    display: block;
    height: 4rem;
    width: 100%;
    font-size: 4rem;
    line-height: 4rem;
    color: var(--accent);
}

.maincontainersearch{
    width: 100%;
    height: 7rem;
    font-size: 3rem;
    padding: 2rem;
    border: none;
    color: var(--under);
    background-color: var(--middle);
    font-weight: 500;
}

.maincontainersearch::placeholder{
    color: var(--accent);
}

.maincontainerversion{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: last baseline;
    color: var(--under);
    font-size: 1.5rem;
}

/* modal */

.modalcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1rem) saturate(0);
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    background-color: var(--undera);
}

/* sidemenu */

.sideback{
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--hyper);
    position: fixed;
    backdrop-filter: blur(1rem) saturate(0);
    top: 0;
    left: 0;
    z-index: 10;
}

@keyframes sm_kf{
    0%{
        transform-origin: left;
        left: -70%;
        display: none;
    }
    100%{
        left: 0;
    }
}

@keyframes sm_kfr{
    0%{
        transform-origin: left;
        left: 0;
    }
    100%{
        left: -70%;
        display: none;
    }
}

@keyframes sb_kf{
    0%{
        opacity: 0%;
        display: none;
    }
    100%{
        opacity: 50%;
        display: block;
    }
}

@keyframes sb_kfr{
    0%{
        opacity: 50%;
        display: block;
    }
    100%{
        opacity: 0%;
        display: none;
    }
}

.sd_animation{
    animation: .3s forwards sm_kf;
}

.sd_animation_rev{
    animation: .3s forwards sm_kfr;
}

.sb_animation{
    animation: .3s forwards sb_kf;
}

.sb_animation_rev{
    animation: .3s forwards sb_kfr;
}