html { height: 100%; } body { min-height: 90%; text-size: 150%; line-height: 200%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; font-family: sans; } /* Small screens */ @media only screen and (max-width: 1080px) { body { width: 95vw; font-size: 200%; } h1 { font-size: 400%; } h2 { font-size: 300%; line-height: 100%; margin-top: 0; margin-bottom: 0; } label { font-size: 150%; } input { font-size: 200%; width: 100%; } form { width: 90%; } 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 { width: 40vw; } h1 { font-size: 3em; } .content, .ret { font-size: 1.2em; } img, small { width: 30vw; } small { font-size: 100%; } #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; } .bigtext { flex-grow: 1; } .errors { color: #a40f0f; } #body { flex-grow: 1; }