html {
height: 100%;
}
body {
background-color: #f0f0f0;
line-height: 200%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
font-family: sans;
}
h1, h2 {
text-align: center;
}
h1 {
user-select: none;
}
/* Small screens */
@media only screen and (max-width: 1080px) {
body {
width: 85vw;
}
h1 {
font-size: 300%;
}
h2 {
font-size: 200%;
line-height: 100%;
margin-top: 0;
margin-bottom: 0.5em;
}
label {
font-size: 150%;
}
input {
font-size: 200%;
width: 100%;
}
form {
width: 100%;
}
dd {
margin-bottom: 2em;
margin-left: 0;
}
textarea {
width: 80vw;
font-size: 200%;
}
.bigtext {
min-height: 40vh;
}
}
/* Big screens */
@media only screen and (min-width: 1081px) {
body {
min-height: 98%;
width: 40vw;
}
h1 {
font-size: 300%;
}
input, textarea {
margin-bottom: 0.5em;
font-size: 105%;
font-family: sans;
}
dd {
margin-left: 0;
}
dt {
margin-left: 0.5em;
}
dl {
margin-top: 0;
}
#closingtext {
width: 50%;
}
}
form {
display: flex;
flex-grow: 1;
flex-direction: column;
}
dl {
display: flex;
flex-grow: 1;
flex-direction: column;
}
dd {
display: flex;
}
textarea {
flex-grow: 1;
padding: 0.5em;
}
.bigtext {
flex-grow: 1;
min-height: 35vh;
font-size: 90%;
}
.errors {
color: #a40f0f;
}
.submit {
margin-left: auto;
padding: 0.5em 1em 0.5em 1em;
}
#body {
flex-grow: 1;
}