/* stylelint-disable keyframes-name-pattern */
body,
html {
  margin: 0;
  padding: 0;
  background-color: #55b5ff;
  font-family: Arial, sans-serif;
}

section {
  min-height: 100vh;
  z-index: 1;
  position: relative;
  background: url('bg.png') no-repeat bottom right fixed;
  background-size: 45vh;

  header {
    img {
      animation: APPEAR 1s ease-in-out;
      position: relative;
      top: 5vw;
      right: -25vw;
      width: 50vw;
    }
  }

  footer {
    animation: APPEAR 1s ease-in-out;
    margin-top: 10vw;
    background: black;
    color: white;
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
  }

  h1 {
    animation: SLIDESHOW 2s ease-in-out;
    font-size: 2vw;
    text-align: center;
    margin: 20vh 0 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background: #15095d;
    color: white;
  }

  article {
    animation: SLIDESHOW 2s ease-in-out;
    margin: 0 10vw;
    padding: 5vw;
    background-color: white;
    border-left: solid 10px black;
    margin-bottom: 12vh;
  }

  article:last-child {
    margin-bottom: 12vh;
  }
}

.wave-layer {
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  animation: water-fill 5s linear forwards;
}

.wave {
  position: absolute;
  width: 300%;
  height: 100%;
  top: 0;
}

.wave1 {
  animation: wave-move 10s alternate infinite;
}

.wave2 {
  animation: wave-move 15s alternate infinite;
}

.wave3 {
  animation: wave-move 20s alternate infinite;
}

.wave4 {
  animation: wave-move 25s alternate infinite;
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes water-fill {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20vh);
  }
}

/* Animations */
@keyframes SHOW {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes SHOWALPHA {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0.75;
  }
}

@keyframes APPEAR {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  50% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes SLIDESHOW {
  0% {
    opacity: 0;
    transform: scale(0.9) translate3d(-200px, 0, 0);
  }

  50% {
    opacity: 0;
    transform: scale(0.9) translate3d(-50px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes DROPDOWN {
  0% {
    opacity: 0;
    transform: scale(0.9) translate3d(0, -200px, -200px);
    max-height: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    max-height: 400px;
  }
}

@keyframes GRAYGLOW {
  0% {
    background-color: #f8f8f8;
  }

  50% {
    background-color: #e8e8e8;
  }

  100% {
    background-color: #efefef;
  }
}