*
{
    box-sizing: border-box;
}
body
{
    background-color: black;
    margin: 0px;
    -overflow: hidden;
}
a
{
    color: #c0e0ff;
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.fullscreen
{
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
/*div.fullscreen
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}*/
.fullscreen #content div
{
    text-align: left;
}
body, p, input, button
{
    color: white;
    font-family: sans-serif;
    font-size: 24px;
}
input, button
{
    background-color: #40608080;
    text-transform: uppercase;
}
input:disabled, button:disabled
{
    border-color: #808080;
    background-color: #40404080;
    color: #808080;
}
input
{
    display: inline;
    border: white solid 4px;
    border-radius: 8px;
    padding: 8px;
    margin: 16px;
    font-size: 24px;
}
input[type=checkbox]
{
    vertical-align: middle;
    width: 36px;
    height: 36px; 
}
input:not([type=checkbox])
{
    width: 400px;
}
button
{
    display: inline-block;
    border: white solid 2px;
    border-radius: 2px;
    padding: 8px;
    font-size: 18px;
    margin: 8px;
}
button span
{
    display: inline-block;
    font-family: Impact, sans-serif ;
}
button:active:not(:disabled)
{
    transition-property: background-color;
    transition-duration: 0;
    background-color: #c0e0ffc0;
}
button:not(:active):not(:disabled)
{
    transition-property: background-color;
    transition-duration: .5s;
    background-color: #40608080;
}
span.error
{
    color: red;
    display: none;
}

div.modal {
    animation: .5s fade-in 0s both;
    backdrop-filter: blur(16px);
    text-align: center;
}
div.modal > div
{
    font-family: serif;
    display: inline-block;
    background-color: black;
    border: 4px solid white;
    padding: 16px;
    margin-top: 100px;
}