/* colors */
:root {
    --main-background: #3a232e;
    --dark-screen: #1d1d1dbe;
    --text-white: #ffe8f7;
    --footer-color: #DA4666;

    /* pastels */
    --pink-pastel: #f995a9;
    --magenta-pastel: #f995ef;
    --purple-pastel: #bc95f9;
    --blue-pastel: #808fff;
    --cyan-pastel: #95d8f9;
    --green-pastel: #88dd69;
    --lemon-pastel: #c5e467;
    --yellow-pastel: #ffda60;
    --orange-pastel: #faa85c;

    /* glass */
    --pink-glass: #f995a9cc;
    --magenta-glass: #f995efcc;
    --purple-glass: #bc95f9cc;
    --blue-glass: #808fffcc;
    --cyan-glass: #95d8f9cc;
    --green-glass: #88dd69cc;
    --lemon-glass: #c5e467cc;
    --yellow-glass: #ffda60cc;
    --orange-glass: #faa85ccc; 
    
}
/* fonts */
@font-face {
    font-family: Belanidi;
    src: url("../fonts/belanidi.otf") format("opentype");
}
@font-face {
    font-family: WorkSans;
    src: url("../fonts/work_sans.ttf") format("truetype");
}
@font-face {
    font-family: WorkItalicSans;
    src: url("../fonts/work_sans_italic.ttf") format("truetype");
}
@font-face {
    font-family: Rosarivo;
    src: url("../fonts/Rosarivo-Regular.ttf") format("truetype");
}
@font-face {
    font-family: Pixelify;
    src: url("../fonts/pixelify.ttf") format("truetype");
}
@font-face {
    font-family: Jacquard;
    src: url("../fonts/jacquard12.ttf") format("truetype");
}
@font-face {
    font-family: JacquardBastard;
    src: url("../fonts/jacquardbastard.ttf") format("truetype");
}

/* 8<--------------------------------- */

