@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap");

/**** Reset ****/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**** Création des variables CSS ****/

:root {
    --hue: 120;
    --top: hsl(0 0% 80%);
    --top-c: hsl(0 0% 70%);
    --bottom-c: hsl(var(--hue) 100% 50%);
    --blue: hsl(var(--hue) 100% 30%);
    --shadow: hsl(var(--hue) 100% 20%);
}

/**** Style général de la page ****/

body {
    width: 100%;
    height: 100vh;
    background: radial-gradient(
      circle,
      hsl(var(--hue) 60% 50%),
      hsl(var(--hue) 60% 30%),
      hsl(var(--hue) 60% 20%),
      rgba(25, 54, 25)
    );
}

.container {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateY(40deg) rotateX(33deg);
    animation: animate 5s infinite alternate ease-in-out -7s;
}

.layer::after {
    content: "Only\a    css!";
    position: absolute;
    top: 50px;
    font-size: 150px;
    font-family: "Nunito";
    white-space: pre;
    line-height: 80%;
    width: 100%;
    height: 100%;
    letter-spacing: -2px;
    text-align: center;
    color: var(--top-c);
    text-shadow: 4px 0 10px rgba(0, 0, 0, 0.129);
}

.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

.layer:nth-child(1)::after {
    transform: translateZ(0px);
}

.layer:nth-child(2)::after {
    transform: translateZ(-2px);
}

.layer:nth-child(3)::after {
    transform: translateZ(-4px);
}

.layer:nth-child(4)::after {
    transform: translateZ(-6px);
}

.layer:nth-child(5)::after {
  transform: translateZ(-8px);
}
.layer:nth-child(6)::after {
    transform: translateZ(-10px);
}

.layer:nth-child(7)::after {
    transform: translateZ(-12px);
}

.layer:nth-child(8)::after {
    transform: translateZ(-14px);
}

.layer:nth-child(9)::after {
    transform: translateZ(-16px);
}

.layer:nth-child(10)::after {
    transform: translateZ(-18px);
}

.layer:nth-child(11)::after {
    transform: translateZ(-20px);
}

.layer:nth-child(12)::after {
    transform: translateZ(-22px);
}

.layer:nth-child(13)::after {
    transform: translateZ(-24px);
}

.layer:nth-child(14)::after {
    transform: translateZ(-26px);
}

.layer:nth-child(15)::after {
    transform: translateZ(-28px);
}

.layer:nth-child(16)::after {
    transform: translateZ(-30px);
}

.layer:nth-child(17)::after {
    transform: translateZ(-32px);
}

.layer:nth-child(18)::after {
    transform: translateZ(-34px);
}

.layer:nth-child(19)::after {
    transform: translateZ(-36px);
}

.layer:nth-child(20)::after {
    transform: translateZ(-38px);
}

.layer:first-child::after {
    color: var(--top);
    text-shadow: none;
}

.layer:nth-child(n+10)::after {
    -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11)::after {
  -webkit-text-stroke: 15px var(--bottom-c);
  text-shadow: 6px 0 6px var(--shadow), 5px 5px 5px var(--shadow) 0 6px 6px var(--shadow);
}

.layer:nth-child(n+12)::after {
    -webkit-text-stroke: 15px var(--blue);
}

/**** Animation Animate ****/

@keyframes animate {
  100% {
    transform: rotateY(-20deg) rotateX(-40deg);
  }
}