body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.sunset-container {
    width: 100%;
    height: 66.66%;
    background: linear-gradient(to bottom, #f9c667, #f76b1c, #f63a0f, #e02e11);
    position: relative;
    overflow: hidden;
}

.sun {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background-color: #f9d423;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(249, 212, 35, 0.8);
}

.ocean-container {
    width: 100%;
    height: 33.34%;
    background: linear-gradient(to top, #01579b, #0288d1, #03a9f4);
    position: relative;
}

.ocean-container::before,
.ocean-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ocean-container::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path fill="white" d="M0 10 Q50 0 100 10" /></svg>');
  background-size: 300px 100px;
  background-repeat: repeat-x;
  animation: wave 10s linear infinite;
  opacity: 0.5;
}

.ocean-container::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><circle cx="10" cy="10" r="4" fill="white" /><circle cx="40" cy="10" r="4" fill="white" /><circle cx="70" cy="10" r="4" fill="white" /></svg>');
  background-size: 200px 100px;
  background-repeat: repeat-x;
  animation: seafoam 12s linear infinite;
  opacity: 0.8;
}

@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 300px 0;
  }
}

@keyframes seafoam {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 0;
  }
}