* {
  margin: 0px;
  padding: 0px;
}
body {
  height: 100vh;
  width: 100vw;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sun {
  background: linear-gradient(174deg, rgba(255,0,0,1) 44%, rgba(255,123,0,1) 63%);
  height: 50vmin;
  width: 50vmin;
  margin-left: 25vmin;
  border-radius: 50%;
  box-shadow: 
    0 -0.5vmin 4vmin red;
  display: flex;
  align-items: center;
  justify-content: center;
} 

.water {
  position: relative;
  background: black;
  width: 80vmin;
  height: 25vmin;
  top: 26vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  }

.reflection {
  position: relative;
  background: rgba(255,123,0,1);
  color: rgba(255,123,0,1);
  width: 50vmin;
  height: 3vmin;
  border-radius: 50%;
  top: -12vmin;
  box-shadow: 
    0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
  animation: fade 3s ease-in-out infinite;
}

.reflection::after {
  content: '';
  position: absolute;
  background: rgba(255,123,0,1);
  color: rgba(255,123,0,1);
  width: 50vmin;
  height: 5vmin;
  border-radius: 50% 90% 50% 80%;
  top: 2.5vmin;
  box-shadow: 
    0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
}

.reflection::before {
  content: '';
  position: absolute;
  background: rgba(255,123,0,1);
  color: rgba(255,123,0,1);
  width: 40vmin;
  height: 5vmin;
  left: 5vmin;
  border-radius: 50% 90% 50% 80%;
  top: 7vmin;
  box-shadow: 
    0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
  animation: tide 3s ease-out infinite;
}

.plop {
  background: rgba(255,123,0,1);
  color: rgba(255,123,0,1);
  position: relative;
  height: 10vmin;
  width: 30vmin;
  border-radius: 40% 80% 50% 70%;
  left: -38vmin;
  top: 25vmin;
  box-shadow: 
    0.5vmin 0 2vmin,
    -0.5vmin 0 2vmin;
  animation: popout 3s ease-out infinite;
}

@keyframes fade {
  50% {
    transform: translatey(-0.5vmin) scaley(0.7);
  }
}

@keyframes tide {
  25% {
    transform: translatey(0.3vmin) scale(1, 1.2);
  }
  50% {
    transform: translatey(0.5vmin) scale(1.1., 1.2);
  }
  100% {
    transform: translatey(-1vmin) scale(0.7, 1.3);
  }
}

@keyframes popout {
  25% {
    transform: translate(0.5vmin, 0.5vmin) scalex(0.8);
  }
  50% {
    transform: translate(1vmin, 1vmin) scalex(0.6);
  }
  100% {
    transform: translate(2vmin, 3vmin) scalex(0.3);
    height: 0vmin;
    
  }
}