@font-face {
  font-family: "SuperOcean";
  src: url("../Assets/fonts/SuperOcean.ttf");
}
.opacityon .opacityon {
  transition: opacity 6s ease-in;
  opacity: 1;
}

body {
  margin: 0 auto;
  overflow-x: hidden;
}

section {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

p {
  color: white;
  font-size: clamp(0.75rem, 2vw + 1rem, 2.125rem);
  font-family: sans-serif;
  width: 30ch;
  max-width: 90vw;
  font-weight: bold;
  opacity: 0;
  z-index: 5;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.green {
  color: rgb(37, 189, 37);
}

.button {
  min-width: 150px;
  min-height: 60px;
  width: 20vw;
  border-radius: 10px;
  background-color: rgb(37, 189, 37);
  color: white;
  font-size: 120%;
  padding: 5px;
  position: absolute;
  border: none;
}
.button:hover {
  background-color: rgb(54, 233, 54);
}

.text--hidden {
  opacity: 0 !important;
}

.panel1__text,
.panel3__text1,
.panel3__text2,
.scene3__text,
.scene5__text1,
.scene5__text2,
.scene5__text3,
.scene5__text4,
.scene1__cloud1,
.scene1__cloud2,
.scene1__cloud3,
.scene1__fishingboat,
.beach__trash,
.beach__big-wave {
  position: absolute;
}

.panel1__text {
  top: 40vh;
  left: 10vw;
}

.panel2__text {
  top: 50vh;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}

.panel3__text1 {
  left: 3vw;
}
.panel3__text2 {
  top: 45vh;
  left: 3vw;
}
.panel3__text2--hidden {
  opacity: 0 !important;
}
.panel3__text2--show {
  animation: textreveal 12s;
}

.container {
  width: 500%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}

.scene1, .scene5 {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
}

.scene1__panel,
.scene5__panel {
  width: 100vw;
  scroll-snap-align: start;
}

.scene1,
.scene6 {
  background-color: skyblue;
}
.scene1 h1,
.scene1 h2,
.scene6 h1,
.scene6 h2 {
  color: #17494c;
  font-size: clamp(3rem, 2.0385rem + 3.0769vw, 5.5rem);
  margin-left: 3vw;
  font-family: "SuperOcean", sarif;
}
.scene1 p,
.scene6 p {
  color: #17494c;
}

.beach__trash {
  width: 25%;
  transform: rotate(-40deg);
  bottom: 1vh;
  left: 30vw;
  z-index: 5;
}
.beach__trash--hidden {
  visibility: hidden;
}
.beach__big-wave {
  z-index: 5;
  bottom: 0vh;
  width: 100%;
  right: 120vw;
}

.scene1 .anime_start {
  animation: wavearrive 12s ease-in-out;
  animation-delay: 5s;
  animation-iteration-count: 1;
}
.scene1__backwave {
  bottom: -5vh;
  animation: rotatewave infinite 12s;
  position: absolute;
  width: 20%;
}
.scene1__frontwave {
  bottom: -3vh;
  left: 0;
  animation: movewave infinite 8s;
  position: absolute;
  z-index: 0;
  width: 25%;
}
.scene1__fishingboat {
  width: 30%;
  bottom: -6vh;
  left: 40%;
  animation: rocking-boat 5s infinite;
  z-index: -5;
}
.scene1__beach {
  width: 90%;
  right: -7vw;
  bottom: 0;
  z-index: 4;
  position: absolute;
}
.scene1__cloud1, .scene1__cloud3 {
  width: 20vh;
}
.scene1__cloud1 {
  top: 10vh;
  animation: moveCloud1 50s linear infinite;
}
.scene1__cloud2 {
  width: 25vh;
  top: 20vh;
  animation: moveCloud2 47s linear infinite;
}
.scene1__cloud3 {
  top: 30vh;
  animation: moveCloud3 51s linear infinite;
  left: 40px;
}

.scene2 {
  background-image: linear-gradient(to bottom, #0099ff, #0088ee);
}
.scene2__text {
  top: 50vh;
  left: 10vw;
  position: absolute;
  transform-origin: center;
}
.scene2__trash {
  top: 0;
}
.scene2__trash--hidden {
  visibility: hidden;
}
.scene2__fish {
  width: 10vw;
  top: 30vh;
  margin-left: -100px;
  position: absolute;
  padding: 20vh;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.scene2__fish2 {
  -webkit-animation: swim1 28s linear infinite, bounce 2s infinite;
  animation: swim1 28s linear infinite, bounce 2s infinite;
}
.scene2__fish4 {
  -webkit-animation: swim2 25s linear infinite, bounce 1.1s infinite;
  animation: swim2 25s linear infinite, bounce 1.1s infinite;
}

.scene3 {
  background-image: linear-gradient(to bottom, #0088ee, #0077cc);
}
.scene3__text {
  right: 7vw;
  top: 30vh;
}
.scene3__turtle {
  width: 22vh;
  height: 14vh;
  margin-left: -100px;
  bottom: 30vh;
  position: absolute;
  -webkit-animation: swim3 100s linear infinite, bounce 10s infinite, rotate 7s linear infinite;
  animation: swim3 100s linear infinite, bounce 10s infinite, rotate 7s linear infinite;
}
.scene3__fish {
  width: 10vw;
  top: 30vh;
  margin-left: -100px;
  position: absolute;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.scene3__fish3 {
  -webkit-animation: swim1 23s linear infinite, bounce 0.8s infinite;
  animation: swim1 23s linear infinite, bounce 0.8s infinite;
}
.scene3__fish4 {
  -webkit-animation: swim2 25s linear infinite, bounce 1.1s infinite;
  animation: swim2 25s linear infinite, bounce 1.1s infinite;
}
.scene3__trash {
  top: -100vh;
}

.scene4 {
  background-image: linear-gradient(to bottom, #0077cc, #0066aa);
}
.scene4__fish {
  width: 10vw;
  top: 30vh;
  margin-left: -100px;
  position: absolute;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.scene4__fish1 {
  -webkit-animation: swim1 55s linear infinite, bounce 4s infinite;
  animation: swim1 55s linear infinite, bounce 4s infinite;
}
.scene4__jellyfish {
  width: 18vh;
  animation: bounce2 2s ease infinite, swim2 400s infinite;
  position: absolute;
  bottom: 10vh;
  margin-left: 0;
}
.scene4__trash {
  top: -200vh;
}

.scene5 {
  background-image: linear-gradient(to bottom, #0066aa, #005588);
}
.scene5__container {
  width: 200%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}
.scene5__panel {
  overflow: hidden;
}
.scene5__text1 {
  left: 5vw;
  bottom: 70vh;
}
.scene5__text2 {
  right: 3vw;
  bottom: 40vh;
}
.scene5__text2--hidden {
  visibility: hidden;
}
.scene5__text2--show {
  visibility: visible;
  animation: textreveal 3s;
}
.scene5__text3 {
  bottom: 70vh;
  left: 10vw;
}
.scene5__text4 {
  bottom: 40vh;
  right: 8vw;
}
.scene5__fish {
  width: 10vw;
  top: 30vh;
  margin-left: -100px;
  position: absolute;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.scene5__fish1 {
  -webkit-animation: swim1 85s linear infinite, bounce 6s infinite;
  animation: swim1 85s linear infinite, bounce 6s infinite;
}
.scene5__seabed {
  position: absolute;
  bottom: 0vh;
  z-index: 1;
}
.scene5__seabed-background {
  position: absolute;
  z-index: 0;
  bottom: 0vh;
  height: 60vh;
}
.scene5__rock {
  position: absolute;
  width: 20vw;
  bottom: 1vh;
  left: 8vw;
  z-index: 2;
}
.scene5__carlos-tesla {
  position: absolute;
  width: 25vw;
  right: 5vw;
  rotate: 200deg;
  bottom: 5vh;
  z-index: 1;
}
.scene5__coral-red {
  position: absolute;
  width: 8vw;
  bottom: 5vh;
  left: 20vw;
  z-index: 3;
}
.scene5__coral-green {
  position: absolute;
  width: 13vw;
  right: 5vw;
  bottom: 5vh;
  z-index: 2;
}
.scene5__coral-purple {
  position: absolute;
  width: 10vw;
  left: 8vw;
  bottom: 5vh;
  z-index: 1;
}
.scene5__crab {
  width: 6vw;
  margin-left: -235px;
  position: absolute;
  bottom: 0;
  -webkit-animation: swim4 90s linear infinite, bounce 0.25s infinite;
  animation: swim4 90s linear infinite, bounce 0.25s infinite;
  z-index: 29;
}
.scene5__trash {
  top: -300vh;
}
.scene5__button {
  position: absolute;
  transform-origin: center;
  bottom: 25vh;
  z-index: 20;
  left: 40vw;
  opacity: 0;
}
.scene5__button--show {
  opacity: 1;
  transition: opacity 3s;
}

.scene6__button {
  bottom: 10vh;
  left: 50vw;
  z-index: 20;
  transform-origin: center;
}
.scene6 p {
  margin-left: 5vw;
  z-index: 20;
  position: relative;
}
.scene6__backwave {
  bottom: -5vh;
  animation: rotatewave infinite 12s;
  position: absolute;
  left: -2vw;
}
.scene6__frontwave {
  bottom: -3vh;
  left: 0;
  animation: movewave infinite 8s;
  position: absolute;
  width: 120%;
}
.scene6__beach {
  width: 90%;
  right: -7vw;
  bottom: 0;
  z-index: 4;
  position: absolute;
}

@keyframes rocking-boat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(40px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes wavearrive {
  0% {
    right: 120vw;
  }
  50% {
    right: 5vw;
  }
  100% {
    right: 120vw;
  }
}
@keyframes textreveal {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes rotatewave {
  0% {
    rotate: 0deg;
  }
  33% {
    rotate: 5deg;
  }
  66% {
    rotate: -5deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes movewave {
  0% {
    transform: translateX(0vw);
  }
  50% {
    transform: translateX(-6vw);
  }
  100% {
    transform: translateX(0vw);
  }
}
@keyframes moveCloud1 {
  0% {
    transform: translateX(-300px);
  }
  100% {
    transform: translateX(100vw);
  }
}
@keyframes moveCloud2 {
  0% {
    transform: translateX(-150px);
  }
  100% {
    transform: translateX(100vw);
  }
}
@keyframes moveCloud3 {
  0% {
    transform: translateX(-500px);
  }
  100% {
    transform: translateX(100vw);
  }
}
/* Animations for the sea animals */
@keyframes swim1 {
  0% {
    margin-left: 100%;
  }
  10% {
    margin-left: 100%;
  }
  100% {
    margin-left: -235px;
  }
}
@keyframes swim2 {
  0% {
    margin-left: -235px;
  }
  70% {
    margin-left: 100%;
  }
  100% {
    margin-left: 100%;
  }
}
@keyframes swim3 {
  0% {
    margin-left: 100%;
  }
  10% {
    margin-left: 100%;
  }
  100% {
    margin-left: -150px;
  }
}
@keyframes swim4 {
  0% {
    margin-left: 30px;
  }
  45% {
    margin-left: 100%;
  }
  55% {
    margin-left: 100%;
  }
  100% {
    margin-left: 30px;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7.5px);
  }
}
@keyframes bounce2 {
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(-15deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@keyframes transition-trash {
  0% {
    transform: translateY(-50vh);
  }
  20% {
    transform: translateY(100vh);
  }
  40% {
    transform: translateY(200vh);
  }
  80% {
    transform: translateY(300vh);
  }
  100% {
    transform: translateY(376vh);
  }
}
.water_trash1,
.water_trash2,
.water_trash3,
.water_trash4 {
  z-index: 10;
  right: 40vw;
  position: absolute;
  width: 25%;
}

.scene2__trash,
.scene3__trash,
.scene4__trash,
.scene5__trash {
  animation: transition-trash 10s linear forwards;
}

@media (max-width: 768px) {
  @keyframes transition-trash {
    0% {
      transform: translateY(-50vh);
    }
    20% {
      transform: translateY(100vh);
    }
    40% {
      transform: translateY(200vh);
    }
    80% {
      transform: translateY(300vh);
    }
    100% {
      transform: translateY(393vh);
    }
  }
}
@media (max-width: 480px) {
  @keyframes transition-trash {
    0% {
      transform: translateY(-50vh);
    }
    20% {
      transform: translateY(100vh);
    }
    40% {
      transform: translateY(200vh);
    }
    80% {
      transform: translateY(300vh);
    }
    100% {
      transform: translateY(395vh);
    }
  }
}
@media (max-width: 1200px) {
  @keyframes transition-trash {
    0% {
      transform: translateY(-50vh);
    }
    20% {
      transform: translateY(100vh);
    }
    40% {
      transform: translateY(200vh);
    }
    80% {
      transform: translateY(300vh);
    }
    100% {
      transform: translateY(385vh);
    }
  }
}
@media (prefers-reduced-motion) {
  .scene1__frontwave,
  .scene6__frontwave {
    animation: none !important;
  }
  .scene1__backwave,
  .scene6__backwave {
    animation: none !important;
  }
  .scene1__cloud1 {
    animation: none;
    position: absolute;
    left: 60vw;
  }
  .scene1__cloud2 {
    animation: none;
    position: absolute;
    left: 45vw;
  }
  .scene1__cloud3 {
    animation: none;
    position: absolute;
    left: 80vw;
  }
}
.opacityoff {
  transition: opacity 3s ease-out;
  opacity: 0 !important;
}

.scene5__fishnet {
  width: 30%;
  position: absolute;
  z-index: 30;
  left: 30vw;
  bottom: 160vh;
}

.net-move {
  animation: movenet 12s;
}

@keyframes movenet {
  0% {
    bottom: 160vh;
  }
  50% {
    bottom: -10vh;
  }
  100% {
    bottom: 160vh;
  }
}
@media (pointer: coarse) {
  body::before {
    content: "Please use a device with a keyboard or a mouse";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    font-size: 32px;
    text-align: center;
    z-index: 9999;
    overflow: hidden;
  }
}/*# sourceMappingURL=style.css.map */