@font-face {
   font-family: 'FFF Forward';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(/static/fff-forward.ttf);
}

:root {
   font-family: 'FFF Forward', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   text-align: center;
   color: white;
   background: #000;
   -webkit-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   font-size: 1.4rem;
   box-sizing: border-box;
}

body {
   height: 100%;
   margin: 0;
}

main {
   padding: 3rem 0;
   max-width: 40rem;
   font-size: 1.4em;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

@media screen and (max-width: 980px) {
   main {
      padding: 0 1rem;
      /* margin-top: 3rem; */
   }
}

h1,
h2,
p {
   color: white;
   text-shadow: 3px 3px 0 #000;
}

canvas {
   display: block;
}

a.button {
   color: black;
   padding: 15px 25px;
   background-color: white;
   border: solid 2px black;
   font-size: 0.7em;
   text-decoration: none;
   box-shadow: #000 5px 5px 0;
   transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

a.button:hover {
   background-color: #ccc;
   box-shadow: #000 2px 2px 0;
}

a.button:active {
   background-color: #aaa;
   box-shadow: #000 0 0 0;
}