body {
    padding: 0;
    margin: 0;
    background-color: #0c1330;
    font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .container {
    height: 25em;
    width: 16.8em;
    background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 1;
    overflow: hidden;
    border-radius: 16.8em;
    animation: colors 12s infinite forwards;
  }
  a, a:visited {
    text-decoration: none;
    color: white;
    opacity: 0.7;
  }
  .description {
    padding: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    z-index: 999;
    color: #fff;
  }
  .description p {
    font-size: 0.9em;
  }
  .description p + p {
    margin-top: 20px;
  }
  .description p.author {
    font-size: 0.7em;
  }
  @keyframes colors {
    10% {
      background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
    }
    53% {
      background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
    }
    55% {
      background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
    }
    98% {
      background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
    }
    100% {
      background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
    }
  }
  .spinner {
    height: 28.12em;
    width: 28.12em;
    border-radius: 50%;
    position: absolute;
    top: 8.75em;
    left: -5.62em;
    animation: spin 12s infinite forwards;
  }
  @keyframes spin {
    10% {
      transform: rotate(0deg);
    }
    45% {
      transform: rotate(180deg);
    }
    55% {
      transform: rotate(180deg);
    }
    90% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .sun {
    background-color: #f7f7de;
    height: 3.75em;
    width: 3.75em;
    border-radius: 50%;
    position: absolute;
    left: 12.18em;
    top: -1.87em;
  }
  .sun:before,
  .sun:after {
    position: absolute;
    content: "";
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  .sun:before {
    height: 7.5em;
    width: 7.5em;
    right: -1.87em;
    bottom: -1.87em;
  }
  .sun:after {
    height: 12.5em;
    width: 12.5em;
    right: -4.37em;
    bottom: -4.37em;
  }
  .ray1 {
    height: 0;
    width: 0.6em;
    border-bottom: 10.6em solid rgba(255, 255, 255, 0.1);
    border-left: 1.8em solid transparent;
    border-right: 1.8em solid transparent;
    position: absolute;
    transform: rotate(130deg);
    bottom: 0.6em;
    right: 4em;
  }
  .ray2 {
    position: absolute;
    height: 0;
    width: 0.9em;
    border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
    border-left: 2.1em solid transparent;
    border-right: 2.1em solid transparent;
    transform: rotate(230deg);
    left: 3.75em;
    bottom: -0.3em;
  }
  .ray3 {
    position: absolute;
    height: 0;
    width: 0.3em;
    border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
    border-left: 0.9em solid transparent;
    border-right: 0.9em solid transparent;
    transform: rotate(80deg);
    left: -5.3em;
    bottom: -5.6em;
  }
  .ray4 {
    position: absolute;
    height: 0;
    width: 0.1em;
    border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    transform: rotate(280deg);
    left: 7.5em;
    bottom: -5.6em;
  }
  .moon {
    height: 3.75em;
    width: 3.75em;
    box-shadow: 1.25em -1.25em 0 0 #f7f7de;
    border-radius: 50%;
    position: absolute;
    bottom: -3.1em;
    left: 10.93em;
  }
  .moon:before,
  .moon:after {
    position: absolute;
    content: "";
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  .moon:before {
    height: 6.25em;
    width: 6.25em;
    right: -2.5em;
    bottom: 0;
  }
  .moon:after {
    height: 11.8em;
    width: 11.8em;
    left: -2.8em;
    bottom: -2.8em;
  }
  .stars {
    height: 0.15em;
    width: 0.15em;
    background-color: #ffffff;
    position: absolute;
    top: 3.7em;
    left: 9.3em;
    border-radius: 50%;
    box-shadow: 3em 9.3em #ffffff, -1.8em 11.2em #ffffff, 2.5em 16.2em #ffffff,
      -5em 6.2em #ffffff, -5.6em -0.6em #ffffff, -5.6em 3.7em 0 0.06em #ffffff,
      -5em 17.5em 0 0.05em #ffffff, -7.5em 14.3em #ffffff;
    animation: twinkle 12s infinite forwards;
  }
  @keyframes twinkle {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    53% {
      opacity: 0.7;
    }
    55% {
      opacity: 0.7;
    }
    98% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .glow {
    height: 21.8em;
    width: 21.8em;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: -19em;
    animation: float 5s infinite;
  }
  @keyframes float {
    50% {
      transform: translateY(0.75em);
    }
  }
  .glow:before,
  .glow:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-color: inherit;
    border-radius: 50%;
  }
  .glow:before {
    left: -9.3em;
    top: -3.1em;
  }
  .glow:after {
    right: -5.6em;
    top: -0.8em;
  }
  @media screen and (min-width: 600px) {
    .container {
      font-size: 20px;
    }
  }