body {
width: 100vw;
height: 100vh;
outline: none;
margin: 0;
border: none;
padding: 0;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 1.6vh;
color: #000055;
background-color: #ffffff;
}

h1, h2 {
color: #ffaa00;
}

img {
max-width: 100%;
outline: none;
margin: 0;
border: none;
border-radius: 1em;
padding: 0;
}

video {
max-width: 100%;
outline: none;
margin: 0;
border: none;
border-radius: 1em;
padding: 0;
}

code {
font-family: 'Courier New', Courier, monospace;
font-size: 1em;
}

pre code {
font-family: monospace;
font-size: .8em;
display: block;
outline: none;
margin: 0;
border: none;
border-radius: 0;
padding: 1em;
color: #ffffff;
background: #000055;
overflow-x: scroll;
}

.page {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2em auto 8em;
grid-template-areas: 'a' 'b' 'c';
place-items: center;
}

.header {
grid-area: a;
}

.main {
grid-area: b;

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: 'a';
place-items: center;
}

.document {
display: block;
width: 75vw;
outline: none;
margin: 0;
border: none;
padding: 1em;
background-color: #ffffff;
vertical-align: top;
}

.category {
display: inline-block;
width: 100%;
outline: none;
margin: 0;
border: none;
padding: 0;
text-align: center;
vertical-align: top;
}

.footer {
grid-area: c;
}

.button {
outline: none;
margin: 0.5em 0.5em;
border: none;
border-radius: 1em;
padding: 0.5em 2em;
color: white;
background-color: #000055;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1em;
cursor: pointer;
}

/*
This was an older method kept here for reference: 
@media screen and (min-width: 500px) {
body {font-size: 2.0vh;}
.document {width: 66vw;}
.category {width: 20vw;}
}
*/

@media (orientation: landscape) {
body {font-size: 2.2vh;}
.document {width: 66vw;}
.category {width: 20vw;}
}