@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');

html, body {
  margin: 0;
  height: 100%;
  background-color: #fdf6e4;
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 20px;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}

h1 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, 328px);
  grid-auto-rows: 300px;
}

.step {
  overflow: hidden;
  font-size: 1rem;
}

.step .desc {
  color: grey;
}

.step .desc b {
  color: black;
}

.step .prev {
  height: 240px;
  position: relative;
}

.eye {
  top: 50%;
  left: 50%;
  width: 133px;
  height: 105px;
  position: absolute;
  border: 1px solid black;
  transform: translate(-50%, -50%);
}

.eye.one {
  border: 0;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  background-color: white;
}

.eye.two {
  box-shadow: 
    inset -5px 30px 0px -20px rgba(0,0,0,0.5),
    inset -5px 60px 0px -20px rgba(0,0,0,0.1),
    /* bottom */
    0px 22px 0px -15px black,
    0px 2px 0px 1px #fdf6e4,
    0px 12px 0px -5px black,
    /* top */
    -6px 3px 0px 0px #fdf6e4,
    2px -10px 0px 0px black,
    -3px -7px 0px 0px black,
    0px -6px 0px 0px black,
    8px -12px 0px 0px black,
    /* eyebrows */
    -65px -65px 0px -25px #fdf6e4,
    -55px -62px 0px -30px black,
    -35px -80px 0px -25px #fdf6e4,
    -30px -70px 0px -25px black,
    -12px -90px 0px -15px #fdf6e4,
    -5px -75px 0px -20px black,
    25px -85px 0px -15px #fdf6e4,
    30px -69px 0px -20px black,
    55px -70px 0px -15px #fdf6e4,
    50px -50px 0px -20px black;
}

.eye.three {
  overflow: hidden;
  box-shadow: 
    inset -12px 0px 5px -10px rgba(0, 13, 65, 0.6),
    inset 0px 30px 6px -20px rgba(0, 13, 65, 0.6),
    inset -5px 60px 15px -20px rgba(0, 50, 159, 0.2),
    /* bottom */
    0px 22px 0px -15px black,
    0px 2px 0px 1px #fdf6e4,
    0px 12px 0px -5px black,
    /* top */
    -6px 3px 0px 0px #fdf6e4,
    2px -10px 0px 0px black,
    -3px -7px 0px 0px black,
    0px -6px 0px 0px black,
    8px -12px 0px 0px black,
    /* eyebrows */
    -65px -65px 0px -25px #fdf6e4,
    -55px -62px 0px -30px black,
    -35px -80px 0px -25px #fdf6e4,
    -30px -70px 0px -25px black,
    -12px -90px 0px -15px #fdf6e4,
    -5px -75px 0px -20px black,
    25px -85px 0px -15px #fdf6e4,
    30px -69px 0px -20px black,
    55px -70px 0px -15px #fdf6e4,
    50px -50px 0px -20px black;
}

.eye.three::before {
  content: '';
  top: 42%;
  left: 54%;
  width: 60%;
  height: 90%;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: lightskyblue;
  border: 5px solid black;
}

.eye.four::before {
  background-image:
    radial-gradient(circle at center, rgb(18, 49, 116) calc(20.5% - 1px), transparent 20.5%),
    radial-gradient(circle at center, rgb(48, 92, 193) calc(25% - 1px), transparent 25%),
    radial-gradient(circle at center, rgb(185,246,248) calc(50% - 1px), transparent 50%),
    linear-gradient(to bottom, lightskyblue 50%, rgb(64, 120, 206) 75%);
  background-size: 100%, 100%, 110% 100%, 100%;
  background-position: -1px 1px, center, 50% 30px, center;
  background-repeat: no-repeat;
  box-shadow:
    inset -3px 34px 0px -30px rgb(254, 254, 254),
    inset 0px 55px 0px -30px rgb(18, 50, 122);
}

.eye.five::before {
  box-shadow:
    inset -3px 34px 0px -30px rgb(254, 254, 254),
    inset 0px 55px 10px -30px rgb(18, 50, 122);
}

.eye.five::after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: 
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.9) 10%,
      transparent 10%
    ),
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.9) 10%,
      transparent 10%
    ),
    radial-gradient(
      circle at center,
      white 6%,
      transparent 6%
    ),
    radial-gradient(
      circle at center,
      white 15%,
      transparent 15%
    ),
    radial-gradient(
      circle at center,
      rgb(95, 106, 246) 12%,
      transparent 12%
    ),
    radial-gradient(
      circle at center,
      rgb(95, 106, 246) 5%,
      transparent 5%
    ),
    radial-gradient(
      circle at center,
      rgba(116, 125, 249, 0.658) 3%,
      transparent 3%
    );
  background-size: 100% 70%, 100% 70%, 100%, 100%, 100%, 100%, 100%;
  background-position: -35px 23px, 43px 18px, -5px 30px, -18px -20px, -15px -30px, 30px -40px, -1px -26px;
}

