#welcome{
    background : rgba(75, 46, 153, .25);
}

#welcome .modal_panel_horizontal_container{
    height : 100%;
    max-height : 50vw;
    font-size : min(4.5vw, 8vh);
}

#welcome .modal_panel{
    width : 90%;
    position : absolute;
    transition : top .2s;
    display : flex;
    justify-content : center;
    box-shadow : unset;
    padding : 0 .25em;
    max-width : 225vh;
}

.welcome_contents{
    display : flex;
    flex-direction : column;
    justify-content : center;
    width : 50%;
    position : relative;
}

.welcome_modal_container{
    position : absolute;
    height : 100%;
    width : 100%;
    z-index : 1;
    display : flex;
    flex-direction : column;
}

.welcome_modal_container > *{
    width : 90%;
    position : absolute;
    left : 5%;
    animation : welcome_Modal .2s;
    font-size : 1.25em;
    display : flex;
    flex-direction : column;
    margin : auto;
    padding : .2em;
    border-radius : .4em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
}

@keyframes welcome_Modal{
    from{left:-150%;}
    to{left : 5%; }
}

#welcome_info{
    height : 95%;
    top : 2.5%;
}

.welcome_heading{
    padding : .1em;
    border-radius : .2em;
    margin-bottom : .2em;
}

.welcome_heading .label{
    font-size : .875em;
    border-radius : calc(1em/8.75);
}

#welcome_info .inset:last-of-type{
    height : 100%;
    font-size : .5em;
    border-radius : .75em;
}

#signup,
#terms{
    height : 95%;
    top : 2.5%;
}

label{
    margin : unset;
}

#signup input[type=checkbox]{
    margin : unset;
    height : .625em;
    width : .625em;
}

.form{
    width :  100%;
    height : 100%;
    display : flex;
    flex-direction : column;
    justify-content : space-between
}

.form_row{
    display : flex;
}

.form_field{
    padding : .1em;
    border-radius : .2em;
    display : flex;
    width : 100%;
}

.form_entry{
    font-size : .425em;
    padding : 0 .1em;
    text-overflow : ellipsis;
    border-width : 0em;
    border-radius : calc(1em/4.25);
    cursor : pointer;
    text-align : center;
    width : 100%;
    transition : background .25s;
    background : #16161A;
    color : #E6E6F2;
    font-family : Veranda, sans-serif;
    text-shadow: 0.03125em 0.03125em 0.0625em #16161C;
}

.form_entry:hover{
    background : var(--entry-hover);
}

.form_entry:focus{
    outline: none;
    background : unset;
    color : #E6E6F2;
}

#signup_terms,
#signup_confirm{
    font-size : .4em;
    justify-content : center;
}

#signup .button{
    width : unset;
    box-shadow : 0 0 .02em .02em var(--box-shadow);
    padding : 0 1em;
    margin-left : 1em;
    border-radius : .5em;
}

.form_radio_container{
    display : flex;
    flex-direction : column;
    justify-content : center;
    margin-left : .25em;
}

.keep_container{
    display : flex;
    margin-right : .25em;
}

.keep_container label{
    font-size : .5em;
    margin : unset;
}

.radio{
    height : .3em;
    width : .3em;
    border-radius : calc(4vw/19.2);
}

input[type=checkbox]{
    margin : auto .25em;
}

#login{
    height: 59.25%;
    top: 20.375%;
}

form{
    height : 100%;
}

#login .radio{
    height : .675em;
    width : .675em;
}

#login .button,
#reset_email .button,
#reset_password .button{
    width : unset;
    padding : 0 1em;
    border-radius : calc(1em/1.875);
    margin-left : 1em;
    box-shadow : 0 0 .02em .02em var(--box-shadow);
}

#login .form_row:last-of-type .button,
#reset_password .form_row:last-of-type .button{
    margin : unset;
}

#login_confirm,
#login .form_row:last-of-type,
#reset_email .form_row:last-of-type,
#reset_password .form_row:last-of-type{
    justify-content : center;
    font-size : .375em;
}