.overlay_container{
                position: relative;
            }
            .overlay{
                width: 100%;
                height: auto;
                position: absolute;
                margin:0;
                padding: 0;
                top: 0;
                right: 0;
                pointer-events: none;
                z-index: 2;
            }

            #front_page{
                display: flex;
                flex-direction: row;
                column-gap: 1rem;
            }

            #monitor{
                aspect-ratio: 1/1;
                width: 100%;
                padding: 0;
                margin: 0;
            }
            #pantalla{
                aspect-ratio: 4/3;
                padding: 0;
                margin: 9% 8.5% auto;
                background-color: var(--dark-screen);
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--footer-color) #ffffff00;
            }
            #pantalla div{
                padding: 1rem 2rem;
                background-color: var(--dark-screen);
                display: grid;
                grid-template-columns: 18% 18% 18% 18% 18%;
                column-gap: 3%;
            }

            #pantalla div p{
                font-size: large !important;
                text-align: justify;
                align-self: center;
            }

            #my_screen{
                background-color: var(--green-glass) !important;
            }
            #blog_screen{
                background-color: var(--yellow-glass) !important;
            }
            #dev_screen{
                background-color: var(--blue-glass) !important;
            }
            #t3d_screen{
                background-color: var(--pink-glass) !important;
            }

            #main_buttoner > button{
                    width: 10dvw !important;
                }

            @media (orientation:portrait) or (max-width: 767px){
                
                #pantalla div p{
                    width: 90%;
                    font-size: xx-large !important;
                }
                #pantalla div img{
                    width: 100%;
                }

                #main_buttoner{
                    grid-template-columns: repeat(3, 22%);
                    width: 90dvw !important;
                }

                #main_buttoner > button{
                    width: 22dvw!important;
                }
            }

            /* cover stuff */

            .cover{
                border: none !important;
                border-radius: 2rem !important;
            }

            .cover .photo{
                border: none !important;
                border-radius: 1rem !important;
            }

            .cover:hover{
                text-shadow: 0 0 0.2rem;
            }

            #guest_box{
                display: grid;
                grid-template-columns: 90dvh auto;
                column-gap: 1rem;
            }

            #guest_box .linker{
                padding: 1rem;
                margin: 3dvh 0;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #guest_box{
                    display: flex;
                }

                .docbox{
                    height: 90dvh;
                    width: 90dvh;
                    margin: 5dvh 0;
                    border: none;
                    overflow-y: scroll;
                }

                .docframe{
                    height: 200%;
                    width: 100%;
                    border: none;
                    overflow:visible; 
                }
            }

            #blog_page{
                display: grid;
                grid-template-columns: 35% 18% 45%;
                grid-template-rows: 40% 60%;
                column-gap: 0.5%;
            }

            #blog_buttoner{
                grid-column: 1 / 3;
                display: grid;
                grid-template-columns: repeat(6, 16%);
                overflow-y: visible;
                column-gap: 1%;
                row-gap: 4%;
                padding: 1rem;
                min-height: fit-content;
            }

            #blog_buttoner > button{
                min-width: 5;
                width: 100%;
            }

            #elector{
                aspect-ratio: 4/5;
                grid-row: 1 / 3;
                grid-column: 3;
                width: 100%;
                padding: 0;
                margin: 0;
            }

            #blog_entrys{
                aspect-ratio: 9/10;
                padding: 0;
                margin: 13% 8% auto;
                overflow-y: scroll;
                scrollbar-width: thin;
                scrollbar-color: #7b3e83 #ffffff00;
            }

            #blog_notes{
                height: fit-content;
                max-height: 100%;
            }

            

            @media (orientation:portrait) or (max-width: 767px){
                #blog_buttoner{
                    
                    grid-template-columns: repeat(4, 24%);
                    width: 100dvw !important;
                    min-height: 64dvw;
                }
                #blog_buttoner > button{
                    width: 20dvw!important;
                }

                #elector{
                    aspect-ratio: 4/5;
                    
                    margin: 1rem auto !important;
                }
            }

            #dev_page{
                display: grid;
                grid-template-columns: 45% 22% 32%;
                grid-template-rows: 40% auto;
                column-gap: 0.5%;
            }

            #dev_page .linker{
                height: fit-content !important;
            }

            #dev_page .linker nav{
                height: 30% !important;
            }

            #dev_buttoner{
                grid-column: 2 / 3;
                grid-row: 1 / 2;
                display: grid;
                grid-template-columns: 50% 50%;
                width: 95%;
                column-gap: 0.7%;
            }

            #dev_buttoner > button{
                width: 7.5vw!important;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #dev_buttoner{
                    display: grid;
                     grid-template-columns: repeat(4, 24%);
                    width: 90dvw !important;
                    column-gap: 0.7%;
                }

                #dev_buttoner > button{
                    width: 22dvw !important;
                }
            }

            #arcade{
                aspect-ratio: 4/5;
                grid-row: 1 / 3;
                grid-column: 1 / 2;
                width: 100%;
                padding: 0;
                margin: 0;
            }


            #dev_entrys{
                aspect-ratio: 10/9;
                padding: 0;
                margin: 28% 7% auto;
                background-color: #ffffff00;
                overflow-y: scroll;
                scrollbar-width: thin;
                scrollbar-color: #7b3e83 #ffffff00;
            }

            #dev_notes{
                grid-row: 1 / 3;
                grid-column: 3 / 4;
            }

            #forge_page{
                display: grid;
                grid-template-columns: 22% 45% 32%;
                grid-template-rows: 40% 70%;
                column-gap: 0.5%;
            }

            #forge_buttoner{
                grid-column: 3 / 4;
                grid-row: 1 / 2;
                display: grid;
                grid-template-columns: 33% 33% 33%;
                width: 95%;
                column-gap: 0.7%;
            }

            #forge_buttoner > button{
                width: 7.5vw!important;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #forge_buttoner{
                    display: grid;
                    grid-template-columns: repeat(3, 32%);
                    width: 90dvw !important;
                    column-gap: 0.7%;
                }

                #forge_buttoner > button{
                    width: 22dvw !important;
                }
            }

            #forge{
                aspect-ratio: 4 / 5;
                grid-row: 1 / 3;
                grid-column: 2 / 3;
                width: 100%;
                padding: 0;
                margin: 0;
            }

            #forge_entrys{
                aspect-ratio: 24 / 25;
                padding: 0;
                margin: 21.5% 11% auto;
                background-color: #ffffff00;
                overflow-y: scroll;
                scrollbar-width: thin;
                scrollbar-color: #7b3e83 #ffffff00;
            }

            #forge_notes{
                grid-row: 2 / 3;
                grid-column: 3 / 4;
            }

            #store_page{
                display: flex;
                flex-direction: row;
                column-gap: 1rem;
            }

            #store_buttoner{
                display: grid;
            }

            #store_buttoner > button{
                min-width: 5rem;
                width: 100%;
            }

            #store{
                aspect-ratio: 1/1;
                height: 90vh !important;
            }

            #store_entrys{
                aspect-ratio: 6/5;
                padding: 0;
                margin: 17% 13% auto;
                height: 55vh;
                
                overflow-x: auto !important;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: #7b3e83 #ffffff00;
                display: flex;
                flex-direction: row;
                column-gap: 1rem;
            }

            #store_entrys .entry{
                width: fit-content;
                background-color: #43c038dc;
                color: #cbc1cf;
                float: none;
                height: 100%;
                margin: 0 0.25%;
                display: grid;
                grid-template-columns: 25vi 10vi;
                column-gap: 1rem;
            }

            #store_entrys .entry img{
                width: 90%;
                padding: 5%;
                border-radius: 2rem;
            }

            #store_entrys .entry button{
                width: 80% !important;
                height: auto !important;
                background-color: #ffffff00;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #store{
                    aspect-ratio: 1/1;
                    height: 90vw !important;
                }

                #store_entrys .entry{
                    height: 100%;
                    margin: 0 0.25%;
                    grid-template-columns: 55vi 22vi;
                }
                #store_entrys{
                    height: 55vw;
                    padding-left: 4rem;
                }

                #store_entrys p{
                    font-size: 150%!important;
                    padding: 0 auto;
                    margin: 0.5rem auto;
                }

                #store_entrys h3{
                    padding: 0 auto;
                    margin: 1rem auto;
                    font-size: 200%;
                }

                #store_buttoner{
                    grid-template-columns: repeat(3, 33%);
                    width: 90dvw !important;
                }
                #store_buttoner > button{
                    width: 22dvw!important;
                }
            }

            #switch_box{
                margin: auto;
                margin-bottom: 3rem;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #switch_box{
                    display: none;
                }
            }

            #home_page{
                display: flex;
                flex-direction: column;
                row-gap: 1rem;
            }

            @media (orientation:portrait) or (max-width: 767px){
                #home_page{
                    padding-top: 1rem;
                }
            }
/* minifed */