:root{
    --darkblue:#121a33;
    --blue-shaded: #0c597c;
    --blue: #167dad;
    --lightblue: #1bb7ff;
    --off-white: #e8f0fe;
    --light-red: #ffcaca;
}
*{
    margin:0;
    padding:0;

    box-sizing: border-box;

    list-style: none;
    outline: none;
    border: none;
    text-decoration:none;
    position:relative;
    object-fit: contain;
}
body{
    background-color:var(--darkblue);
    display:flex;
    flex-direction:column;
    width:100vw;
    height:100vh;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}  
main{
    background-color:white;
    border-radius:4px;
    border: inset 2px lightgray;
    width:420px;
    padding:96px 8px 8px;
}
#merlin-logo{
    width:75%;
    position:absolute;
    top:-16px;
    left:-16px;
}
label,input,h1,h2,h3,h4,h5,h6,a,p,button{
    font-family: \"Noto Sans\", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
p{
    text-align: center;
}
form{
    display:flex;
    flex-direction: column;
}
.error-message{
    position:absolute;
    right:-16px;
    transform:translateX(100%);
    background-color:var(--light-red);
    padding:3px 8px;
    font-size:16px;
    display: none;
}
header,
footer{
    display:flex;
    align-items:center;
    gap:8px;
}
h1{
    margin:0 auto 24px;
}
label{
    line-height:24px;
}
input{
    width:100%;
    padding:0 8px;
    font-weight:400;
    line-height:24px;
    background-color:var(--off-white);
}
input.error{
    background-color:var(--light-red);
}
.flex-row{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: left;
    gap: 8px;
}
.flex-row:not(:last-of-type){
    margin-bottom: 8px;
}
button{
    margin:32px auto 32px;
    border-radius:999px;
    font-size:16px;
    padding:8px 64px;
    background-color:var(--blue);
    color:white;
    text-transform:uppercase;
}
button:not(:disabled):hover{
    background-color:var(--blue-shaded);
    cursor:pointer;
}
button:disabled{
    background-color:gray;
    color:lightgray;
}
a{
    color:var(--blue);
}
a:hover{
    color:var(--blue-shaded);
    cursor:pointer;
}
.input-tooltip{
    background-color:var(--off-white);
    width:240px;
    position:absolute;
    right:-16px;
    top: 75%;
    transform:translate(100%, -50%);
    padding:8px;
    display:none;
}