@import url("https://fonts.googleapis.com/css2?family=DM+Mono&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000066; }

a:link,
a:visited {
  text-decoration: none;
  color: #ff644e; }

a:hover {
  text-decoration: underline; }

html {
  font-size: 10px; }

body {
  font-size: 2rem;
  font-family: "DM Mono"; }

h2, h3 {
  font-size: 1em;
  text-decoration: underline; }

#container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 520px; }

#main {
  padding: 1rem; }

.watch {
  margin: 1rem; }

button,
.button {
  width: calc(50% - 2rem);
  float: left;
  border: 1px solid #000066;
  padding: 2rem;
  margin: 1rem;
  background: white;
  font-size: 1em;
  text-align: center;
  cursor: pointer; }

.u-space-before {
  margin-top: 4rem; }

.button:hover {
  background: #000066;
  color: white; }

#notes {
  padding: 1rem;
  border-left: 1px solid #000;
  width: 520px;
  height: 100vh;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0; }

.notes li {
  opacity: 0.15;
  margin: 0 0 1em 0;
  transition: all 0.4s; }

.notes .active {
  opacity: 1; }

#player {
  padding: 1rem; }

#footnotes {
  margin: 2rem;
  padding-right: 1em;
  width: calc(100vw - 520px); }
  #footnotes li {
    margin-top: 0.5em; }

@media (max-width: 1000px) {
  #container,
  #footnotes {
    display: block;
    min-height: auto;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden; }
  #notes {
    display: none; } }