<div class="scene-container">
  <div class="outer-circle">
    <div class="left-cloud"></div>
    <div class="sun"></div>
    <div class="right-cloud"></div>
  </div><!-- /.outer-circle   -->
  
  <div class="inner-circle">
    
    <div class="mtn-left-back"></div>
    <div class="mtn-left-front"></div>
    
    <div class="mtn-right-back"></div>
    <div class="mtn-right-front"></div>
    
    <div class="top-hill-back"></div>
    <div class="top-hill-front"></div>
    
    <div class="btm-hill-back"></div>
    <div class="btm-hill-front"></div>
    
    <div class="curve-right"></div>
    
  </div><!-- /.inner-circle   -->
</div><!-- /.scene-container   -->

// All sizes are based on this $base-size
$base-size: 70vmin;
$drk-blue: #1B2C58;
$blue: #07B3D3;
$lt-blue: #96D3F0;
$lt-yellow: #E7E1BF;
$drk-yellow: #F4B431;
$green: #196513;

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes filter-light {
  0%, 20%, 75%, 100%{
    filter: brightness(1);
  }
  25%, 70%{
    filter: brightness(0.7);
  }
}

.scene-container {
  width: $base-size;
  height: $base-size;
  position: relative;
  animation: filter-light 15s infinite linear;
}

.outer-circle {
  width: $base-size;
  height: $base-size;
  border-radius: 50%;
  background: $drk-blue;
  position: relative;
}

@keyframes animate-cloud {
  0% {transform: translate(-3%,0%)}
  50% {transform: translate(3%,0%)}
  100% {transform: translate(-3%,0%)}
}

.left-cloud {
  height: $base-size * .17;
  width: $base-size * .45;
  background: $lt-yellow;
  position: absolute;
  border-radius: $base-size;
  border: $base-size * .06 solid $drk-blue;
  z-index: 100;
  top: 14%;
  left: -15%;
  animation: 4s animate-cloud infinite;
}

@keyframes sun-to-moon {
  0%, 20%, 75%, 100%{
    background: $drk-yellow;
    border: $base-size * .06 solid $drk-blue;
  }
  25%, 70%{
    background: rgba($drk-yellow, 0);
    border-right: none;
    border-top: none;
  }
}

.sun {
  height: $base-size * .4;
  width: $base-size * .4;
  background: $drk-yellow;
  position: absolute;
  border-radius: 50%;
  border: $base-size * .06 solid $drk-blue;
  z-index: 100;
  top: -5%;
  right: 10%;
  animation: sun-to-moon 15s infinite;
}


.right-cloud {
  height: $base-size * .24;
  width: $base-size * .5;
  background: $lt-yellow;
  position: absolute;
  border-radius: $base-size;
  border: $base-size * .06 solid $drk-blue;
  z-index: 100;
  top: 22%;
  right: -15%;
  animation: 4s animate-cloud infinite;
  
  &::before {
    content: " ";
    position: absolute;
    height: $base-size * .13;
    width: $base-size * .27;
    background: $lt-yellow;
    border-radius: $base-size * .1 $base-size * .1 0 0;
    border: $base-size * .06 solid $drk-blue;
    border-bottom: none;
    bottom: 100%;
    left: 24%;
  }
}

@keyframes day-to-night {
  0% {background: $lt-blue;}
  50% {background: #555}
  100% {background: $lt-blue;}
}

.inner-circle {
  width: $base-size * .85;
  height: $base-size * .85;
  border-radius: 50%;
  background: $lt-blue;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  overflow: hidden;
  animation:  day-to-night 15s infinite linear;
}

.mtn-left-back {
  width: 0;
  height: 0;
  border: $base-size * .5 solid transparent;
  border-bottom: $base-size * .8 solid $drk-blue;
  position: absolute;
  left: 33%;
  top: 35%;
  transform: translate(-50%,-50%);
}

.mtn-left-front {
  @extend .mtn-left-back;
  border-bottom: $base-size * .8 solid $green;
  top: 50%;
}

.mtn-right-back {
  @extend .mtn-left-back;
  top: 50%;
  left: 51%;
}

.mtn-right-front {
  @extend .mtn-left-front;
  top: 65%;
  left: 51%;
}

.top-hill-back {
  position: absolute;
  background: $drk-blue;
  width: $base-size ;
  height: $base-size * .8;
  border-top-right-radius: 30%;
  border-bottom-right-radius: 0%;
  transform: rotate(-53deg);
  top: 65%;
  left: -38%;
}

.top-hill-front {
  @extend .top-hill-back;
  background: $lt-blue;
  top: 73%;
}

.btm-hill-back {
  background: $drk-blue;
  width: $base-size * 2;
  height: $base-size * 2;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 193%;
  left: 50%;
  border-radius: 50%;
}

.btm-hill-front {
  @extend .btm-hill-back;
  background: $blue;
  top: 201%;
}

.curve-right {
  width: $base-size * .56;
  height: $base-size * .5;
  position: absolute;
  border-radius: 50%;
  border: transparent $base-size * .09 solid;
  border-bottom: $drk-blue $base-size * .07 solid;
  top: 57%;
  left: 81%;
  transform: translate(-50%,-50%);
}