styles.css

* {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html {
  /* scroll-snap-type: block mandatory; */
  background-color: #252934;
  color: white;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}

.navbar {
  width: 100%;
  position: fixed;
  display: flex;
  background-color: orange;
  z-index: 1;
  top: 0;
}

.navbar img {
  margin: auto 4%;
}

.navbar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.navbar li {
  list-style: none;
  margin: auto;
}

.navanchors {
  margin: auto;
  padding: auto;
  width: 80%;
}

.navbar ul li a {
  color: white;
  font-weight: bolder;
  font-size: 2.5vh;
  width: 1%;
}

.cubeinc {
  background-image: url("cubeIncWide.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cashout {
  background-image: url("cashOutSkyView.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tapdefender {
  background-image: url("TapDefenderBanner.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.colorjump {
  background-image: url("colorjumpwide.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rhymetime {
  background-image: url("rhymetimebanner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.spacespin {
  background-image: url("spacespin.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pixelbeats {
  background-image: url("pixelbeats.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bet {
  background-image: url("bet-you-dont-know-logo.png");
  background-size: 10%;
  background-color: #181818;
  background-position: center;
  background-repeat: no-repeat;
}

.game {
  width: 80%;
  margin: 20px auto;
  border-radius: 20px;
  height: 500px;
}

.gametext {
  position: relative;
  bottom: -200px;
}

.gametitle {
  font-size: 4rem;
  text-shadow: black 0px 0px 2px, black 0px 0px 2px, black 0px 0px 2px,
    black 0px 0px 2px;
  font-weight: bolder;
}

.gamedescription {
  font-size: 2rem;
  font-weight: lighter;
  padding: 0 20px;
}

.gamedescription a {
  font-weight: bold;
  color: gold;
}

.gamedescription a img {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  margin: 20px 0 0 0;
  padding: 20px;
  background-color: #23262f;
}

.bio {
  padding: 50px;
}

.name {
  font-size: 5rem;
}

.shortbio {
  font-weight: lighter;
  font-size: 1.5rem;
}

.shortbio ul {
  margin: 20px 0;
  padding-left: 35%;
  text-align: left;
  display: block;
}

.shortbio ul li {
  list-style-position: outside;
  font-size: 1.25rem;
  word-wrap: break-word;
}

.longbio {
  font-style: italic;
  font-size: 2rem;
  margin: 150px 0;
}

.longbio strong {
  font-family: Snell Roundhand;
  font-size: 2rem;
}

.separator {
  margin: 100px 14% 0 14%;
  border: 1px solid wheat;
}

.intro {
  z-index: -1;
  position: relative;
  padding: 80px 5px 15px 5px;
  background-color: #3b404e;
}

.mail {
  color: white;
}

.intro strong {
  font-size: larger;
  text-decoration: underline;
}

.webgl-content {
  width: fit-content;
  margin: auto;
  margin-top: 100px;
}

#contactLinks {
  margin: auto;
  margin-top: 50px;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.mail img {
  margin-top: 20px;
}

ol {
  margin: auto;
  width: 50%;
  text-align: left;
  list-style: decimal outside;
}

@media screen and (max-width: 800px) {
  .navbar ul {
    flex-direction: column;
    padding: 0;
  }

  .shortbio ul {
    padding-left: 10vw;
  }

  .intro {
    padding-top: 100px;
  }

  .game {
    width: 95%;
  }

  .gametext {
    bottom: -100px;
  }

  #contactLinks {
    flex-direction: column;
  }
  .mail {
    margin-bottom: 100px;
  }
}