html {
margin: 0;
background-color: #502060;
color: #00cccc;
font-family: Monocraft monospace;
}
body {
margin: auto;
display: block;
width: min(700px, 90vw);
margin-top: min(10em, 30vh);
margin-bottom: min(10em, 30vh);
}
a {
color: #00ffff;
}
a.btn {
background-color: #603060;
display: inline-block;
width: 10em;
max-width: 90vw;
min-width: fit-content;
padding: 10px;
margin: 0;
margin-bottom: 1px;
text-decoration: none;
text-align: center;
transition: 0.2s;
}
a.btn:hover {
background-color: #605070;
}
form {
background-color: #425;
padding: 10px;
margin: 20px auto 20px auto;
width: fit-content;
}
label {
text-align: right;
display: block;
}
input {
height: 2em;
margin-bottom: 0.5em;
border: 0;
background-color: #000;
color: #f0f;
}
button {
background-color: #a0a;
color: #000;
border: 0;
width: 100%;
height: 2em;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background-color: #909;
}
div.error {
background-color: #913;
color: #fff;
display: block;
width: calc(100% - 60px);
padding: 15px;
margin: 15px;
}
img.ss {
margin: auto;
display: inline-block;
width: min(calc(45vw - 1.5em), calc(350px - 1.5em));
margin: 0.5em;
}