<div class="cloudRectangle"></div>
<div class="cloudCircle" id="leftCloudCircle"></div>
<div class="cloudCircle" id="topCloudCircle"></div>
<div class="cloudCircle" id="rightCloudCircle"></div>
<div class="sunCentre"></div>
<div class="sunRay" id="sunRayNorthNorthWest"></div>
<div class="sunRay" id="sunRayNorth"></div>
<div class="sunRay" id="sunRayNorthNorthEast"></div>
<div class="sunRay" id="sunRayEastNorthEast"></div>
<div class="sunRay" id="sunRayEast"></div>
<div class="sunRay" id="sunRayEastSouthEast"></div>
<div class="rain" id="rainTopLeft"></div>
<div class="rain" id="rainTopCentre"></div>
<div class="rain" id="rainTopRight"></div>
<div class="rain" id="rainMiddleLeft"></div>
<div class="rain" id="rainMiddleCentre"></div>
<div class="rain" id="rainMiddleRight"></div>
<div class="rain" id="rainBottomLeft"></div>
<div class="rain" id="rainBottomCentre"></div>
<div class="rain" id="rainBottomRight"></div>
<div class="lightningYellow" id="lightningYellowMain"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthEast"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthEast"></div>
<div class="lightningYellow" id="lightningYellowTopStrip"></div>
<div class="lightningYellow" id="lightningYellowMiddleStrip"></div>
<div class="lightningYellow" id="lightningYellowBottomStrip"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniSquare"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniSquare"></div>

<div class="ground"></div>

<div class="flowerStem" id="flower1Stem"></div>
<div class="flowerPetalNorthWest" id="flower1PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower1PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower1PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower1PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower1YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower1OrangeCentre"></div>

<div class="flowerStem" id="flower2Stem"></div>
<div class="flowerPetalNorthWest" id="flower2PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower2PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower2PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower2PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower2YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower2OrangeCentre"></div>

body {
  background-color: #ffffff;
  animation: skyAnimation 60s infinite;
}

.cloudRectangle {
  position: absolute;
  background-color: #cccccc;
  width: 120px;
  height: 100px;
  left: 750px;
  top: 150px;
  z-index: 3;
  animation: cloudAnimation 60s infinite;
}

.cloudCircle {
  position: absolute;
  background-color: #cccccc;
  border-radius: 50%;
  z-index: 3;
  animation: cloudAnimation 60s infinite;
}

#leftCloudCircle {
  width: 100px;
  height: 100px;
  left: 700px;
  top: 150px;
}

#topCloudCircle {
  width: 120px;
  height: 120px;
  left: 750px;
  top: 90px;
}

#rightCloudCircle {
  width: 100px;
  height: 100px;
  left: 820px;
  top: 150px;
}

.sunCentre {
  position: absolute;
  background-color: rgba(255,255,0,0);
  border-radius: 50%;
  z-index: 1;
  width: 160px;
  height: 160px;
  left: 780px;
  top: 70px;
  animation: sunAnimation 60s infinite;
}

.sunRay {
  position: absolute;
  background-color: rgba(255,255,0,0);
  z-index: 1;
  width: 40px;
  height: 20px;
  animation: sunAnimation 60s infinite;
}

#sunRayNorthNorthWest {
  transform: rotate(-120deg);
  top: 45px;
  left: 780px;
}

#sunRayNorth {
  transform: rotate(-90deg);
  top: 30px;
  left: 840px;
}

#sunRayNorthNorthEast {
  transform: rotate(-60deg);
  top: 45px;
  left: 900px;
}

#sunRayEastNorthEast {
  transform: rotate(-30deg);
  top: 80px;
  left: 935px;
}

#sunRayEast {
  top: 140px;
  left: 950px;
}

#sunRayEastSouthEast {
  transform: rotate(30deg);
  top: 200px;
  left: 935px;
}

.rain {
  position: absolute;
  background-color: rgba(85,187,238,0);
  z-index: 1;
  width: 10px;
  height: 20px;
}

#rainTopLeft {
  top: 260px;
  left: 770px;
  animation: rainTopAnimation 60s infinite;
}

#rainTopCentre {
  top: 260px;
  left: 800px;
  animation: rainTopAnimation 60s infinite;
}

#rainTopRight {
  top: 260px;
  left: 830px;
  animation: rainTopAnimation 60s infinite;
}

#rainMiddleLeft {
  top: 290px;
  left: 770px;
  animation: rainMiddleAnimation 60s infinite;
}

#rainMiddleCentre {
  top: 290px;
  left: 800px;
  animation: rainMiddleAnimation 60s infinite;
}

#rainMiddleRight {
  top: 290px;
  left: 830px;
  animation: rainMiddleAnimation 60s infinite;
}

#rainBottomLeft {
  top: 320px;
  left: 770px;
  animation: rainBottomAnimation 60s infinite;
}

