@font-face {
    font-display: swap;
    font-family: 'OCRA';
    src: url('ocr_aregular.ttf') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     url('ocr_aregular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }  
p { text-align: justify; }
  h1 {
            font-size: 2.4em;
      letter-spacing: 0.3em;
      margin: 20px 0px;
  }

  h2{
      text-align: left;
      font-size: 1.3em;
      margin: 5px 0px;
   }
  h1:hover {
    color:black;

}
h2:hover {
    color: red;
    cursor: pointer;
}
#mainlogo {
    width: 18em;
}
#logo {
display: flex;
flex-flow: column;
}

svg:hover {
    filter: brightness(0%);
}
  #title {
    display: flex;
    position: relative;
    left: 1em;
    cursor: default;
  }

  html {
    font-family: OCRA, monospace;
      background-color: black;
      color: white;
  }

audio { background-color: inherit; width: 100%; height: 3em; } 

footer { margin: 40px 0px; }

footer p { font-size: small; color: #666;}

.content {
   max-height: 100vh;
   padding: 20px;
   max-width: 100vw;
}

@media only screen and (min-width: 800px) {
main {
position: relative;
top: 10px;
left: 30vw;
width: 55em;
}

  .content {
    padding: 40px;
    margin: 20px 0px;
    text-align: center;
}

#rightpane {
    padding: 0px 100px;
    width: 55em;
    text-align: left;

}
#leftpane {
position: fixed;
left: 20vw;
top: 50vh;
transform: translate(-50%, -50%);
width: 20vw;
}

}
.section {
    display: none;
}

#events p {
    white-space: pre-line;
}

a { color: inherit; text-decoration: inherit; }
p a { text-decoration: underline }
#over { display: block }