body {
  background-color: white;
  text-align: center;
}

.sunshine {
  margin: 5%;
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  background-color: white;
}
.sunshine:nth-child(1) {
  -webkit-animation: shine 3s infinite;
}
.sunshine:nth-child(2) {
  -webkit-animation: shine 4s infinite;
}
.sunshine:nth-child(3) {
  z-index: 5;
  -webkit-animation: shine 6s infinite;
}
.sunshine:nth-child(4) {
  z-index: 4;
  -webkit-animation: shine 5s infinite;
}
.sunshine:nth-child(5) {
  z-index: 6;
  -webkit-animation: shine 7s infinite;
}
.sunshine:nth-child(6) {
  -webkit-animation: shine 3s infinite;
}

@-webkit-keyframes shine {
  10% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1);
  }
  20% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2);
  }
  30% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4);
  }
  50% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5);
  }
  60% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5), 0 0 0 300px rgba(251, 147, 58, 0.6);
  }
  70% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5), 0 0 0 300px rgba(251, 147, 58, 0.6), 0 0 0 350px rgba(250, 128, 55, 0.7);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5), 0 0 0 300px rgba(251, 147, 58, 0.6), 0 0 0 350px rgba(250, 128, 55, 0.7), 0 0 0 400px rgba(247, 86, 48, 0.8);
  }
  90% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5), 0 0 0 300px rgba(251, 147, 58, 0.6), 0 0 0 350px rgba(250, 128, 55, 0.7), 0 0 0 400px rgba(247, 86, 48, 0.8), 0 0 0 450px rgba(245, 61, 45, 0.9);
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 251, 209, 0.1), 0 0 0 100px rgba(253, 241, 79, 0.2), 0 0 0 150px rgba(255, 221, 72, 0.3), 0 0 0 200px rgba(255, 201, 67, 0.4), 0 0 0 250px rgba(255, 183, 64, 0.5), 0 0 0 300px rgba(251, 147, 58, 0.6), 0 0 0 350px rgba(250, 128, 55, 0.7), 0 0 0 400px rgba(247, 86, 48, 0.8), 0 0 0 450px rgba(245, 61, 45, 0.9), 0 0 0 500px #F3132B;
  }
}

.title {
  position: absolute;
  font-family: 'Major Mono Display', monospace;
  color: red;
  top: 16px;
  left: 16px;
  font-size: 42px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-spacing: -5px;
}

.caption a {
font-size: 15px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: regular;
color:orangered;
text-decoration: none;
position: absolute;
  top: 100px;
  left: 16px;
}
h3{
  font-family: 'Roboto', sans-serif;
  color: black;
  text-align: left;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 2px;
  margin-top: 15%;
  margin-left: 10px;
  z-index: 5;
}