#rainBottomCentre {
  top: 320px;
  left: 800px;
  animation: rainBottomAnimation 60s infinite;
}

#rainBottomRight {
  top: 320px;
  left: 830px;
  animation: rainBottomAnimation 60s infinite;
}

.lightningYellow {
  position: absolute;
  background-color: #ffff00;
  animation: lightningAnimation 60s infinite;
  visibility: hidden;
}

#lightningYellowMain {
  z-index: 1;
  top: 250px;
  left: 760px;
  height: 100px;
  width: 100px;
}

.lightningBodyColour {
  position: absolute;
  background-color: #ffffff;
  animation: skyAnimation 60s infinite, lightningAnimation 60s infinite;
  visibility: hidden;
}

#lightningBodyColourNorthWest {
  z-index: 2;
  height: 42px;
  width: 71px;
  top: 270px;
  left: 740px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningBodyColourNorthEast {
  z-index: 2;
  height: 42px;
  width: 71px;
  top: 290px;
  left: 800px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningBodyColourSouthWest {
  z-index: 2;
  height: 42px;
  width: 85px;
  top: 330px;
  left: 730px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningBodyColourSouthEast {
  z-index: 2;
  height: 57px;
  width: 85px;
  top: 350px;
  left: 790px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningYellowTopStrip {
  z-index: 3;
  height: 14px;
  width: 71px;
  top: 300px;
  left: 770px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningYellowMiddleStrip {
  z-index: 3;
  height: 10px;
  width: 60px;
  top: 290px;
  left: 780px;
}

#lightningYellowBottomStrip {
  z-index: 3;
  height: 14px;
  width: 85px;
  top: 340px;
  left: 780px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

#lightningBodyColourLeftMiniRectangle {
  z-index: 4;
  height: 10px;
  width: 20px;
  top: 300px;
  left: 770px;
}

#lightningBodyColourRightMiniRectangle {
  z-index: 4;
  height: 10px;
  width: 20px;
  top: 280px;
  left: 830px;
}

#lightningBodyColourLeftMiniSquare {
  z-index: 4;
  height: 10px;
  width: 10px;
  top: 290px;
  left: 760px;
}

#lightningBodyColourRightMiniSquare {
  z-index: 4;
  height: 10px;
  width: 10px;
  top: 290px;
  left: 850px;
}

@keyframes skyAnimation {
  25% {
    background-color: #aaccff;
  }
  50% {
    background-color: #ffffff;
  }
  75% {
    background-color: #dddddd;
  }
}

@keyframes cloudAnimation {
  25% {
    background-color: #ffffff;
  }
  35% {
    background-color: #ffffff;
  }
  38% {
    background-color: #000000;
  }
  45% {
    background-color: #000000;
  }
  50% {
    background-color: #cccccc;
  }
  52% {
    background-color: #cccccc;
  }
  60% {
    background-color: #000000;
  }
  90% {
    background-color: #000000;
  }
}

@keyframes sunAnimation {
  10% {
    background-color: rgba(255,255,0,1)
  }
  35% {
    background-color: rgba(255,255,0,1)
  }
  38% {
    background-color: rgba(255,255,0,0)
  }
  45% {
    background-color: rgba(255,255,0,0)
  }
  51% {
    background-color: rgba(255,255,0,1)
  }
  60% {
    background-color: rgba(255,255,0,0)
  }
}

@keyframes rainTopAnimation {
  40% {
    background-color: rgba(85,187,238,0);
  }
  41% {
    background-color: rgba(85,187,238,1);
  }
  46% {
    background-color: rgba(85,187,238,1);
  }
  47% {
    background-color: rgba(85,187,238,0);
  }
  58% {
    background-color: rgba(85,187,238,0);
  }
  59% {
    background-color: rgba(85,187,238,1);
  }
  67% {
    background-color: rgba(85,187,238,1);
  }
  68% {
    background-color: rgba(85,187,238,0);
  }
  79% {
    background-color: rgba(85,187,238,0);
  }
  80% {
    background-color: rgba(85,187,238,1);
  }
  95% {
    background-color: rgba(85,187,238,1);
  }
  96% {
    background-color: rgba(85,187,238,0);
  }
}

@keyframes rainMiddleAnimation {
  41% {
    background-color: rgba(85,187,238,0);
  }
  42% {
    background-color: rgba(85,187,238,1);
  }
  47% {
    background-color: rgba(85,187,238,1);
  }
  48% {
    background-color: rgba(85,187,238,0);
  }
  59% {
    background-color: rgba(85,187,238,0);
  }
  60% {
    background-color: rgba(85,187,238,1);
  }
  68% {
    background-color: rgba(85,187,238,1);
  }
  69% {
    background-color: rgba(85,187,238,0);
  }
  80% {
    background-color: rgba(85,187,238,0);
  }
  81% {
    background-color: rgba(85,187,238,1);
  }
  96% {
    background-color: rgba(85,187,238,1);
  }
  97% {
    background-color: rgba(85,187,238,0);
  }
}

