@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

html {
  scroll-behavior: smooth;
  background-color: rgb(245,245,245);
}

h1 {
  position: absolute;
  top: -2rem;
  margin: 0 auto;
  font-family: "Staatliches";
  color: rgb(10,10,10);
}

h2 {
  font-family: "Inter";
  
}

body {
  margin-top: 10rem;
  
  scroll-behavior: smooth;
  
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 2.5rem;
  justify-content: center;
  align-items: center;
  
  perspective: 1000px;
}

.wave {
  animation: wave ease-in-out;  
    animation-timeline: view();
  animation-range: entry 0% cover 40%; 
}

.carpet {
  animation: carpet ease-in-out;
    animation-timeline: view();
  animation-range: entry 0% cover 40%; 
}

.from-middle {
  animation: from-middle ease-in-out;
    animation-timeline: view();
  animation-range: entry 0% cover 40%; 
}

.sides:nth-of-type(2n) {
  animation: side-left ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%; 
}

.sides:nth-of-type(2n + 1) {
  animation: side-right ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%; 
}

div {
  width: 6rem;
  height: 3rem;
  background-color: black; 
}

div:nth-of-type(2n + 3) {
  width: 12rem;
}

div:nth-of-type(8n + 3) {
  width: 3rem;
}

div:nth-of-type(11n) {
  width: 20rem;
}

@keyframes wave {
  from {
    opacity: 0;
    transform: rotateX(90deg) translateZ(300px) translateY(-500px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes carpet {
  from {
    opacity: 0;
    transform: rotateX(90deg) translateZ(-300px) translateY(500px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes side-left {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes side-right {
  from {
    opacity: 0;
    transform: translateX(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes from-middle {
  0% {
    opacity: 0;
    transform: translateY(-200px)
  }
  70% {
    opacity: 1;
    transform: translateX(200px) translateY(100px)
  }
  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}