body{
    background :  #41414D !important;
}

.text{
    color : #E6E6F2;
    font-family: poster-gothic-excond-atf;
    text-align: center;
    user-select : none;
    display : flex;
    flex-direction : column;
    justify-content : center;
    overflow : hidden;
    text-overflow : ellipsis;
    text-shadow : .03125em .03125em .0625em #16161C;
}

.button,
.label{
    display : flex;
    flex-direction : column;
    justify-content : center;
    box-sizing : border-box;
    overflow : hidden;
    user-select : none;
    height : 100%;
    width : 100%;
    box-shadow: 0 0 .04em .04em #16161C;
}

.button{
    background : #3F2680;
    cursor: pointer;
    transition : background .05s;
}

.button:hover{
    background : #4B2E99;
}

.label{
    background : #5836B3;
    position: relative;
    justify-content : space-evenly;
}

.outset{
    background : #41414D;
    border-radius : .5em;
    position : relative;
    transition : background .05s;
}

.inset{
    background : #16161A;
    border-radius : .375em;
    position : relative;
}

.hL{
    background: #3672B3 !important;
    border-color: #3D83CD !important;
}

.hL .inset{
    border-color: #3D83CD;
}

.hL:hover{
    background : #3D83CD;
}

.panel{
    height : calc(100vh - max(8vh, 3.525vw));
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    position : relative;
    font-size : min(5vw, 8vh);
    overflow : hidden;
    background: #16161a;
}

