body{
    background-color: black;
    color: #DCE6E9;
    font-family: 'Source Han Serif';
    margin: 0;
}

header{
    display: flex;
    align-items: center;
    background: linear-gradient(transparent,rgb(39, 39, 39));
    padding: 10px;
    justify-content: space-between;
}
header > h1{
    margin: 0 15px 0 0;
    font-size: 20px;
    flex-shrink: 0;
}
header > nav{
    flex-shrink: 0;
}
header > nav > a{
    color: inherit;
    text-decoration: none;
    margin: 0 5px;
}
header > #info{
    width: 100%;
    text-align: right;
    font-size: smaller;
}

main{
    padding: 10px;
}
a{
    color: #b5cad1;
}

.window{
    border: solid 2px darkslategrey;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.window > .title:first-child{
    border-bottom: solid 2px darkslategrey;
    font-size: 23px;
    font-weight: bold;
    padding: 3px 8px;
    margin: 0 -10px;
}

p{
    margin: .6em 0;
}

#login{
    text-align: center;
    margin: 100px auto 0;
    width: 500px;
}
#form{
    margin-top: 50px;
}
#form > label{
    display: block;
}
#form > label > input{
    outline: none;
    border: none;
    border-bottom: solid 2px #DCE6E9;
    background: transparent;
    color: whitesmoke;
    font-size: 16px;
    font-family: inherit;
    text-align: center;
    margin-bottom: 10px;
    padding: 3px 8px;
    width: 300px;
}
#form > input[type=submit]{
    font-size: 20px;
    padding: 10px;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font-family: inherit;
    transition: color .1s;
}
#form > input[type=submit]:active{
    color: gray;
}

address{
    text-align: center;
    font-size: 14px;
    font-style: normal;
    opacity: .6;
    margin-top: 50px;
}

.error{
    color: red;
    animation: fade-in .7s forwards;
}
@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}