html, body {
  color: rgba(51, 51, 51, 0.9);
  font-size: 20px;
  line-height: 1.4em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; }

h2 {
  font-size: 1.4em; }

h3 {
  font-size: 1.2em; }

ul {
  padding-left: 1em; }

@keyframes bounce {
  0%, 75% {
    margin-bottom: 0; }
  25% {
    margin-bottom: 5px; } }
.screen#geodate {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  background: radial-gradient(circle at center 110vh, #F96, #336 80%, #112);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; }
  .screen#geodate h1 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 2em; }
  .screen#geodate p {
    font-size: 1.5em;
    line-height: 1.4em;
    max-width: 25em;
    margin: 0 auto; }
  .screen#geodate .container:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    bottom: 20px;
    right: calc(50vw - (20px / 2));
    border-bottom: solid 5px rgba(255, 255, 255, 0.95);
    border-right: solid 5px rgba(255, 255, 255, 0.95);
    transform: rotate(45deg); }
  .screen#geodate:hover .container:after {
    animation: bounce 1s ease infinite; }

.screen#license {
  background: linear-gradient(#fff, #def); }

.container {
  margin: 0 auto;
  padding: 2em;
  max-width: 45em; }

pre {
  background: rgba(221, 238, 255, 0.5);
  color: rgba(85, 85, 85, 0.9);
  border-radius: 5px;
  white-space: pre-wrap;
  padding: 1em; }

a {
  text-decoration: none;
  color: #09c; }

a:hover, a:active {
  text-decoration: underline; }

@media (max-width: 575px) {
  .container {
    padding: 1em; }

  .screen#geodate p {
    font-size: 1.2em; } }