:root {
  --index: calc(1vw + 1vh);
}

canvas {
  display: block;
}

body {
  margin: 0;
}

#particles-js {
  width: 100vw;
  height: 100vh;
  transform: translateZ(0);
}

.layers {
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;
}

.layers__container {
  height: 100vh;
  position: relative;
  transform: rotateX(var(--move-y)) rotateY(var(--move-x));
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.layer-1 {
  position: absolute;
  inset: -6vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 100%;
  transform: translateZ(-55px) scale(1.08);
}

.coral {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

.coral-1 {
  width: calc(var(--index) * 22);
  height: calc(var(--index) * 22);
  left: -10px;
  bottom: -10px;
  background-image: url('../images/coral-1.png');
  transform: translateZ(100px) scale(1.15);
}

.coral-2 {
  width: calc(var(--index) * 13);
  height: calc(var(--index) * 21.7);
  right: 0;
  bottom: 0;
  background-image: url('../images/coral-2.png');
  transform: translateZ(100px);
}

.coral-3 {
  width: calc(var(--index) * 15);
  height: calc(var(--index) * 15);
  bottom: -60px;
  left: 35vw;
  background-image: url('../images/coral-3.png');
  transform: translateZ(10px);
}

.fish {
  width: calc(var(--index) * 7);
  height: calc(var(--index) * 6);
  position: absolute;
  right: 100%;
  top: 0;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s linear;
}

.fish-1 {
  background-image: url('../images/fish-1.png');
}

.fish-2 {
  background-image: url('../images/fish-2.png');
}

.fish-3 {
  width: calc(var(--index) * 4.5);
  background-image: url('../images/fish-3.png');
}

.fish-4 {
  width: calc(var(--index) * 6.5);
  background-image: url('../images/fish-4.png');
}

.fish-5 {
  width: calc(var(--index) * 8.5);
  background-image: url('../images/fish-5.png');
}

.fish-6 {
  width: calc(var(--index) * 8.5);
  background-image: url('../images/fish-6.png');
}

.bubble {
  width: calc(var(--index) * 2.5);
  height: calc(var(--index) * 2.5);
  position: absolute;
  top: 100%;
  left: 0;
  background: url('../images/bg-bubble.png');
  background-size: 100%;
  opacity: 0.6;
}