body{
    background : linear-gradient(to right, #16161A 0%, #41414D 50%, #16161A 100%);
}

.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%;
}

.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 : 1rem;
    position : relative;
    transition : background .05s;
}

.inset{
    background : #16161A;
    border-radius : 1rem;
    position : relative;
}

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

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

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

.img{
    margin : 0 auto;
}

.shop_container{
    margin : auto;
    position : relative;
    height : calc(100vh - max(8vh, 3.525vw));
    width : 100%;
    display : flex;
    flex-direction : column;
    font-size: min(4.5vw, 8vh);
    background : linear-gradient(to left, #16161A 0%,  #565666 50%, #16161A 100%);
}

.modal_collection{
    position : absolute;
    z-index : 5;
    height : 100%;
    width : 100%;
    top : 0;
}

.modal_panel_container{
    position : relative;
    height : 100%;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    background : linear-gradient(to right, rgba(22,22,26, .0) 0%, rgba(22,22,26, .5) 5%, rgba(22,22,26, .5) 95%, rgba(22,22,26, .0) 100%);
    animation : modal_back .3s;
    opacity : 1;
}

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

@keyframes modal_in{
    from{ left : -150%; opacity:0;}
    to{ left : 0%; opacity:1; }
}

.modal_panel{
    animation: modal_in .30s;
    width : 85%;
    border-radius : .5em;
    padding : .25em;
    box-shadow :  0 0 .04em .04em #16161C;
    opacity : 1;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    margin : auto;
}

.panel_heading_container{
    padding : .125em;
    border-radius : .25em;
    margin-bottom : .25em;
}

.panel_heading{
    border-radius : .125em;
}

#notice_info{
    height : 100%;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content: space-between;
    padding : .25em;
    border-radius: 0.25em;
}

#notice_info .text:first-of-type{
    height : 100%;
    margin-bottom : .5em;
    font-size: .6em;
    padding : .25em 0;
}

#notice_info .text:last-of-type{
    height : unset;
    width : 40%;
    margin : 0 auto;
    border-radius : calc(1em/4.4);
    font-size : .55em;
}

.shop_panel_container{
    margin : 0 auto;
    display : flex;
    height : 100%;
    width : 100%;
    max-width : 210vh;
}

.controls_container{
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 50%;
    font-size : .875em;
    margin-right : 1em;
}

.tab{
    width : 100%;
    padding: calc(1em/7);
    border-radius: calc(1em/3.5);
}

.tab:last-of-type{
    margin-top : 1.5em;
}

.tab:nth-of-type(2){
    margin : .25em 0;
}

.tab .button{
    border-radius : calc(1em/7);
    flex-direction : row;
    padding : .125em;
}

.tab .img_container,
.tab .text{
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 45%;
}

.tab .img{
    height : 1em;
}

.tab:nth-of-type(1) .img{
    content : url("Images/Credit.webp");
}

.tab:nth-of-type(2) .img{
    content : url("Images/Subscription.webp");
}

.tab:nth-of-type(3) .img{
    content : url("Images/Full_Access.webp");
}

.tab:nth-of-type(4) .img{
    content : url("Images/Logo.webp");
}

.tab .text{
    font-size : .8em;
    height : unset;
    width : 100%;
}

.confirm{
    width : 80%;
    margin : .625em auto 0 auto;
}

.confirm_container{
    border-radius : 1em;
    padding : .125em;
    border-width : .0625em;
}

.confirm_container .button{
    border-radius : .8125em;
    border-width : .0625em;
    padding : .125em;
}

.confirm_content{
    display : flex;
    justify-content : center;
}

.confirm_container .img_container{
    margin-right : .25em;
}

.confirm_container .img{
    content : url("Images/Cart.png");
    height : 1.0625em;
    margin : unset;
}

.confirm_container .text{
    font-size : .625em;
}

.shelf_container{
    width : 100%;
    display : flex;
    height : 100%;
    flex-direction : column;
    justify-content : center;
    position : relative;
}

.product_container{
    border-width : 0 0 .125em .125em;
    border-radius : 0 0 0 1.25em;
    padding : .25em;
    height : 100%;
    display : flex;
    justify-content : center;
    flex-direction : column;
}

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

#credits,
#subs{
    width : 80%;
    margin : auto;
}

#credits .inset,
#subs .inset{
    display : flex;
    padding : calc(1em/6);
    border-radius : calc(1em/3);
}

.option_head{
    display : flex;
    justify-content : space-around;
    margin-bottom : .25em;
}

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

#credits .head_image *{
    content : url("Images/Credit.webp");
    height : 1.5em;
}

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

.option_row{
    display : flex;
    justify-content : center;
    margin : .25em 0;
    font-size : .75em;
}

.option_controls .option_row:last-of-type{
    margin-top : 1em;
}

#custom_credits{
    display : flex;
    justify-content : space-between;
    width : 100%;
    margin-right : .5em;
}

