body{
    background : linear-gradient(to bottom, #16161A 0%, #41414D 40%, #41414D 60%, #16161A 100%) !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%;
}

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

input[type=text]:hover,
textarea:hover{
    background : #3F2680;
}

input[type=text]:focus,
textarea:focus{
    background : #16161A;
}

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

.contact{
    display : flex;
    justify-content : center;
    height : 100%;
    max-height : 65vw;
    max-width : 220vh;
    margin : 0 auto;
    width : 100%;
}

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

#details{
    width : 47.5%;
}

#form{
    width : 52.5%;
}

.panel_container .outset{
    border-radius : .5em;
    padding : .25em;
    box-shadow : 0 0 .04em .04em #16161C;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
}

#details .outset{
    height : 90%;
    width : 95%;
    margin : auto;
}

#form .outset{
    height : 90%;
    width : 95%;
    margin : auto;
}

.panel_container .inset{
    border-radius : .25em;
    padding : .125em;
}

.panel_container .outset .inset:first-of-type{
    margin-bottom : .25em;
}

.header .label{
    border-radius : .125em;
}

#details .inset:last-of-type{
    height : 100%;
    padding : .25em !important;
    display : flex;
    flex-direction : column;
    justify-content : center;
}

#details .inset:last-of-type .text:first-of-type{
    margin-bottom : .5em;
    height : 100%;
    font-size : .6em;
    line-height : 1.2;
}

#details .button{
    font-size : .55em;
    height : unset;
    padding : .125em;
    margin : auto;
    border-radius : calc(1em/4.4);
    width : 50%;
}

#categories{
    display : flex;
}

#categories *{
    font-size : .575em;
    white-space : nowrap;
    width : 100%;
    margin : 0 .125%;
    padding : .125em 0;
}

#categories .label{
    border-radius : calc(1em/4.6) 0 0 calc(1em/4.6);
    margin-right : .125%;
}

#categories .button:last-of-type{
    border-radius : 0 calc(1em/4.6) calc(1em/4.6) 0;
    margin-left : .125%;
}

textarea{
    background : rgba(0, 0, 0, 0);
    border : none;
    resize : none !important;
    height : 100%;
    width : 100%;
    color : #E6E6F2;
    font-size : .55em !important;
    border-radius : .455em !important;
    padding : .5em !important;
    margin-bottom : .5em !important;
    cursor : pointer;
    transition : background .25s, border-color .25s;
    font-family : Verdana, sans-serif !important;
    text-shadow : .03125em .03125em .0625em #16161C;
}

#form ::-webkit-scrollbar-track{
    margin : .375em 0;
}

#form ::-webkit-scrollbar-thumb{
    border-radius : .125em;
    border-width : 0;
}

textarea:focus{
    outline: none;
}

.confirm_row{
    display : flex;
    justify-content: space-between;
}

#guest_email{
    width : 100%;
    font-size : .5em;
    margin : unset;
    margin-right : .5em;
    cursor : pointer;
    border-radius : .5em;
    border-width : 0;
    transition : background .2s;
    padding : .125em .5em;
    font-family : Verdana, sans-serif !important;
}

#guest_email:focus{
    outline: none;
}

.confirm_row > .button{
    font-size : .5em;
    width : 60%;
    margin : 0 auto;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em #16161C;
}

@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);
        padding: 0.25em;
    }

    .contact{
        flex-direction : column;
        max-height : unset;
    }

    #details{
        width : 100%;
        margin-bottom : .5em;
    }

    #details .outset,
    #form .outset{
        width : 100%;
        margin : unset;
    }

    #details .inset:last-of-type {
        height: 8em;
    }

    #form{
        width : 100%;
    }

    textarea{
        height : 60vw;
    }
}

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