body{
  font-family: Verdana, sans-serif;
  background-color: lightblue;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.speckle{
  position: absolute;
  top: 50%;
  border: solid black 1px;
  background-color: hotpink;
  height: 50px;
  width: 50px;
}

#stars{
  position: relative;
  top: 50%;
  left: 50%;
}

.star{
  position: absolute;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  background-color: white;
  border: solid 1px black;
}

#text{
  visibility: hidden;
  display: none;
}

#newText{
  position: absolute;
  top: 50%;
  z-index: 1000;
}

.letter{
  position: relative;
  display: inline-block;
  font-size: 30px;
}

.rock1{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 10%;
}


.rock2{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: orange;
    left: 20%;
}

.rock3{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: yellow;
    left: 30%;
}

.rock4{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: green;
    left: 40%;
}

.rock5{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: blue;
    left: 50%;
}

.rock6{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: indigo;
    left: 60%;
}

.rock7{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: violet;
    left: 70%;
}

.rock8{
    position: absolute;
    bottom: 25%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: hotpink;
    left: 80%;
}

.rock9{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: grey;
    left: 10%;
}

.rock10{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: black;
    left: 20%;
}

.rock11{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: white;
    left: 30%;
}

.rock12{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: grey;
    left: 40%;
}

.rock13{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: black;
    left: 50%;
}

.rock14{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: white;
    left: 60%;
}

.rock15{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: grey;
    left: 70%;
}

.rock16{
    position: absolute;
    top: 5%;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: black;
    left: 80%;
}


.eye-big{
  position: relative;
  left: 300px;
  top: 50px;
}


.fin-big{
  position: relative;
  left: 200px;
  top: 90px;
}

.tail-big{
  font-size: 40px;
  position: relative;
  left: -65px;
  top: 70px;
}


.eye-tiny{
  position: relative;
  left: 150px;
  top: 20px;
}

.tail-tiny{
  font-size: 20px;
  position: relative;
  left: -45px;
  top: 35px;
}




.fin-tiny{
  position: relative;
  left: 100px;
  top: 60px;
  }

  .wrapper-new{
  position: relative;
  width: 100%;
  height:800px;
  margin: 0;
  background: lightblue;
}

.oval{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 400px;
  height: 200px;
  background: orange;
  border-radius: 200px / 100px;
  border: solid 1px yellow;
}

.tinyOval{
  position: absolute;
  width: 200px;
  height: 100px;
  left: 50%;
  background-color: lightorange;
  border: solid 1px yellow;
  border-radius: 100px / 50px;
}

.buttons{
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
}

.happy{
  background-color: white;
  display: inline-block;
  margin: 0 auto;
  float: left;
  text-align: center;
  width: 100px;
  height: 20px;
  border: solid black 2px;
}

.sad{
  background-color: white;
  display:inline-block;
  margin: 0 auto;
  float: right;
  text-align: center;
  width: 100px;
  height: 20px;
  border: solid black 2px;
}

.line{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: none;
  transition: all .2s ease-in-out;
  width:100px; height:1px;
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;

}

.circle-left{
  position: absolute;
  top: 25%;
  left: 10%;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: yellow;
  transition: all .2s ease-in-out;
}
.circle-right{
  position: absolute;
  top: 25%;
  right: 10%;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: yellow;
  transition: all .2s ease-in-out;

}

.sad:hover ~ .line{
transform: rotate(10deg) translate(-20%, 30px);
  border-radius: 50%/10px 50px 0 0;
}

.sad:hover ~ .circle-left{
transform: translateY(10px);
}


.sad:hover ~ .circle-right{
transform: translateY(10px);
}

.happy:hover ~ .line{
  border-radius: 50%/100px 100px 0 0;

}

.happy:hover ~ .circle-left{
transform: translateY(-10px);

}


.happy:hover ~ .circle-right{
transform: translateY(-10px);
}


.container{
  z-index: -1;
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 500px;
  background-color: orange;
}

.wrapper{
  position: relative;
  top: 50px;
  width: 100%;
}