@font-face {
  font-family: "MavenPro";
  src: url("./fonts/MavenPro-Medium.ttf") format("truetype");
  font-display: swap;
}

body {
  font-family: "MavenPro", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px;
  background-color: #e6e6e6;
  color: #1a1a1a;
  line-height: 1.4;
}

a {
  color: #00a2e7;
}

a:visited {
  color: #006e9d;
}

.overflow {
  overflow: auto;
}

.outerPage {
  padding: 1rem;
}

.page {
  width: 600px;
}

.smallText {
  font-size: 16px;
}

.divider {
  border-top: solid 1px grey;
  margin-top: 1rem;
}

.topMargin {
  margin-top: 1rem;
}

.blogLink {
  margin-bottom: 0.3rem;
}

@media (max-width: 600px) {
  .page {
    width: 100%;
  }
  .blockLink {
    display: inline-block;
    margin: 5px 0;
  }
}

p {
  text-align: left;
  /* text-indent: 30px; */
}

h1 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.flexImage {
  display: flex;
  align-items: center;
}

.flexHorizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dvd {
  margin: 0 auto;
  width: 100vw;
  height: 90vh;
  position: relative;
  overflow: hidden;
}

.movingThing {
  display: flex;
  flex-direction: column;
}

.dvd .movingThing {
  position: absolute;
  -webkit-animation: moveX 15s linear 0s infinite alternate,
    moveY 20s linear 0s infinite alternate;
  -moz-animation: moveX 15s linear 0s infinite alternate,
    moveY 20s linear 0s infinite alternate;
  -o-animation: moveX 15s linear 0s infinite alternate,
    moveY 20s linear 0s infinite alternate;
  animation: moveX 15s linear 0s infinite alternate,
    moveY 20s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 309px);
  }
}
@-moz-keyframes moveX {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 309px);
  }
}
@-o-keyframes moveX {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 309px);
  }
}
@keyframes moveX {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 309px);
  }
}

@-webkit-keyframes moveY {
  from {
    top: 0;
  }
  to {
    top: calc(100% - 143px);
  }
}
@-moz-keyframes moveY {
  from {
    top: 0;
  }
  to {
    top: calc(100% - 143px);
  }
}
@-o-keyframes moveY {
  from {
    top: 0;
  }
  to {
    top: calc(100% - 143px);
  }
}
@keyframes moveY {
  from {
    top: 0;
  }
  to {
    top: calc(100% - 143px);
  }
}