.eye.six {
  box-shadow: 
    inset -12px 0px 5px -10px rgba(0, 13, 65, 0.6),
    inset 0px 30px 6px -20px rgba(0, 13, 65, 0.6),
    inset -5px 60px 15px -20px rgba(0, 50, 159, 0.2),
    /* bottom */
    0px 22px 0px -15px black,
    0px 2px 0px 1px #fdf6e4,
    0px 12px 0px -5px black,
    /* top */
    -6px 3px 0px 0px #fdf6e4,
    2px -10px 0px 0px black,
    -3px -7px 0px 0px black,
    0px -6px 0px 0px black,
    8px -12px 0px 0px black,
    /* eyebrows */
    -65px -65px 0px -25px #fdf6e4,
    -55px -62px 0px -30px black,
    -35px -80px 0px -25px #fdf6e4,
    -30px -70px 0px -25px black,
    -12px -90px 0px -15px #fdf6e4,
    -5px -75px 0px -20px black,
    25px -85px 0px -15px #fdf6e4,
    30px -69px 0px -20px black,
    55px -70px 0px -15px #fdf6e4,
    50px -50px 0px -20px black,
    /* shade */
    0px -15px 3px 30px #fdf6e4,
    0px 20px 5px 0px rgb(252, 202, 140);
}

.eye.six::after {
  filter: blur(0.5px);
  background-image: 
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.9) 10%,
      transparent 10%
    ),
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.9) 10%,
      transparent 10%
    ),
    radial-gradient(
      circle at center,
      white 6%,
      transparent 6%
    ),
    radial-gradient(
      circle at center,
      white 15%,
      transparent 15%
    ),
    radial-gradient(
      circle at center,
      rgb(95, 106, 246) 12%,
      transparent 12%
    ),
    radial-gradient(
      circle at center,
      rgb(95, 106, 246) 5%,
      transparent 5%
    ),
    radial-gradient(
      circle at center,
      rgba(116, 125, 249, 0.658) 3%,
      transparent 3%
    ),
    radial-gradient(circle at center,white 1%, transparent 1%),
    radial-gradient(circle at center,white 2%, transparent 2%),
    radial-gradient(circle at center,white 2%, transparent 2%);
  background-size:
    100% 70%, 
    100% 70%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position: 
    -35px 23px,
    43px 18px,
    -5px 30px,
    -18px -20px,
    -15px -30px,
    30px -40px,
    -1px -26px,
    30px -32px,
    25px -26px,
    23px -20px;
}

.eye.six::before {
  background-image:
    radial-gradient(circle at center, rgb(18, 49, 116) calc(20.5% - 1px), transparent 20.5%),
    radial-gradient(circle at center, rgb(48, 92, 193) calc(25% - 1px), transparent 25%),
    radial-gradient(ellipse at center, rgb(185,246,248) calc(50% - 1px), transparent 50%),
    repeating-linear-gradient(to right, white, white 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at center, rgb(185,246,248) calc(50% - 1px), transparent 50%),
    linear-gradient(to bottom, lightskyblue 50%, rgb(64, 120, 206) 75%);
  background-size: 100%, 100%, 100% 40%, 68% 30%, 110% 100%, 100%;
  background-position: -1px 1px, center, 50% 80%, 50% 100%, 50% 30px, center;
  box-shadow:
    inset -3px 34px 0px -30px rgb(254, 254, 254),
    inset 0px 55px 10px -30px rgb(18, 50, 122),
    40px 30px 0px -35px white,
    -52px 20px 0px -32px white;
}

.eye.seven {
  left: 60%;
  transform: translate(-50%, -50%) scale(0.3) rotateZ(-10deg);
}

.eye.seven.inverse {
  left: 40%;
  transform: translate(-50%, -50%) scaleX(-1) scale(0.3) rotateZ(-10deg);
}

.head {
  top: 80%;
  left: 50%;
  width: 58%;
  height: 150%;
  border-radius: 45% 45% 0 0 / 40% 40% 0 0;
  border: 1px solid black;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: rgb(91, 51, 20);
}

.head::after {
  content: '';
  top: 6%;
  left: 50%;
  width: 70%;
  height: 50%;
  position: absolute;
  border-radius: 50%;
  background-color: #fdf6e4;
  transform: translate(-50%, 0%);
  background-image: 
    linear-gradient(
      to right,
      #fdf6e4 40%,
      transparent 40%,
      transparent 60%,
      #fdf6e4 60%
    ),
    linear-gradient(
      to bottom,
      transparent 75%,
      black 75%,
      black 76%,
      transparent 76%
    );
}

.head::before {
  content: '';
  top: 50%;
  left: 50%;
  width: 20%;
  height: 50%;
  transform: translate(-50%, -50%);
  background-color: #fdf6e4;
  position: absolute;
}

.hero {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.hero .container {
  flex-grow: 1;
  max-width: 700px;
}

.hero .eye.one {
  border: 1px solid black;
}

small {
  font-size: 14px;
  color: rgb(186, 153, 140);
}