@keyframes rainBottomAnimation {
  42% {
    background-color: rgba(85,187,238,0);
  }
  43% {
    background-color: rgba(85,187,238,1);
  }
  48% {
    background-color: rgba(85,187,238,1);
  }
  49% {
    background-color: rgba(85,187,238,0);
  }
  60% {
    background-color: rgba(85,187,238,0);
  }
  61% {
    background-color: rgba(85,187,238,1);
  }
  69% {
    background-color: rgba(85,187,238,1);
  }
  70% {
    background-color: rgba(85,187,238,0);
  }
  81% {
    background-color: rgba(85,187,238,0);
  }
  82% {
    background-color: rgba(85,187,238,1);
  }
  97% {
    background-color: rgba(85,187,238,1);
  }
  98% {
    background-color: rgba(85,187,238,0);
  }
}

@keyframes lightningAnimation {
  39% {
    visibility: hidden;
  }
  40% {
    visibility: visible;
  }
  41% {
    visibility: hidden;
  }
  69% {
    visibility: hidden;
  }
  70% {
    visibility: visible;
  }
  71% {
    visibility: hidden;
  }
  72% {
    visibility: hidden;
  }
  73% {
    visibility: visible;
  }
  74% {
    visibility: hidden;
  }
  75% {
    visibility: hidden;
  }
  76% {
    visibility: visible;
  }
  77% {
    visibility: hidden;
  }
  78% {
    visibility: hidden;
  }
  79% {
    visibility: visible;
  }
  80% {
    visibility: hidden;
  }
}

.ground {
  position: absolute;
  top: 690px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #442211;
  z-index: 1;
}

.flowerStem {
  position: absolute;
  top: 690px;
  width: 20px;
  height: 0px;
  background-color: #22cc22;
  z-index: 2;
  animation: stemAnimation 60s 1 forwards;
}

#flower1Stem {
  left: 160px;
}

#flower2Stem {
  left: 410px;
}

.flowerPetalNorthWest {
  position: absolute;
  top: 210px;
  width: 40px;
  height: 120px;
  background-color: rgba(255, 230, 0, 0);
  border-radius: 50%;
  z-index: 3;
  transform: rotate(-45deg);
  transform-origin: bottom center;
  animation: flowerYellowAnimation 60s 1 forwards;
}

.flowerPetalNorthEast {
  position: absolute;
  top: 210px;
  width: 40px;
  height: 120px;
  background-color: rgba(255, 230, 0, 0);
  border-radius: 50%;
  z-index: 3;
  transform: rotate(45deg);
  transform-origin: bottom center;
  animation: flowerYellowAnimation 60s 1 forwards;
}

.flowerPetalSouthWest {
  position: absolute;
  top: 210px;
  width: 40px;
  height: 120px;
  background-color: rgba(255, 230, 0, 0);
  border-radius: 50%;
  z-index: 3;
  transform: rotate(-135deg);
  transform-origin: bottom center;
  animation: flowerYellowAnimation 60s 1 forwards;
}

.flowerPetalSouthEast {
  position: absolute;
  top: 210px;
  width: 40px;
  height: 120px;
  background-color: rgba(255, 230, 0, 0);
  border-radius: 50%;
  z-index: 3;
  transform: rotate(135deg);
  transform-origin: bottom center;
  animation: flowerYellowAnimation 60s 1 forwards;
}

#flower1PetalNorthWest, #flower1PetalNorthEast, #flower1PetalSouthWest, #flower1PetalSouthEast {
  left: 150px;
}

#flower2PetalNorthWest, #flower2PetalNorthEast, #flower2PetalSouthWest, #flower2PetalSouthEast {
  left: 400px;
}

.flowerYellowCentre {
  position: absolute;
  top: 300px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 230, 0, 0);
  border-radius: 50%;
  z-index: 3;
  animation: flowerYellowAnimation 60s 1 forwards;
}

#flower1YellowCentre {
  left: 140px;
}

#flower2YellowCentre {
  left: 390px;
}

.flowerOrangeCentre {
  position: absolute;
  top: 310px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 180, 0, 0);
  border-radius: 50%;
  z-index: 4;
  animation: flowerOrangeAnimation 60s 1 forwards;
}

#flower1OrangeCentre {
  left: 150px;
}

#flower2OrangeCentre {
  left: 400px;
}

@keyframes stemAnimation {
  0% {
    top: 690px;
    height: 0px;
  }
  80% {
    top: 350px;
    height: 340px;
  }
  100% {
    top: 350px;
    height: 340px;
  }
}

@keyframes flowerYellowAnimation {
  81% {
    background-color: rgba(255, 230, 0, 0);
  }
  100% {
    background-color: rgba(255, 230, 0, 1);
  }
}

@keyframes flowerOrangeAnimation {
  81% {
    background-color: rgba(255, 180, 0, 0);
  }
  100% {
    background-color: rgba(255, 180, 0, 1);
  }
}