:root {
  /* begin of animation */
  --sea-color-begin: rgb(30, 54, 75);
  --sky-color-begin: rgb(30, 30, 75);
  --sun-color-begin: rgb(255, 111, 0);
  --beach-color-begin: rgb(76, 60, 37);

  /* end of animation */
  --sea-color-end: rgb(0, 0, 0);
  --sky-color-end: rgb(0, 0, 0);
  --sun-color-end: rgb(0, 0, 0);
  --beach-color-end: rgb(0, 0, 0);
}

body {
  margin: 0;
  background-color: rgb(50, 50, 50);
  overflow: hidden;
}

.sun {
  width: 6em;
  height: 6em;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: sun-animation 10s;
}

.sky {
  width: 100vw;
  height: 45vh;
  position: absolute;
  animation: sky-animation 10s;
  background-color: var(--sky-color-end);
}

.sea {
  width: 100vw;
  height: 10vh;
  position: absolute;
  top: 45%;
  animation: sea-animation 10s;
  background-color: var(--sea-color-end);
  z-index: 1;
}

.highlights {
  height: 50vh;
  width: 100vw;
  overflow: hidden;
}

.sea-highlight {
  width: 30vw;
  height: 50vh;
  left: 50%;
  position: absolute;
  animation: sea-highlight-animation 10s;
  z-index: 1;
}

.beach {
  width: 100vw;
  height: 45vh;
  position: absolute;
  top: 55%;
  animation: beach-animation 10s;
  background-color: var(--beach-color-end);
  z-index: 0;
}

@keyframes sun-animation {
  0% {
    top: 45%;
    background-color: var(--sun-color-begin);
  }
  100% {
    top: 51%;
    background-color: var(--sun-color-end);
  }
}

@keyframes sky-animation {
  0% {
    background-color: var(--sky-color-begin);
  }
  100% {
    background-color: var(--sky-color-end);
  }
}

@keyframes sea-animation {
  0% {
    background-color: var(--sea-color-begin);
  }
  100% {
    background-color: var(--sea-color-end);
  }
}

@keyframes beach-animation {
  0% {
    background-color: var(--beach-color-begin);
  }
  100% {
    background-color: var(--beach-color-end);
  }
}

@keyframes sea-highlight-animation {
  0% {
    top: 50%;
    opacity: 25%;
    transform: translate(-50%, -50%) perspective(10px) rotateX(10deg);
    background-color: var(--sun-color-begin);
  }
  50% {
    opacity: 15%;
  }
  100% {
    top: 47%;
    opacity: 0%;
    transform: translate(-50%, -50%) perspective(9px) rotateX(20deg);
    background-color: var(--sun-color-end);
  }
}