body {
  margin: 0 auto;
  text-align: center;
}

main > section {
  padding: 30px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* TOP */

#top figure {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: baseline;
  overflow: hidden;
  flex-wrap: nowrap;
  margin: 0;
}

#top figure img {
  width: calc(100% / 3 + 40%);
  height: auto;
  margin: 0 -24%;
}

/* game */

.game img {
  width: 95%;
  max-width: 600px;
}

.game h3 {
  font-size: 1.2em;
  margin-block-end: 2em;
}

.game a.button {
  color: white;
  text-decoration: none;
  background: #4080e6;
  padding: 10px 20px;
  border-radius: 50px;
  filter: drop-shadow(3px 3px 3px rgb(100, 100, 100, 0.5));
  transition: background 0.2s, filter 0.2s;
}

.game a.button:hover {
  background: #7497ff;
  filter: drop-shadow(-2px 3px 3px rgb(100, 100, 100, 0.5));
}

.game.sakurairo-tetraprism {
  background: #15171f;
}

.game.sakurairo-tetraprism h2 {
  color: #ff9ab8;
}

.game.sakurairo-tetraprism h3 {
  color: #aaa;
}

.game.sakurairo-tetraprism p {
  color: #ddd;
}

.game.cv1 {
  background: #0b2909;
  h2 {
    color: #ddd;
  }
  h3 {
    color: #aaa;
  }
  p {
    color: #ddd;
  }
}

.game.sakurairo-prism {
  background: #edf1ff;
}

.game.sakurairo-prism h2 {
  color: #eb66b6;
}

.game.sakurairo-prism h3 {
  color: #777;
}

.game.sakurairo-prism p {
  color: #555;
}

footer {
  text-align: center;
  font-size: 11px;
  padding: 100px 0 30px 0;
}
