/* 
The font size and the width of a few items are scaled
based on the device that is being used. The assumption is
that the device can be determined by the orientation. The
default values below are for portrait (a phone) since a
phone is likely becoming the most commonly used device.
Not trying to create Desktop/Mobile versions of the pages,
since this no longer represents the diverse ways by which
to view content.

Most things are sized based on current font size (`em`)
and this is based on view height (`vh`). When changing
to landscape, the font size is changed, which changes
everything else.
*/

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;
}

table {
margin-left: auto;
margin-right: auto;
}

th, td {
padding-left: 1em;
padding-right: 1em;
}

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: .8em;
}

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: 1em auto 10em;
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;

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;

padding-bottom: 4em;
}

.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;
}

.pulse-button {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  15% {
    transform: scale(1.1);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
}

/*
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.0vh;}
.document {width: 66vw;}
.category {width: 20vw;}
}