#custom_credits .button{
    border-radius : calc(1em/6);
    width : 1.5em;
}

#custom_credits .button:first-of-type *{
    content : url("Images/Remove.png");
    height : .875em;
}

#custom_credits .button:last-of-type *{
    content : url("Images/Add.png");
    height : .875em;
}

.credit_count_container{
    display : flex;
    justify-content : center;
}

.custom_image{
    display : flex;
    justify-content : center;
    flex-direction : column;
    margin : 0 .125em;
}

.custom_image *{
    content : url("Images/Credit.webp");
    height : 1em;
}

#credit_cost{
    padding : 0 .5em;
    width : 5em;
}

#credit_options{
    width : 100%;
}

#credit_options .button{
    width : 100%;
    margin : 0 .25%;
}

#credit_options .button:first-of-type{
    border-radius : calc(1em/6) 0 0 calc(1em/6);
    margin : unset;
    margin-right : .25%;
}

#credit_options .button:last-of-type{
    border-radius : 0 calc(1em/6) calc(1em/6) 0;
    margin : unset;
    margin-left : .25%;
}

#credit_submit .inset{
    width : 50%;
}

#credit_submit .inset:last-of-type{
    margin-left : .5em;
}

#credit_submit .button{
    border-radius : calc(1em/6);
}

#subs{
    width : 90%;
}

#subs .inset{
    width : 100%;
}

#subs .head_image *{
    content : url("Images/Subscription.webp");
    height : 1.5em;
}

#subs .option_row .inset:first-of-type > *{
    display : flex;
    justify-content: center;
    flex-direction:row;
    padding : 0 .5em;
    border-radius : calc(1em/6);
}

.sub_details{
    display : flex;
    justify-content : center;
    width : 50%;
}

.sub_count{
    display : flex;
}

.sub_count .img{
    content : url("Images/Credit.webp");
    height : 1em;
}

.sub_image{
    display : flex;
    justify-content : center;
    flex-direction : column;
    margin : 0 .125em;
}

#subs .option_row .button > .text,
#subs .option_row .label > .text{
    width : 50%;
    margin-left : .5em;
}

#subs .option_row .inset:last-of-type{
    width : 9em;
    margin-left : .5em;
}

#subs .option_row:last-of-type .inset{
    width : 50%;
}

#subs .option_row:last-of-type .button{
    justify-content : center;
    border-radius : calc(1em/6);
}

#subs .option_controls .option_row:last-of-type .inset:first-of-type .button::after{
    content : "How do these work?";
}

#full{
    width : 85%;
    margin : auto;
}

#full .head_image *{
    content : url("Images/Full_Access.webp");
    height : 1.75em;
}

#full .option_row .inset{
    width : 100%;
}

#full .option_row .inset{
    padding: calc(1em/6);
    border-radius: calc(1em/3);
}

#full .button,
#full .label{
    border-radius : calc(1em/6);
}

#full .option_row:first-of-type .inset:last-of-type{
    width : 6em;
    margin-left : .5em;
}

#full .option_row:last-of-type .inset{
    width : 50%;
}

#full .option_row:last-of-type .inset:last-of-type{
    width : 50%;
    margin-left : .5em;
}


@media screen and (orientation: portrait){
    .shop_container{
        justify-content : center;
        font-size: min(8vw, 7vh);
        height : unset;
        padding: 1em 0.25em;
        min-height:calc(100vh - max(8vh, 3.525vw));
    }

    .shop_panel_container{
        flex-direction : column;
        justify-content : center;
    }

    .product_container{
        width : 100%;
        margin-bottom : .75em;
    }

    #credits,
    #subs,
    #full,
    .sub_details{
        width : 100%;
    }

    #subs .button > .text,
    #subs .label > .text{
        display : none;
    }

    .controls_container{
        background : unset;
        border : unset;
        box-shadow : unset;
        flex-direction : row;
        /*font-size : 1.125em;*/
        margin : 0 auto;
        width : 60%;
    }

    #subs .option_controls .option_row:last-of-type .inset:first-of-type{
        width : 45%;
    }

    #subs .option_controls .option_row:last-of-type .inset:first-of-type .button::after{
        content : "What are these?";
    }

    #subs .option_controls .option_row:last-of-type .inset:last-of-type{
        width : 55%;
    }

    .option_controls .option_row:last-of-type{
        margin-top : .5em;
    }

    .modal_panel{
        height : unset;
        width : 95%;
    }

    .modal_panel_container{
        background : unset;
        justify-content : unset;
    }

    #notice_info .text:first-of-type {
        padding: 0.5em;
    }

    .tab_container{
        display : flex;
        flex-direction : column;
        justify-content : center;
        width : 100%;
    }

    .tab:last-of-type{
        margin-top : .75em;
    }

}

.hidden{
    display : none !important;
}

.disabled, .disabled:hover{
    background : #999999;
    border-width : 0 !important;
    cursor : default;
    opacity : .7;
}