html,
body{
    background : #16161C;
}

@media (max-height : 920px), (max-width : 105.625em){
    html{
        font-size : 14px;
    }
}

@media (max-height : 53.125em), (max-width : 94.125em){
    html{
        font-size : 13px;
    }
}

@media (max-height : 810px), (max-width : 90em){
    html{
        font-size : 12px;
    }
}

@media (max-height : 673px), (max-width : 81.625em){
    html{
        font-size : 11px;
    }
}

@media (max-height : 610px), (max-width : 71.75em){
    html{
        font-size : 10px;
    }
}

@media (max-height : 562px), (max-width : 66.25em){
    html{
        font-size : 8px;
    }
}

@media (max-height : 450px), (max-width : 56.875em){
    html{
        font-size : 7px;
    }
}

@media (max-height : 396px), (max-width : 48.25em){
    html{
        font-size : 6px;
    }
}

@media (max-height : 344px), (max-width : 39.375em){
    html{
        font-size : 5px;
    }
}

@media (max-height : 293px), (max-width : 32.9375em){
    html{
        font-size : 4px;
    }
}

@media (max-width : 26.9375em){
    html{
        font-size : 3px;
    }
}

body a:link{
    text-decoration : none !important;
}
   
.text{
    color : #E6E6F2;
    font-family: poster-gothic-excond-atf;
    text-align: center;
    user-select : none;
    display : flex;
    flex-direction : column;
    justify-content : center;
}     

#website_navbar, #footer{
    width : 100%;
    background : #16161A;
    height : 1em;
    font-size : max(8vh, 3.525vw) !important;
}
        
#website_navbar{
    z-index : 99; 
    position: sticky;  
    top: 0;
}

.wrapper{
    height : 100%;
    width : 100%;
    display : flex;
    justify-content : space-between;
    background : #16161A;
    padding : .125em;
}

.navigation_container{
    display : flex;
    height : 100%;
}

.navigation_container:last-of-type{
    height : unset;
}

.logo_container{
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    margin : 0 .25em;
}
        
.logo_wrapper{
    display : flex;
    height : 100%;
}        

.logo_wrapper a{
    display : flex;
    flex-direction : column;
    justify-content : center;
}

#website_navbar .logo_wrapper .img,
#footer .logo_wrapper .img{
    height : .75em;
}

.logo_wrapper .text{
    font-size : .5em;
    margin-left : .25em;
}

#website_navbar .logo_wrapper .img{
    content : url("../Images/SODA.png");
}

#footer .img_container{
    display : flex;
    flex-direction : column;
    justify-content : center;
    margin-right : .25em;
}

#footer .logo_wrapper .img{
    content : url("../Images/Rewriter_Logo.png");
}

.page_container{
    display : flex;
    position : relative;
}

.page_link_container{
    display : flex;
    height : 100%;
}

.page_link,
.drop_icon{
    height : 100%;
    margin : 0 .0625em;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.drop_icon{
    margin : 0 .125em;
}

.drop_icon,
.portrait{
    display : none;
}

.drop_icon .img{
    height : .5em;
    margin : auto;
    content : url("../Images/Dropdown.png");
}

.page_link a,
.drop_icon .text{
    transition : background .25s;
    border-radius : 10em;
    padding : 0 .25em;
}

.page_link a:hover,
.drop_icon .text:hover{
    background : #4B2E99;
    cursor : pointer;
}

.page_link a:link{
    text-decoration : none;
}

.page_link .text{
    font-size : .5em;
    text-wrap : nowrap;
}

.account a{
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

.account .img{
    height : .625em;
    content : url("../Images/account.png");
}

.greeting{
    max-width : 25vw;
    overflow:hidden;
}

.credits{
    flex-direction : row;
}

.credits .img{
    height : .625em;
    margin: auto 0 auto 0.1em;
    content : url("../Images/Credit.webp");
}

@media screen and (max-width : 200vh){
    .greeting{
        display : none;
    }
}

@media screen and (orientation: portrait){    
    #footer{
        height : 100%;
    }
    
    #footer .logo_container{
        margin : .25em 0;
    }
    
    #footer .logo_wrapper{
        justify-content : center;
    }
    
    #footer .logo_wrapper .img{
        height : .75em;
    }
    
    #footer .logo_wrapper .text{
        font-size : .5em;
    }
    
    #footer .navigation_container{
        flex-direction : column-reverse;
        width : 100%;
    }

    #footer .page_container>.page_link{
        margin : 0 auto;
    }
    
    #footer .page_link_container{
        justify-content : space-evenly;
        width : 100%;
    }
    
    #footer .page_link{
        margin : unset;
    }
    
    #footer .page_link a{
        padding : unset;
    }

    #footer .page_link .text{
        font-size : .5em;
        padding : 0 .5em;
    }
}

@keyframes dropdown_slide{
    from{top : -600%;}
    to{top : calc(100% + .125em);}
}

@media screen and (max-width : 132.5vh){
    #website_navbar .page_container{
        display : block;
    }
    
    #website_navbar .page_link_container{
        display : none;
    }

    .page_link_container.dropdown{
        animation : dropdown_slide .25s;
        display : block !important;
        position : absolute;
        left : -200%;
        top : calc(100% + .125em);
        opacity : 1;
        z-index : -1;
        width : 500%;
    }
    
    .dropdown .page_link a{
        border : .0625em solid #16161C;
        border-width : 0 .0625em .0625em .0625em;
    }
    
    .dropdown .page_link:first-of-type a{
        border-width : .0625em;
    }

    #website_navbar .page_link_container .page_link{
        height : unset;
        background : #331F66;
    }
    
    #website_navbar .page_link_container .page_link a{
        border-radius : unset;
        padding : 0 .5em;
    }
    
    .drop_icon{
        display : flex;
    }
}

@media screen and (max-width : 70vh){
    .portrait{
        display : flex;
    }
    
    #DAW,
    #shop,
    #login,
    #signup,
    .portrait.account{
        display : none;
    }
    
    #footer .page_link_container {
        flex-direction: column;
    }
    
    #footer .page_link .text {
        font-size: .5em;
    }
    
    #footer .page_link {
        margin-bottom : .125em;
    }
    
    #footer .logo_wrapper .img {
        height: 0.75em;
    }
    
    #footer .logo_wrapper .text {
        font-size: .5em;
    }
}

@media screen and (max-width : 70vh){
    #logout{
        display : none;
    }
}

@media screen and (max-width : 52vh){
    .account{
        display : none;
    }
    
    .portrait.account{
        display : flex;
    }
}


@media screen and (max-width : 42vh){
    #website_navbar .logo_wrapper .text{
        display : none;
    }
}

.credits{
    padding : 0 .25em;
}

#shop{
    margin : 0;
}

#shop a{
    padding : 0 .25em;
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

#shop .img:first-of-type{
    content : url("../Images/Cart.png");
    height : .625em;
    padding : 0 .09375em;
}

::-webkit-scrollbar{
    width: 1vw;
    min-width : 16px;
    max-width : 40px;
}
        
::-webkit-scrollbar-track{
    background: #16161A;
    height : 1em;
}
        
::-webkit-scrollbar-thumb{
    background: #3F2680;
}
        
::-webkit-scrollbar-thumb:hover{
    background: #4B2E99;
}
        
.hidden{
    display : none;
}

.disabled, .disabled:hover, .disabled:active{
    background : #999999;
    cursor : default;
    opacity : .7;
}