.page-container {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    grid-template-columns: .6fr 1fr;
    grid-template-areas: 
        "form bg";
}

/* Background */
div.bg {
    grid-area: bg;
    width: 100%;
    height: 100%;
    background-color: #e5e5f7;
    opacity: 1;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #e5e5f0 90px ), repeating-linear-gradient( #d9dfe955, #97abcc );
}

/* Option list */
div.toggleOption {
    display: flex;
    grid-area: fotterL;
}

div.toggleOption li {
    display: inline-block;
    font-size: 1vw;
    margin-top: auto ;
    margin-bottom: 1vh;
}

div.toggleOption li:nth-child(1) {
    margin-left: 1vw;
}

div.toggleOption li:nth-child(2) {
    margin-left: .3vw;
    color:#0284c7;
}

/* Justify form */
div.justifyForm {
    grid-area: form;
    display: grid;
    grid-template-columns: .15fr 1fr .15fr;
    grid-template-rows: .35fr 1fr .25fr;
    grid-template-areas: 
    "headerL headerM headerR"
    "left main right"
    "fotterL fotterL fotterR";
    width: 100%;
    height: 100%;
}

/* Overall */
form {
    grid-area: main;
}

form h1{
    text-align: center;
    font-weight: 800;
    font-size: 1.75vw;
    margin: auto;
}

form h3.desc{
    text-align: center;
    margin: auto;
    font-weight: 400;
    font-style: italic;
    font-size: .85vw;
}

form .inputHeader {
    position: relative;
    top: 1.25vh;
    left: 1vw;
    font-size: .75vw;
    margin: 0;
    z-index: 1;
}

form input{
    position: relative;
    top: -30%;
    width: 95%;
    height: 80%;
    padding-left: 1vw;
    padding-top: 1.55vh;
    margin: 0;
    z-index: 0;
    font-size: .85vw;
    text-align: left;
    background: transparent;
    color: #475569;
    border: none;
}

form .register-grid div, form .login-grid div{
    float: left;
    width: 70%;
    height: 80%;
    border-radius: 25px;
    background-color: #e2e8f0;
    margin: auto;
}

form span {
    display: block;
    margin: auto;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    width: 75%;
    height: .75%;
    background: #e2e8f0;
    border-radius: 25px;
}

form .buttonFlex {
    display: flex;
    justify-content: flex-end;
}

form .errorDisplay {
    margin-left: 4vw;
    font-size: .75vw;
    color: #991b1b;
}

form .spanRow {
    display: grid;

    grid-template-rows: 1fr 0.25fr 1fr;
    grid-template-areas: 
        "left middle right";
}

/* Login */

div.justifyForm form .login-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 7.5vh);
    grid-template-areas: 
        "email"
        "password";
}

div.justifyForm form .login-grid #login-email {
    grid-area: email;
}

div.justifyForm form .login-grid #login-password {
    grid-area: password;
}

/* Buttons */
form button.default {
    transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, background 0.25s ease-out, color 0.25s ease-out;
    width: 8vw;
    height: 5vh;
    border-radius: 25px;
    border: none;
    margin-top: 1.5vh;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-right: 4vw;
    font-size: .65vw;
    color: #e2e8f0;
    background: #1d4ed8;
    transform: none;
}

form button.default:hover {
    transition: box-shadow 0.25s ease-out, background 0.05s ease-out, transform 0.25s ease-out;
    background: #143eb1;
    transform: scale(1.05, 1.05);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

form button.default:active {
    transition: box-shadow 0.05s ease-out, transform 0.05s ease-in;
    transform: scale(1, 1);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 12px;
}

form button.succed {
    transition: width .85s cubic-bezier(0.94, 0.13, 0.2, 0.98), border-radius 1s cubic-bezier(0.94, 0.13, 0.2, 0.98), color .4s ease-in-out;
    width: 5vh;
    height: 5vh;
    border-radius: 100%;
    border: none;
    margin-top: 1.5vh;
    margin-right: 4vw;
    font-size: .65vw;
    color: transparent;
    background: #1d4ed8;
    transform: none;
}

/* Register */

div.justifyForm form .register-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 7.5vh);
    grid-template-areas: 
        "username"
        "displayname"
        "email"
        "password";
}

div.justifyForm form .register-grid #register-username {
    grid-area: username;
}

div.justifyForm form .register-grid #register-displayname {
    grid-area: displayname;
}

div.justifyForm form .register-grid #register-email {
    grid-area: email;
}

div.justifyForm form .register-grid #register-password {
    grid-area: password;
}

/* Inputs lowercased */ 
#register-username, #register-email, #login-email {
    text-transform: lowercase;
}

/* SVG */
svg.smoothFade {
    animation: svgSmoothFade .25s ease-in-out normal forwards;
    opacity: 0;

}

/* Anims */
@keyframes svgSmoothFade {
    0% {
        opacity: 0;
    } 
    100% {
        opacity: 1;
    }
}