#forgot{
    font-size : .375em;
    margin : 0 auto;
}

#reset_email{
    height : 40%;
    top : 30%;
}

#reset_password{
    height : 52.5%;
    top : 23.75%;
}

#reset_email .button:last-of-type{
    background : var(--warning);
}

#reset_email .button:last-of-type:hover{
    background : var(--warning-hover);
}

#terms .inset{
    height : 100%;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    padding : .2em .1em;
    border-radius : .2em;
}

#terms .inset ::-webkit-scrollbar-track{
    margin : .25em 0;
}

#terms .inset  ::-webkit-scrollbar-thumb{
    border-radius : .0625em;
    height : 5em !important;
}

.sub_head{
    font-size : 1.25em;
    margin-bottom : .5em;
    text-decoration : underline;
    text-align : center;
}

#terms .term_details{
    font-size : .375em;
    height : 100%;
    overflow-y : scroll;
    margin-bottom : .5em;
    justify-content : unset;
    padding : .5em;
    text-align : left;
}

.term_navigation{
    display : flex;
    font-size : .325em;
    width : 95%;
    margin : 0 auto;
}

.term_navigation *{
    border-radius : calc(1em/3.25);
}

.term_navigation .button:nth-of-type(2){
    margin : 0 .5em;
}

.term_navigation .button:last-of-type{
    width : 50%;
}

.welcome_panel{
    box-shadow : unset;
    height : 100%;
}

#welcome_head{
    font-size : .75em;
    border-radius : calc(1em/3);
}

#welcome_logo{
    content : url("../../Images/Loading.gif");
    height : 3.75em;
    display : flex;
    margin: .5em auto;
    box-shadow : 0 0 .02em .02em var(--box-shadow);
    background : var(--box-shadow);
    border-radius : 25em;
}

#welcome_flavor{
    font-size : .575em;
    border-radius : calc(1em/2.3);
    line-height : 1.3;
    padding : .125em;
}

.welcome_options{
    width : 50%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    padding : .5em 0;
}

.welcome_option,
#welcome_notice .outset{
    padding : .125em;
    border-radius : .5em;
    box-shadow : 0 0 .04em .04em var(--box-shadow);
    width : 90%;
    margin : auto;
    font-size : 1.25em;
}

#welcome_notice .outset{
    width : 90%;
    font-size : 1em;
}

.welcome_option:nth-of-type(4),
.welcome_option:nth-of-type(5){
    width : 62.5%;
    font-size : .875em;
}

.welcome_option .inset,
#welcome_notice .inset{
    padding : .125em;
    border-radius : .375em;
}

.welcome_option .button{
    font-size : .675em;
    border-radius : calc(1em/2.7);
}

#welcome_alert{
    height : 90%;
    top : 5%;
}

#welcome_alert .inset:last-of-type{
    height : 100%;
    font-size : .5em;
    display : flex;
    flex-direction : column;
    justify-content : space-between;
    padding : .25em .5em;
    border-radius : .4em;
}

#welcome_alert .inset:last-of-type > .text:first-of-type{
    height : 100%;
}

.alert_buttons{
    display : flex;
}

.alert_buttons .button{
    height : unset;
    width : 50%;
    margin : 0 auto;
    font-size : .75em;
    border-radius : calc(1em/3.75);
}

.alert_buttons .button:first-of-type{
    margin-right : 1em;
}

@media screen and (orientation: portrait){
    #welcome .modal_panel_horizontal_container{
        max-height : 240vw;
    }

    #welcome .modal_panel{
        width : 100%;
        flex-direction : column;
        font-size: min(10vw, 4vh);
    }

    .welcome_contents{
        width: 100%;
        margin: 0 auto;
        height: 50%;
        max-width: 55vh;
    }

    .welcome_options{
        height : 50%;
        width : 100%;
        max-width : 60vh;
        margin : 0 auto;
    }
}