body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  color: #023436;
  line-height: 1;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(
      180deg,
      #a2e0f9 6%,
      #cef5fc 39%,
      #eafaeb 70%,
      #fefcd3 88%,
      #fdf4ba 100%
    ),
    linear-gradient(127.43deg, #a2e0f9 0%, #fdf4ba 100%),
    linear-gradient(64.82deg, #a2e0f9 0%, #fdf4ba 100%);
}

h1 {
  font-size: 2.5rem;
}

.seed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 5rem;
}

.seed * {
  display: flex;
  flex: 0 1 7rem;
  justify-content: center;
  align-items: center;
  width: 7rem;
}

.seed span {
  margin: 0 1rem;
  flex-basis: 100%;
  width: 100%;
}

@media only screen and (min-width: 27rem) {
  h1 {
    font-size: 3rem;
  }

  .seed span {
    flex-basis: 1rem;
    width: 1rem;
  }
}