body.error-page {
  background: linear-gradient(0deg, rgba(0,0,0,1) 30%, rgba(46,73,96,1) 100%);
  position: relative;
}
body.error-page::after {
  background: url(../img/bg-noise.svg) repeat;
  content: "";
  display: block;
  mix-blend-mode: soft-light;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  height: 100%;
}
.top-message {
  margin: 6rem 4rem 4rem;
  max-width: 70ch;
  padding: 0 2rem;
}
.error-main {
  display: flex;
  flex-direction: column;
}
.error-main h1 {
  font-size: 4rem;
}
.error-main h2 {
  font-size: 3rem;
}
.error-wrapper { 
  display: grid;
  margin-block-start: 8rem;
  position: relative;
}
.sand {
  max-width: 100%;
  min-height: 300px;
}
.sand-top {
  max-width: 100%;
  position: absolute;
  bottom: -20%;
  left: -20%;
}
.plant1, .plant2, .plant3, .plant-top, .plant-sand, .plant-sand2 {
  position: absolute;
}
.plant-top {
  top: -30%;
  left: 6%;
}
.plant1 {
  right: 8rem;
  bottom: 35%;
}
.plant2 {
  right: 0;
  bottom: 18%;
}
.plant3 {
  left: 3%;
  bottom: 18%;
}
.plant-sand {
  bottom: 6px;
  left: -30px;
}
.plant-sand2 {
  bottom: 5px;
  left: -7px;
}
.stones {
  position: absolute;
  bottom: 30px;
  right: 4rem;
  width: 70%;
}
.container-wrapper {
  position: absolute;
  bottom: 30%;
  right: 2rem;
}
.container {
  display: flex;
  max-width: 700px;
  perspective: 1400px;
  width: 100%;
}
.container-front {
  flex: 2 1 70%;
  min-height: 200px;
  transform-style: preserve-3d;
  transform: rotateY(45deg) translateX(-15.6%);
}
.container-side {
  flex: 1 1 20%;
  min-height: 200px;
  transform-style: preserve-3d;
  transform: rotateY(-36deg) scale(1.4);
}

.bubble1, .bubble2, .bubble3, .bubble4, .bubble5, .bubble6, .bubble7 { opacity: 0; }

.bubble2 { animation: bubble 8s .5s 10; }
.bubble3 { animation: bubble 8s 1.6s 10; }
.bubble4 { animation: bubble 8s 2.4s 10; }
.bubble5 { animation: bubble 8s 3.4s 10; }
.bubble6 { animation: bubble 8s 5.3s 10; }
.bubble7 { animation: bubble 8s 6.3s 10; }
.fish { animation: fish 8s 10; }
.fish-all {
  position: absolute;
  left: -12%;
  top: 50%;
}
.light {
  max-height: 92vh;
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}


@keyframes fish {
  10% {
    transform: translateY(-50px) translateX(0) rotate(30deg);
  }
  10%, 12.5% { 
    transform: translateY(50px) translateX(250px) rotate(20deg);
  }
  24.5%, 25% {
    transform: translateY(100px) translateX(500px);
  }
  32.5% {
    transform: translateY(50px) translateX(850px) rotate(-20deg);
  }
  50%, 55% {
    transform: translateY(-170px) translateX(1200px) rotate(-40deg);
  }
  55% { 
    transform: translateY(-170px) translateX(1200px) rotate(0deg) scaleX(-1); 
  }
  65%, 70% {
    transform: translateY(-150px) translateX(900px) rotate(-10deg) scaleX(-1);
  }
  80% {
    transform: translateY(-150px) translateX(400px) scaleX(-1);
  }
  100% {
    transform: translateY(-200px) translateX(0px) rotate(0deg) scaleX(-1);
  }
}

@keyframes bubble {
  20% { opacity: .4; }
  100% {
    transform: translateY(-40vh);
  }
}

@media screen and (max-width: 48em) /* 768 */{
  .container {
    max-width: 500px;
  }
  .plant-top {
    top: 13%;
  }
}

@media screen and (max-width: 40em) /* 640 */{
  .container {
    max-width: 360px;
  }
  .container-wrapper {
    left: 2rem;
    right: 0;
  }
  .top-message { padding: 0; }
  .error-main h1 {
    font-size: 3rem;
  }
  .error-main h2 {
    font-size: 2rem;
  }
  .plant-top {
    top: 0%;
  }
  .plant1 {
    bottom: 32%;
    right: 4%;
    width: 65px;
  }
  .plant2, .plant3 {
    width: 90px;
  }
  .fish-all {
    height: 46vh;
    overflow: hidden;
    top: 0;
    width: 112vw;
  }
}