body {
  overflow: hidden;
  background-color: blue;
}
svg {
    overflow:visible;
}
.flex-container {
  display: flex;
  flex-direction: row;
  width: auto;
  height: auto;
}
.greeting-text{
  display:none;
  position:absolute;
  z-index:9;
  margin:auto;
  width:100%;
  
  
  text-align:center;
  font-family:"Varela Round", "serif";
  font-size:60pt;
  color:white;
}

/*classes assosiated with clouds*/
.cloud {
  background: #fff;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(5%, #fff),
    color-stop(100%, #f1f1f1)
  );
  background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#fff",
      endColorstr="#f1f1f1",
      GradientType=0
    );
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  /*change box shadow - need to make it thicker*/
  top: 40%;
  height: 54%;
  position: relative;
  width: 100%;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /* for left bumpe */
  height: 110%;
  width: 40%;
  left: 14%;
  top: -46%;
}
.cloud,
.cloud:before {
  -webkit-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
}
.cloud:before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /*for right bumpe*/
  width: 48%;
  height: 150%;
  right: 11%;
  top: -75%;
}

.cloud-container {
  display: block;
  position: absolute;
  /*positioning*/
  
  /*keep this ratio*/
  height: 5vw;
  width: 7vw;
  
  z-index:17;
}
#cloud-1 {
  top: 12%;
}
#cloud-2 {
  top: 22%;
}
#cloud-3 {
  top: 16%;
}

#tree_trunk {
  transform: scale(0, 20pt);
}
.Scene-Svg {
  box-sizing: border-box;
  position: absolute;
  
  left:calc(50% - (70% / 2));
  bottom: -1%;
  height: auto;
  width: 70%;
  /*so all the scenes don't appear at once*/
  display: none;
  transform-origin: 50% 100%;
}
.satellite-container {
  position: relative;
  left: 0;
  transform-origin: 50vh 100vh;
}
.button-container {
  display: flex;
  position: absolute;
  margin: auto;
  top: 3vh;
  left: 27%;
  width: 45%;
  height: 30%;
}

.button {
  position: relative;
  width: 10em;
  height: 4em;
}

@keyframes sun {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}