@import
url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Yanone+Kaffeesatz&display=swap);

#top_window {
  animation-name: front-windows;
  animation-duration: 60s;
  animation-timing-function: ease;
  /* animation-direction: alternate;*/
  animation-iteration-count: 1;
}

@keyframes front-windows {
  /*0% {fill: #fff;}
  100% {fill: #090029;}*/
  0% {fill: #090029;}
  8% {fill: #F5E663;}
  /*night*/
  10% {fill: #090029;} 
  /*pause*/
  20% {fill: #090029;}
  30% {fill: #F5E663;}
  /*first day ends*/
  50% {fill: #090029;}
  /*night*/
  55% {fill: #090029;}
  /*pause*/
  60% {fill: #F5E663;}
  63.75% {fill: #090029;}
  67.5% {fill: #090029;}
  /*night*/
  70% {fill:#090029;}
  /*pause*/
  75% {fill: #F5E663;}
  77.5% {fill: #090029;}
  80% {fill: #090029;}
  /*night*/
  82.5% {fill: #090029;}
  /*pause*/
  85% {fill: #F5E663;}
  86.25% {fill:#090029;}
  87.5% {fill: #090029;}
  /*night*/
  88.75% {fill: #090029;}
  /*pause*/
  90% {fill: #F5E663;}
  91.25% {fill: #090029;}
  92.5% {fill: #090029;}
  /*night*/
  93.75% {fill: #090029;}
  /*pause*/
  95% {fill: #F5E663;}
  96.25% {fill: #090029;}
  97.5% {fill: #090029;}
  /*night*/
  98.75% {fill: #090029;}
  /*pause*/
  100% {fill: #090029;}
}

#bottom_window {
  animation-name: bottom-window;
  animation-duration: 60s;
  animation-timing-function: ease;
  /* animation-direction: alternate;*/
  animation-iteration-count: 1;
}

@keyframes bottom-window {
  /*0% {fill: #fff;}
  100% {fill: #090029;}*/
  0% {fill: #090029;}
  8% {fill: #090029;}
  /*night*/
  10% {fill: #F5E663;} 
  /*pause*/
  20% {fill: #090029;}
  30% {fill: #090029;}
  /*first day ends*/
  50% {fill: #F5E663;}
  /*night*/
  55% {fill: #F5E663;}
  /*pause*/
  60% {fill: #090029;}
  63.75% {fill: #F5E663;}
  67.5% {fill: #F5E663;}
  /*night*/
  70% {fill:#090029;}
  /*pause*/
  75% {fill: #090029;}
  77.5% {fill: #F5E663;}
  80% {fill: #F5E663;}
  /*night*/
  82.5% {fill: #090029;}
  /*pause*/
  85% {fill: #090029;}
  86.25% {fill:#F5E663;}
  87.5% {fill: #F5E663;}
  /*night*/
  88.75% {fill: #090029;}
  /*pause*/
  90% {fill: #090029;}
  91.25% {fill: #F5E663;}
  92.5% {fill: #F5E663;}
  /*night*/
  93.75% {fill: #090029;}
  /*pause*/
  95% {fill: #090029;}
  96.25% {fill: #F5E663;}
  97.5% {fill: #F5E663;}
  /*night*/
  98.75% {fill: #090029;}
  /*pause*/
  100% {fill: #090029;}
}

#house_shadow, #tree_cover {
  animation-name: shadow;
  animation-duration: 60s;
  animation-timing-function: ease-in-out;
 /* animation-direction: alternate;*/
   animation-iteration-count: 1;
  }

@keyframes shadow {
  0% {opacity: 80%}
  8% {opacity: 30%;}
  /*night*/
  10% {opacity: 0%;} 
  /*pause*/
  20% {opacity: 0%;}
  30% {opacity: 80%}
  /*first day ends*/
  50% {opacity: 0%}
  /*night*/
  55% {opacity: 0%;}
  /*pause*/
  60% {opacity: 80%;}
  63.75% {opacity: 0%;}
  67.5% {opacity: 0%;}
  /*night*/
  70% {opacity: 80%;}
  /*pause*/
  75% {opacity: 40%;}
  77.5% {opacity: 0%;}
  80% {opacity: 0%;}
  /*night*/
  82.5% {opacity: 80%;}
  /*pause*/
  85% {opacity: 40%;}
  86.25% {opacity: 0%;}
  87.5% {opacity: 0%;}
  /*night*/
  88.75% {opacity: 80%;}
  /*pause*/
  90% {opacity: 40%;}
  91.25% {opacity: 0%;}
  92.5% {opacity: 0%;}
  /*night*/
  93.75% {opacity: 80%;}
  /*pause*/
  95% {opacity: 40%;}
  96.25% {opacity: 0%;}
  97.5% {opacity: 0%;}
  /*night*/
  98.75% {opacity: 80%;}
  /*pause*/
  100% {opacity: 80%;}
}



body {
  margin: 0;
  /*background adapted from: https://codepen.io/P1N2O/pen/pyBNzX*/
  background: linear-gradient(347deg, #f5e663, #f0b0ac, #e38fb6, #1AC8ED, #090029);
  background-size: 400% 400%;
  /*background-repeat: no-repeat;*/
  
  animation-name: sunrise;
  animation-duration: 60s;
  animation-timing-function: ease-in-out;
 /* animation-direction: alternate;*/
   animation-iteration-count: 1;
}

@keyframes sunrise {
  10% {background-position: 100% 100%;}
  20% {background-position: 50% 50%;}
  /*night*/
  30% {background-position: 0% 0%;} 
  /*pause*/
  40% {background-position: 0% 0%;}
  45% {background-position: 100% 100%;}
  50% {background-position: 50% 50%;}
  /*night*/
  55% {background-position: 0% 0%;}
  /*pause*/
  60% {background-position: 0% 0%;}
  63.75% {background-position: 100% 100%;}
  67.5% {background-position: 50% 50%;}
  /*night*/
  70% {background-position: 0% 0%;}
  /*pause*/
  75% {background-position: 0% 0%;}
  77.5% {background-position: 100% 100%;}
  80% {background-position: 50% 50%;}
  /*night*/
  82.5% {background-position: 0% 0%;}
  /*pause*/
  85% {background-position: 0% 0%;}
  86.25% {background-position: 100% 100%;}
  87.5% {background-position: 50% 50%;}
  /*night*/
  88.75% {background-position: 0% 0%;}
  /*pause*/
  90% {background-position: 0% 0%;}
  91.25% {background-position: 100% 100%;}
  92.5% {background-position: 50% 50%;}
  /*night*/
  93.75% {background-position: 0% 0%;}
  /*pause*/
  95% {background-position: 0% 0%;}
  96.25% {background-position: 100% 100%;}
  97.5% {background-position: 50% 50%;}
  /*night*/
  98.75% {background-position: 0% 0%;}
  /*pause*/
  100% {background-position: 0% 0%;}
}


.svg_container {
  padding-top: 50px;
  margin-bottom: -8px;
  margin-left: 20%;
  position: relative;
}
/*
svg {
  transform: scale(0.50); 
}


#window_1 {
  fill: green;
  animation-name: front-windows;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes front-windows {
  0% {fill: #fff;}
  100% {fill: yellow;}
}
*/

.text {
  background-color: #FEFCEC;
  margin: auto;
  padding: 0px;
  height: 100px; 
}

.text2 {
  position: absolute;
  margin: auto;
  padding: 0px;
  height: 100px;
  width: 100%
}

h2 {
  opacity: 0%;
  padding-top: 12px;
  /*font-family: 'Yanone Kaffeesatz', sans-serif;*/
  font-family: 'Bebas Neue', cursive;
}

#young {
  animation-name: young;
  animation-duration: 24s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes young {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 70%; opacity: 0%; width: 120%}
}

#slowly {
  animation-name: slowly;
  animation-delay: 22s;
  animation-duration: 12s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes slowly {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 70%; opacity: 0%; width: 120%}
}

#fast {
  animation-name: fast;
  animation-delay: 34s;
  animation-duration: 9s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fast {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 50%; opacity: 80%}
  100% {margin-left: 80%; opacity: 0%; width: 120%}
}

#faster {
  animation-name: faster;
  animation-delay: 42s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes faster {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 70%; opacity: 0%; width: 120%}
}

#fastest {
  animation-name: fastest;
  animation-delay: 48s;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fastest {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 70%; opacity: 0%; width: 120%}
}

#fastest2 {
  animation-name: fastest2;
  animation-delay: 51s;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fastest2 {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 70%; opacity: 0%; width: 120%}
}

#fastest3 {
  animation-name: fastest3;
  animation-delay: 54s;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fastest3 {
  0% {margin-left: 5%; opacity: 10%;}
  50% {margin-left: 40%; opacity: 80%}
  100% {margin-left: 50%; opacity: 100%; width: 100%}
}

#fastest4 {
  animation-name: fastest4;
  animation-delay: 57s;
  animation-duration: 3000s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fastest4 {
  0% {margin-left: 50%; opacity: 100%; width: 120%}
  100% {margin-left: 50%; opacity: 100%; width: 100%}
}


.sun_container {
  position: relative;
  width: 100%;
  z-index: -100;
}

#sun {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: #FEFCEC;
  float: right;
  margin-right: 2%;
  
  animation-name: sun;
  animation-duration: 20s;
  animation-delay: 1.5s;
  animation-iteration-count: 2;
}

@keyframes sun {
  0% {transform: translatey(0);}
  45% {transform: translatey(-500px); opacity: 1;}
  100% {transform: translatey(0); opacity: 0;}
}

.ground {
  background-color: #000;
  margin: auto;
  padding: 0px;
  height: 200px;
  z-index: 1;
  position: relative;
}

/*
.moon_container {
  position: absolute;
  width: 100%;
}

#moon {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: #FEFCEC;
  float: left;
  margin: 50px;
  position: absolute;
  
  animation-name: moon;
  animation-duration: 12s;
  animation-iteration-count: 1;
}

@keyframes moon {
  0% {margin-top: 0%;}
  100% {margin-top: 200vh;}
}
*/