.heading{
    background : linear-gradient(to bottom, #16161A 0%, #41414D 40%, #41414D 60%, #16161A 100%) !important;
}

.heading .panel_text{
    background : unset !important;
    width: 100%;
    padding: 0 1em;
    position : relative;
    justify-content : end;
    max-width: 210vh;
    margin: 0 auto;
}

.nav_buttons{
    display: flex;
    font-size: .625em;
    justify-content: center;
    flex-wrap: wrap;
    margin : 1em 0;
}

.nav_buttons .button{
    border-radius: 0.5em;
    margin: 0.25em;
    width: 40%;
    max-width: 70vh;
    height: unset;
    padding: 0.125em 0;
}

.category{
    opacity : 1;
    animation : categories .35s;
}

@keyframes categories{
    from{ opacity : 0;}
    to{ opacity : 1; }
}

.panel:nth-of-type(odd) .panel_text{
    background : linear-gradient(to left, #16161A 0%, #16161A 50%, rgba(22, 22, 22, 0) 100%);
    right : 0;
}

.panel:nth-of-type(even) .panel_text{
    background : linear-gradient(to right, #16161A 0%, #16161A 50%, rgba(22, 22, 22, 0) 100%);
    padding: 0 1.75em 0 .75em;
}

.panel h2{
    font-size : 1em;
    margin-bottom : .45em;
}

.panel p{
    font-size : .575em;
    margin : unset;
}

.panel:nth-of-type(odd) p{
    text-align : right;
}

.panel:nth-of-type(even) p{
    text-align : left;
}

.panel:nth-of-type(odd) h2{
    text-align : right;
}

.panel:nth-of-type(even) h2{
    text-align : left;
}

.panel .img{
    object-fit: contain;
    position: absolute;
    z-index: 0;
    top : 0;
    height : 100%;
}

.panel:nth-of-type(odd) .img{
    left : 0%;
}

.panel:nth-of-type(even) .img{
    right : 0%;
}

.heading p{
    text-align : center !important;
    font-size : .675em;
    line-height : 1.2;
}

.heading p:last-of-type{
    margin-top : .5em;
}

.heading h2{
    font-size : 1.375em;
    text-align : center !important;
}

.panel_text{
    width: calc(57.5% + 5vh);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    font-size: min(5.5vw, 8vh);
    padding: 0 .75em 0 1.75em;
    z-index : 1;
}

.category .panel_text *{
    max-width : 100vh;
}

.category .panel:nth-of-type(odd) .panel_text *{
    margin-left : auto;
}

.category .panel:nth-of-type(even) .panel_text *{
    margin-right : auto;
}

.category p{
    line-height : 1.25;
}

.history_bk{
    height : 100%;
    display : flex;
    width : 100%;
}

.history_bk .img{
    position : relative;
    left : unset !important;
}

.history_bk .img_container{
    width : 100%;
}

.history_bk .img{
    margin : 0 auto 0 0;
    left : -7% !important;
}

#History .panel_text{
    right: 0%;
    padding: 0 0.75em 0 1.75em;
    background: linear-gradient(to left, #16161A 0%, #16161A 35%, rgba(22, 22, 22, 0) 100%);
}

@media screen and (max-width : 200vh){
    .history_bk .img{
        left : -7% !important;
    }
}

@media screen and (max-width : 167vh){
    .history_bk .img{
        left : -20% !important;
    }
}

@media screen and (max-width : 140vh){
    .history_bk .img{
        left : -27% !important;
    }
}

@media screen and (orientation : portrait){
    .panel{
        height : unset;
        background : linear-gradient(to left, #16161A 0%,  #565666 50%, #16161A 100%);
        min-height:calc(100vh - max(8vh, 3.525vw));
        justify-content : center;
        font-size: min(8.5vw, 7vh);
    }

    .panel_text{
        font-size: min(11.25vw, 7.75vh);
        width : 100%;
        background : linear-gradient(to top, rgba(22, 22, 26, 1) 0%, rgba(22, 22, 26, 1) 2.5%, rgba(22, 22, 26, .825) 7.5%, rgba(22, 22, 26, .825) 92.5%, rgba(22, 22, 26, 1) 97.5%, rgba(22, 22, 26, 1) 100%) !important;
    }

    .heading{
        background : linear-gradient(to left, #16161A 0%, #41414D 40%, #41414D 60%, #16161A 100%) !important;
        padding : unset;
    }

    .heading .panel_text{
        padding: 0 .5em;
        height : 10em;
        justify-content : center;
        font-size: min(8vw, 7vh);
    }

    .nav_buttons{
        margin : .25em 0 .5em 0;
    }

    .nav_buttons .button{
        width: 46.5%;
    }

    .category .panel_text{
        padding : .375em !important;
    }

    .category .panel_text *{
        text-align : center !important;
    }

    .category .panel_text h2{
        margin : 0 0 .45em 0 !important;
    }

    .panel .img{
        left: -50% !important;
    }
    
    .history_bk .img_container{
        width : 100%;
    }
    
    .history_bk .img{
        left : unset !important;
        object-position: 0vh;
        margin : 0 auto;
    }
}

@media screen and (max-width : 85vh){
    .history_bk .img{
        object-position: 0vh;
    }
}

@media screen and (max-width : 68vh){
    .history_bk .img{
        object-position: -15vh;
    }
}

@media screen and (max-width : 59vh){
    .history_bk .img{
        object-position: -20vh;
    }
}

@media screen and (max-width : 52vh){
    .heading{
        padding : .5em 0;
    }

    .panel_text{
        font-size : min(13.5vw, 6vh);
        position : absolute;
    }

    .heading .panel_text{
        height : 13.5em;
        font-size : min(9.5vw, 7vh);
    }

    .nav_buttons{
        font-size: .75em;
    }

    .nav_buttons .button{
        width: 80%;
    }

    .category .panel{
        padding : unset;
    }

    .category .panel_text{
        width : 100%;
        background : #16161A;
    }

    .category .panel:nth-of-type(even) .panel_text{
        width : 100%;
        background : #41414D;
    }

    .category .panel_text{
        padding : 0 .5em !important;
    }

    .category .panel_text *{
        text-align : center !important;
    }

    .category .panel_text h2{
        margin : 0 0 .45em 0 !important;
    }
    
    .history_bk .img{
        object-position: -26vh;
    }
}

@media screen and (max-height : 40vw){
    .panel_text{
        font-size : min(13.5vw, 9vh);
    }
    
    .category .panel_text *{
        max-width : 150vh;
    }
}

@media screen and (max-height : 35vw){
    .panel_text{
        font-size : min(13.5vw, 10vh);
    }
    
    .category .panel_text *{
        max-width : 185vh;
    }
    
    .heading .panel_text{
        max-width : 310vh;
        font-size : min(13.5vw, 10vh);
    }
    
    .nav_buttons{
        font-size : .725em;
    }
}

.hidden{
    display : none;
    opacity : 0;
}

.invalid{
    background : #661F2F;
    border-color: #80263B;
}