$radius: 15;
$ltpeach: #F4CFCA;
$pink: #F4A698;
$peach: #F0937A;
$salmon: #EE7671;
$dksalmon: #E56152;
$carmen: #E23B3C;
$red: #C7342B;
$dkestred: #7B1910;
$dkred: #9B261C;
@keyframes cloud-one{
  0%{
    left: 0%;
  }
  50%{
    left: 80%;
  }
  100%{
    left: 0%;
  }
}
@keyframes cloud-two{
  0%{
    left: 80%;
  }
  50%{
    left: -5%;
  }
  100%{
    left: 80%;
  }
}
@keyframes cloud-three{
  0%{
    left: 110%;
  }
  50%{
    left: -20%;
  }
  100%{
    left: 110%;
  }
}
@keyframes cloud-four{
  0%{
    left: -20%;
  }
  50%{
    left: 50%;
  }
  100%{
    left: -20%;
  }
}
@keyframes cloud-five{
  0%{
    left: 30%;
  }
  50%{
    left: 100%;
  }
  100%{
    left: 30%;
  }
}
@keyframes cloud-six{
  0%{
    left: -10%;
  }
  50%{
    left: 100%;
  }
  100%{
    left: -10%;
  }
}
@keyframes bird-1{
  0%{
    transform: rotate(-15deg) scaleY(0.75);
  }
  50%{
    transform: rotate(15deg) scaleY(0.75);
  }
  100%{
    transform: rotate(-15deg) scaleY(0.75);
  }
}
@keyframes bird-2{
  0%{
    transform: rotate(15deg) scale(0.75, 0.5);
  }
  50%{
    transform: rotate(-15deg) scale(0.75, 0.5);
  }
  100%{
    transform: rotate(15deg) scale(0.75, 0.5);
  }
}
html, body{
  margin: 0;
  height: 100%;
  background: #F3F3F3;
}
.badge{
  border-radius: 50%;
  width: $radius+em;
  height: $radius+em;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient($pink 10%, $peach 10%, $peach 20%, $salmon 20%, $salmon 30%, $dksalmon 30%, $dksalmon 40%, $carmen 40%, $carmen 50%, $red 50%, $red 60%, $dkred 60%);
}
#hide-overflow{
  border-radius: 50%;
  width: $radius+em;
  height: $radius+em;
  overflow: hidden;
  position: relative;
}
#moon{
  border-radius: 50%;
  width: ($radius/6)+em;
  height: ($radius/6)+em;
  background: $dkestred;
  position: absolute;
  top: ($radius/1.85)+em;
  left: ($radius/6.5)+em;
  &:after{
    content: '';
    display: block;
    background: $dkestred;
    position: absolute;
    width: ($radius/6)+em;
    height: $radius+em;
    top: ($radius/12)+em;
  }
}
#tower{
  width: ($radius/($radius*8))+em;
  height: 0;
  position: absolute;
  bottom: 2px;
  left: 50%;
  margin-left: -((($radius/($radius*8))/2)+($radius/($radius*1.75)))+em;
  border-bottom: solid $dkestred ($radius*1.4)+em;
  border-left: ($radius/($radius*1.75))+em solid transparent;
  border-right: ($radius/($radius*1.75))+em solid transparent;
  &:before{
    content: '';
    display: block;
    width: ($radius/($radius*8))+em;
    height: ($radius/($radius*8))+em;
    border-radius: 50%;
    background: $dkestred;
    position: absolute;
    top: -(($radius/($radius*8))/2)+em;
  }
  #top{
    width: (($radius/$radius)/2)+em;
    height: (($radius/$radius)/6)+em;
    background: $dkestred;
    border-radius: 50%;
    position: absolute;
    top: ($radius/($radius/2.25))+em;
    left: 50%;
    margin-left: -((($radius/$radius)/1.75)/2)+em;
  }
  #middle{
    width: (($radius/($radius*1.4)))+em;
    height: (($radius/$radius)/6)+em;
    background: $dkestred;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -(($radius/($radius*1.4))/2)+em;
    top: (($radius/($radius/3.25)) + ($radius/$radius))+em;
  }
  #bottom{
    width: (($radius/($radius*1.1)))+em;
    height: (($radius/$radius)/2.75)+em;
    background: $dkestred;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -(($radius/($radius*1.05))/2)+em;
    top: (($radius/($radius/5.9)) + ($radius/$radius))+em;
  }
  #bauble{
    width: ($radius/13.5)+em;
    height: ($radius/($radius/2))+em;
    background: $dkestred;
    position: absolute;
    top: (($radius/($radius/6.7)) + ($radius/$radius))+em;
    left: 50%;
    margin-left: -(($radius/13)/2)+em;
    &:before{
      content: '';
      display: block;
      position: absolute;
      width: ($radius/13.5)+em;
      height: 0.5em;
      background: $dkestred;
      margin-top: -(0.5/2)+em;
      border-radius: 50%;
    }
    &:after{
      content: '';
      display: block;
      background: $dkestred;
      position: absolute;
      border-radius: 50%;
      width:($radius/($radius/1.9))+em;
      height:($radius/($radius/1.9))+em;
      left: 50%;
      margin-left: -(($radius/($radius/1.9))/2)+em;
      top: (($radius/($radius/1.9))-(($radius/($radius/1.9))/2))+em;
    }
  }
  #deck{
    background-color: $dkestred;
    width: ($radius/13.5)+em;
    height: ($radius/($radius*2.5))+em;
    position: absolute;
    top: ($radius - ($radius/3.75))+em;
    left: 50%;
    margin-left: -(($radius/13.5)/2)+em;
    &:before{
      content: '';
      display: block;
      width: ($radius/13.5)+em;
      height: 0.3em;
      position: absolute;
      top: -(0.3/2)+em;
      background: $dkestred;
      border-radius: 50%;
    }
    &:after{
      content: '';
      display: block;
      width: ($radius/13.5)+em;
      height: 0.3em;
      position: absolute;
      bottom: -(0.3/2)+em;
      background: $dkestred;
      border-radius: 50%;
    }
  }
}
#building-1{
  background: $dkred;
  width: ($radius/5)+em;
  height: ($radius/2.25)+em;
  position: absolute;
  bottom: -($radius/($radius+10))+em;
  .window{
    background: $carmen;
    height: ($radius/14)+em;
    width: ($radius/7)+em;
    position: absolute;
    left: -($radius/65)+em;
    &:first-child{
      bottom: ($radius/3.5)+em;
    }
    &:last-child{
      bottom: ($radius/6)+em;
    }
  }
}
#building-2{
  background: $carmen;
  width: ($radius/5.5)+em;
  height: ($radius/2.5)+em;
  position: absolute;
  bottom: -($radius/$radius)+em;
  left: ($radius/5)+em;
  box-sizing: border-box;
  padding: (($radius/$radius)/3)+em (($radius/$radius)/3)+em;
  &:after{
    content: '';
    display: block;
    width: ($radius/13)+em;
    height: ($radius/2.5)+em;
    background: $dkestred;
    position: absolute;
    left: ($radius/5.5)+em;
    top: ($radius/33)+em;
    transform: skewY(40deg);
  }
  .window{
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    // top: 0;
    background-image: repeating-linear-gradient(90deg, $ltpeach 0%, $ltpeach 13%, transparent 13%, transparent 21.75%, $ltpeach 21.75%, $ltpeach 34.75%, transparent 34.75%, transparent 43.5%, $ltpeach 43.5%, $ltpeach 56.5%, transparent 56.5%, transparent 65.25%, $ltpeach 65.25%, $ltpeach 78.25%, transparent 78.5%, transparent 87%, $ltpeach 87%, $ltpeach 100%);
    background-size: 100%;
    &:before{
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: repeating-linear-gradient(180deg, 
        transparent,
        transparent 70%,
        $carmen 70%,
        $carmen 100%);
      background-size: 14.25%;
    }
  }
}
#building-3{
  background: $red;
  position: absolute;
  bottom: ($radius/7)+em;
  width: ($radius/17)+em;
  height: ($radius/5)+em;
  left: (($radius/5)+($radius/4.4))+em;
  transform: skewY(-10deg);
  padding: 0.15em;
  box-sizing: border-box;
  .window{
    background: $ltpeach;
    width: 0.16em;
    height: 0.25em;
    transform: skewY(-7deg);
    &#one{
      margin: 0.1em 0 0 0.25em;
    }
    &#two{
      margin: 0.4em 0 0;
    }
    
  }
}
#building-4{
  background: $dkred;
  width: ($radius/8)+em;
  height: ($radius/6)+em;
  position: absolute; 
  bottom: 0;
  left: (($radius/5)+($radius/5.5))+em;
  padding: (($radius/$radius)/3)+em;
  box-sizing: border-box;
  .window{
    height: 35%;
    width: 80%;
    background: $carmen;
    margin-top: (($radius/$radius)/3)+em;
  }
}
#building-5{
  border-radius: 50%;
  width: ($radius/6)+em;
  height: ($radius/6)+em;
  background-color: $dkestred;
  position: absolute;
  bottom: ($radius/4.7)+em;
  right: 0.5em;
  &:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-bottom: ($radius/($radius*0.75))+em solid $dkestred;
    position: absolute;
    top: -1.2em;
    left: 50%;
    margin-left: -3px;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
  }
}
#building-6{
  width: ($radius/4.75)+em;
  height: ($radius/3.75)+em;
  background: $red;
  position: absolute;
  bottom: ($radius/($radius*1.25))+em;
  right: ($radius/($radius/2.35))+em;
  padding: 0.3em;
  box-sizing: border-box;
  &:after{
    content: '';
    display: block;
    position: absolute;
    width: ($radius/7)+em;
    height: 100%;
    top: 0.55em;
    right: -($radius/7)+em;
    background: $dkred;
    transform: skewY(30deg);
  }
  .window{
    width: 50%;
    height: 0.25em;
    background: $salmon;
    &#top{
      margin: 0 auto 0.25em;
    }
    &#bottom{
      float:right;
    }
  }
}
#building-7{
  background: $peach;
  width: ($radius/7)+em;
  height: ($radius/4)+em;
  position: absolute;
  bottom: 0;
  right: (($radius/5)+($radius/7))+em;
  transform: skewY(-7deg);
  padding: 0.25em;
  box-sizing: border-box;
  &:after{
    content: '';
    display: block;
    transform: skewY(40deg);
    background: $dkestred;
    width: ($radius/8)+em;
    height: ($radius/4)+em;
    position: absolute;
    top: 0.7em;
    right: -($radius/8)+em;
  }
  .window{
    height: ($radius/($radius*3.25))+em;
    width: 100%;
    margin-bottom: 0.2em;
    &.on{
      background: linear-gradient(to right, $ltpeach 0%, $ltpeach 19%, transparent 19%);
    }
  }
}
#building-8{
  width: ($radius/2.8)+em;
  height: ($radius/4.5)+em;
  background: $carmen;
  position: absolute;
  bottom: 0;
  right: 1em;
  padding: 0.45em 0.5em 0.45em 0.35em;
  box-sizing: border-box;
  .window{
    height: ($radius/($radius*2.25))+em;
    width: 100%;
    background: linear-gradient(to right, $ltpeach 0, $ltpeach 16%, transparent 16%, transparent 21%, $ltpeach 21%, $ltpeach 37%, transparent 37%, transparent 42%, $ltpeach 42%, $ltpeach 58%, transparent 58%, transparent 63%, $ltpeach 63%, $ltpeach 79%, transparent 79%);
    margin-bottom: 0.25em;
  }
}
//Clouds
.cloud{
  width: ($radius/6)+em;
  position: absolute;
  svg{
    width: 100%;
  }
  &.red{
    svg{
      fill: $carmen;
    }
  }
}
#full-cloud-1{
  top: (($radius/$radius)/5.6)+em;
  animation: 25s cloud-one forwards infinite;
  svg{
    fill: $pink;
  }
}
#full-cloud-2{
  top: (($radius/$radius)/1.5)+em;
  animation: 25s cloud-two forwards infinite;
  svg{
    fill: $peach;
  }
}
#full-cloud-3{
  top: (($radius/$radius)*3.25)+em;
  animation: 40s cloud-three forwards infinite;
  svg{
    fill: $dksalmon;
  }
}
#full-cloud-4{
  top: (($radius/$radius)*4.75)+em;
  animation: 30s cloud-four forwards infinite;
}
#full-cloud-5{
  top: (($radius/$radius)*4.75)+em;
  transform: scale(1.5);
  animation: 40s cloud-five forwards infinite;
}
#full-cloud-6{
  top: (($radius/$radius)*6.15)+em;
  animation: 60s cloud-six forwards infinite;
  transform: scale(1.25);
  svg{
    fill: $red;
  }
}
.partial-cloud{
  position: absolute;
  width: ($radius/($radius*2))+em;
  height: ($radius/($radius*2))+em;
  border-radius: 50%;
  border-width: 0.15em;
  border-style: solid;
  -webkit-clip-path: inset(0 0 40% 0);
  clip-path: inset(0 0 40% 0);
  &:before{
    content: '';
    display: block;
    border-width: 0.15em;
    border-style: solid;
    position: absolute;
    border-bottom: 0;
    right: 0.6em;
    top: 0.2em;
  }
  &:after{
    content: '';
    display: block;
    border-width: 0.15em;
    border-style: solid;
    position: absolute;
    border-bottom: 0;
    left: 0.6em;
    top: 0.2em;
  }
  &#cloud-1{
    border-color: $pink;
    top: ($radius/4.5)+em;
    animation: cloud-six 30s forwards infinite;
    &:before{
      border-color: $pink;
      width: 1.1em;
    }
    &:after{
      border-color: $pink;
      width: 0.4em;
    }
  }
  &#cloud-2{
    border-color: $peach;
    top: ($radius/2.4)+em;
    animation: cloud-two 30s forwards infinite;
    &:before{
      border-color: $peach;
      width: 0.4em;
    }
    &:after{
      border-color: $peach;
      width: 1.1em;
    }
  }
}
.bird{
  position: absolute;
  width: 0;
  z-index: 4;
  &:before{
    content: '';
    display: block;
    border-radius: 50%;
    border-width: 0.15em;
    border-style: solid;
    -webkit-clip-path: inset(0 0 50% 50%);
    clip-path: inset(0 0 50% 50%);
    position: absolute;
    left: -1em;
  }
  &:after{
    content: '';
    display: block;
    border-radius: 50%;
    border-width: 0.15em;
    border-style: solid;
    -webkit-clip-path: inset(0 50% 50% 0);
    clip-path: inset(0 50% 50% 0);
    position: absolute;
    right: -1em;
  }
  &#bird-1{
    top: 3.4em;
    left: 70%;
    transform: rotate(-15deg) scaleY(0.75);
    animation: 2s bird-1 forwards infinite;
    &:before, &:after{
      border-color: $pink;
      width: ($radius/($radius*1.25))+em;
      height: ($radius/($radius*1.25))+em;
    }
  }
  &#bird-2{
    top: 3.75em;
    left: 78%;
    transform: rotate(15deg) scale(0.75, 0.5);
    animation: 2s bird-2 forwards infinite;
    &:before, &:after{
      border-color: $pink;
      width: ($radius/($radius*1.25))+em;
      height: ($radius/($radius*1.25))+em;
    }
    &:before{
      left: -1em;
    }
    &:after{
      right: -1em;
    }
  }
}