@layer framie, test;

@font-face {
  font-family: "Poetsen One";
  src: url("../../Files/fonts/Poetsen_One/PoetsenOne-Regular.ttf");
  font-weight: 100 1000;
  font-display: swap;
}

@layer test {
  .wrapper-id-title {
    width: 400px;
    aspect-ratio: 1;
  }

  /* (1) */
  .max-volume {
    --dimention: 110px;
    --pos-top: 50%;
    --pos-left: 40%;

    & > #level {
      --bg-col: #000;
      width: var(--dimention);
      height: var(--dimention);
      position: absolute;
      top: var(--pos-top);
      left: var(--pos-left);
      transform: translateY(-50%);
      border-radius: 50%;
      box-shadow: 0 0 0 10px var(--main-col), 0 0 0 20px var(--bg-col),
        0 0 0 30px var(--main-col), 0 0 0 40px var(--bg-col),
        0 0 0 50px var(--main-col);

      &::before {
        content: "";
        background-color: var(--bg-col);
        width: 100%;
        height: 200%;
        position: absolute;
        top: -50%;
        left: -50%;
      }
    }

    & > #speaker {
      position: absolute;
      top: var(--pos-top);
      left: calc(var(--pos-left) - 171px);
      transform: translateY(-50%);
      border: calc(var(--dimention) * 0.96) solid var(--main-col);
      border-color: transparent var(--main-col) transparent transparent;
      z-index: 3;

      &::before {
        content: "";
        width: 100px;
        height: 55px;
        background-color: var(--main-col);
        border-radius: 20px;
        position: absolute;
        top: var(--pos-top);
        left: -20px;
        transform: translateY(-50%);
        z-index: 3;
      }
    }
  }

  /* (2) */
  .pyramids {
    --main-col: red;
    --main-bg-col: #444;
    --brdr-wdth: 100px;
    --border-inline-wdth: 120px;

    & > :nth-child(1) {
      width: 0;
      border: var(--brdr-wdth) solid transparent;
      border-inline-width: var(--border-inline-wdth);
      border-bottom-color: #f8f0d0;
      position: absolute;
      top: calc(50% - var(--brdr-wdth) * 0.5);
      left: 50%;
      translate: -50% -75%;
      z-index: 3;
    }

    & > :nth-child(2) {
      width: 0;
      border: var(--brdr-wdth) solid transparent;
      border-inline-width: var(--border-inline-wdth);
      border-bottom-color: #e2c684;
      position: absolute;
      top: calc(50% - var(--brdr-wdth) * 0.5);
      left: 50%;
      translate: -50% -50%;
      z-index: 2;
    }

    & > :nth-child(3) {
      width: 0;
      border: var(--brdr-wdth) solid transparent;
      border-inline-width: var(--border-inline-wdth);
      border-bottom-color: #64ab9c;
      position: absolute;
      top: calc(50% - var(--brdr-wdth) * 0.5);
      left: 50%;
      translate: -50% -25%;
      z-index: 1;
    }
  }

  /* (3) */
  .line-circle {
    --main-col: orange;
    --main-bg-col: #1c4340;

    & > * {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
    }

    & > :nth-child(1) {
      --bg-col: #978036;
      background-color: var(--bg-col);
      border-radius: 50%;
      width: 200px;
      height: 200px;
    }

    & > :nth-child(2) {
      --bg-col: #f2ab3d;
      background-color: var(--bg-col);
      width: 260px;
      height: 20px;
      clip-path: circle(60%);
      /* border-radius: 30%; */
      box-shadow: 0 0 0 20px var(--main-bg-col), 0 0 0 40px var(--bg-col),
        0 0 0 60px var(--main-bg-col);
    }
  }

  /* (4) */
  .letter-b {
    --main-col: red;
    --main-bg-col: #6792cc;
    --wdth: 70px;
    --brdr-col: #263b7f;

    display: grid;
    place-content: center;

    & > :nth-child(1) {
      width: 250px;
      height: 250px;
      border: var(--wdth) solid var(--brdr-col);
      border-top-color: transparent;
      border-radius: 50%;
      rotate: -45deg;

      &::before {
        content: "";
        width: 250px;
        height: 250px;
        background-color: var(--brdr-col);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        clip-path: rect(50% 0 0 var(--wdth));
      }
    }
  }

  /* (5) */
  .piano {
    --main-bg-col: #978036;
    --main-col: blueviolet;

    display: grid;
    place-content: center;

    & > .box {
      --spacing: 8px;
      background-color: #181818;
      width: 300px;
      height: 200px;
      border-radius: 15px;
      padding: var(--spacing);
      gap: var(--spacing);

      display: grid;
      grid: 75% / repeat(7, 1fr);
      align-content: end;

      & > * {
        background-color: #fefefe;
        border-radius: 10px;

        &.l-clipped {
          clip-path: polygon(25% 0, 25% 50%, 0 50%, 0 100%, 100% 100%, 100% 0);
        }

        &.r-clipped {
          clip-path: polygon(0 0, 75% 0, 75% 50%, 100% 50%, 100% 100%, 0 100%);
        }

        &.lr-clipped {
          clip-path: polygon(
            25% 0,
            25% 50%,
            0 50%,
            0 100%,
            100% 100%,
            100% 50%,
            75% 50%,
            75% 0
          );
        }
      }
    }
  }

  /* (6) */
  .virus {
    --main-bg-col: #183b3a;
    --main-col: #e53e31;

    display: grid;
    place-content: center;

    & > .body {
      --bg-col: #eaa23d;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: var(--bg-col);
      position: relative;

      & > .scar {
        background: #877936;
        position: absolute;
        border-radius: 50%;
        padding: var(--scar-padding);
        z-index: 1;

        &:nth-child(1) {
          --scar-padding: 20px;
          top: 25%;
          left: 25%;
        }
        &:nth-child(2) {
          --scar-padding: 10px;
          top: 75%;
          left: 45%;
        }
        &:nth-child(3) {
          --scar-padding: 5px;
          top: 25%;
          left: 80%;
        }
      }

      & > .tube {
        --height: 15px;
        width: 300px;
        height: var(--height);
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;

        & > :only-child {
          background: var(--bg-col);
          width: 80%;
          height: 100%;
          position: relative;
          left: 16%;
          animation: virus-move linear 3s infinite alternate;

          &::before,
          &::after {
            content: "";
            --d: -8px;
            width: var(--height);
            height: var(--height);
            background: var(--bg-col);
            position: absolute;
            border-radius: 50%;
          }
          &::before {
            left: var(--d);
          }
          &::after {
            right: var(--d);
          }
        }

        &:nth-last-of-type(1) {
          transform: rotate(30deg);
        }
        &:nth-last-of-type(2) {
          transform: rotate(-30deg);
        }
        &:nth-last-of-type(3) {
          transform: rotate(-90deg);
        }
      }
    }
  }
  /* virus motion */
  @keyframes virus-move {
    from {
      left: 16%;
    }
    to {
      left: 10%;
    }
  }

  /* (7) */
  .mountain {
    --main-bg-col: #242e57;
    --main-col: #25d366;

    display: grid;
    place-content: center;

    & > :only-child {
      --d: 300px;
      width: var(--d);
      height: var(--d);
      background: #fff0b7;
      border-radius: 50%;
      display: grid;
      place-content: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        border: 250px solid transparent;
        border-bottom-color: #fe544c;
        position: absolute;
        bottom: -40px;
        right: -170px;
      }

      &::after {
        content: "";
        border: 250px solid transparent;
        border-bottom-color: #fe544c;
        position: absolute;
        bottom: -140px;
        right: 10px;
      }
    }
  }

  /* (8) */
  .circle-overlap {
    --main-bg-col: #000;
    --main-col: red;

    display: flex;
    flex-wrap: wrap;
    place-content: center;

    & > * {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }

    & > :nth-child(1) {
      /* left: 8%; */
      background: #7b3f61;
    }

    & > :nth-child(2) {
      /* right: 8%; */
      background: #e78381;

      &::before {
        content: "";
        display: block;
        background-color: var(--main-bg-col);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: -10.5%;
        translate: -50% -50%;
        width: 100%;
        height: 100%;
      }
    }
  }

  /* (9) */
  .pokemon {
    --main-bg-col: #5eaba0;
    --main-col: #d04c64;

    display: grid;
    place-content: center;

    & > :only-child {
      --R: 200px;
      display: grid;
      place-content: center;
      background: #6e1023;
      width: var(--R);
      height: var(--R);
      border-radius: 50%;
      position: relative;
      animation: pokemon-glow 1s linear infinite alternate;

      &::after {
        content: "";
        background: #fad893;
        width: calc(var(--R) * 0.25);
        height: calc(var(--R) * 0.25);
        border-radius: 50%;
        border: 10px solid #6e1023;
        z-index: 1;
      }

      &::before {
        content: "";
        border-radius: 50%;
        background: linear-gradient(
          #d04c64 0% 48%,
          transparent 45% 55%,
          #fff 55%
        );
        width: calc(var(--R) * 1.1);
        height: calc(var(--R) * 1.1);
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
      }
    }
  }

  @keyframes pokemon-glow {
    from {
      filter: drop-shadow(0 0 50px #f4ed86);
    }
    to {
      filter: drop-shadow(0 0 0 #f4ed86);
    }
  }

  /* (10) */
  .floors {
    display: grid;
    place-content: center;

    & > .building {
      width: 300px;
      height: 300px;
      display: grid;
      grid:
        [r1-s] "f3 f3 f3" 1fr [r1-e]
        [r2-s] "p1 p2 p3" 1fr [r2-e]
        [r3-s] "p1 p2 p3" 1fr [r3-e]
        [r4-s] "p1 p2 p3" 1fr [r4-e]
        [r5-s] "p1 p2 p3" 1fr [r5-e]
        [r6-s] "p1 p2 p3" 1fr [r6-e]
        [r7-s] "f1 f1 f1" 1fr [r7-e]
        / [c1] 1fr [c2] 1fr [c3] 1fr [c4];

      & > [class|="pillar"] {
        background: #fff;
        width: 20px;
        justify-self: center;

        &[class$="-1"] {
          grid-area: p1;
          background: linear-gradient(#fff 55%, transparent 55%);
        }
        &[class$="-2"] {
          grid-area: p2;
          background: linear-gradient(transparent 45%, #fff 45%);
        }
        &[class$="-3"] {
          grid-area: p3;
        }
      }

      & > [class|="floor"] {
        background: #a70072;
        border-radius: 20px;
        height: 25px;

        &[class$="-1"] {
          grid-area: f1;
          align-self: start;
        }
        &[class$="-2"] {
          grid-area: r4-s / c1 / r4-e / c4;
          rotate: -7deg;
        }
        &[class$="-3"] {
          grid-area: f3;
          align-self: end;
        }
      }
    }
  }

  /* (11) */
  .loading {
    --main-bg-col: #cf9567;
    --main-col: red;

    display: grid;
    place-content: center;

    & > :only-child {
      --R: 300px;
      background: #964e5e;
      width: var(--R);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      display: flex;
      flex-wrap: wrap;
      place-content: center;

      &::before {
        content: "";
        width: 40%;
        aspect-ratio: 1 / 1;
        border-radius: inherit;
        border: calc(var(--R) * 0.2) solid #f4ed86;
        border-block-color: transparent;
        rotate: -45deg;
      }
    }
  }

  /* (12) */
  .two-balls {
    --main-bg-col: #58336b;
    --main-col: orange;

    display: grid;
    place-content: center;

    & > :only-child {
      --direction: -1; /* 1 | -1 */
      display: grid;
      grid: none / 1fr 1fr;
      gap: 50px;
      place-content: center;

      &::before,
      &::after {
        content: "";
        width: 120px;
        aspect-ratio: 1;
        background: #f1ee81;
        border-radius: 50%;
      }

      &::before {
        animation: shadow-up 3s linear infinite alternate;
        box-shadow: 0 calc(-10px * var(--direction)) #964e5e,
          0 calc(-20px * var(--direction)) #964e5e,
          0 calc(-30px * var(--direction)) #964e5e,
          0 calc(-40px * var(--direction)) #964e5e,
          0 calc(-50px * var(--direction)) #964e5e,
          0 calc(-60px * var(--direction)) #964e5e,
          0 calc(-70px * var(--direction)) #964e5e;
      }

      &::after {
        animation: shadow-down 3s linear infinite alternate;
        box-shadow: 0 calc(10px * var(--direction)) #cf9567,
          0 calc(20px * var(--direction)) #cf9567,
          0 calc(30px * var(--direction)) #cf9567,
          0 calc(40px * var(--direction)) #cf9567,
          0 calc(50px * var(--direction)) #cf9567,
          0 calc(60px * var(--direction)) #cf9567,
          0 calc(70px * var(--direction)) #cf9567;
      }
    }
  }
  /* balls shadow motion */
  @keyframes shadow-up {
    from {
      --direction: 1;
      box-shadow: 0 calc(-10px * var(--direction)) #964e5e,
        0 calc(-20px * var(--direction)) #964e5e,
        0 calc(-30px * var(--direction)) #964e5e,
        0 calc(-40px * var(--direction)) #964e5e,
        0 calc(-50px * var(--direction)) #964e5e,
        0 calc(-60px * var(--direction)) #964e5e,
        0 calc(-70px * var(--direction)) #964e5e;
    }
    to {
      --direction: 1;
      box-shadow: 0 calc(10px * var(--direction)) #cf9567,
        0 calc(20px * var(--direction)) #cf9567,
        0 calc(30px * var(--direction)) #cf9567,
        0 calc(40px * var(--direction)) #cf9567,
        0 calc(50px * var(--direction)) #cf9567,
        0 calc(60px * var(--direction)) #cf9567,
        0 calc(70px * var(--direction)) #cf9567;
    }
  }
  @keyframes shadow-down {
    from {
      --direction: -1;
      box-shadow: 0 calc(-10px * var(--direction)) #964e5e,
        0 calc(-20px * var(--direction)) #964e5e,
        0 calc(-30px * var(--direction)) #964e5e,
        0 calc(-40px * var(--direction)) #964e5e,
        0 calc(-50px * var(--direction)) #964e5e,
        0 calc(-60px * var(--direction)) #964e5e,
        0 calc(-70px * var(--direction)) #964e5e;
    }
    to {
      --direction: -1;
      box-shadow: 0 calc(10px * var(--direction)) #cf9567,
        0 calc(20px * var(--direction)) #cf9567,
        0 calc(30px * var(--direction)) #cf9567,
        0 calc(40px * var(--direction)) #cf9567,
        0 calc(50px * var(--direction)) #cf9567,
        0 calc(60px * var(--direction)) #cf9567,
        0 calc(70px * var(--direction)) #cf9567;
    }
  }

  /* (13) */
  .windmill {
    --main-bg-col: #181818;
    --main-col: green;

    display: grid;
    place-content: center;

    & > :only-child {
      animation: windmill-rotate linear 5s infinite;

      & > * {
        --R: 150px;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;

        &::before,
        &::after {
          content: "";
          width: var(--R);
          aspect-ratio: 1;
          border-radius: 50%;
        }

        &::before {
          clip-path: inset(0 0 50% 0);
        }
        &::after {
          clip-path: inset(50% 0 0 0);
        }
      }

      & > :nth-child(1) {
        rotate: 90deg;

        &::before,
        &::after {
          background: #6472fc;
        }
      }

      & > :nth-child(2) {
        &::before,
        &::after {
          background: #f3e695;
        }
      }
    }
  }
  /* windmill rotate */
  @keyframes windmill-rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  /* (14) */
  .bg-effect {
    --main-col: red;
    --rotate: x -90deg;

    background-image: url("../../Files/images/ass_logo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    & > img {
      max-width: 65%;
      position: relative;
      rotate: var(--rotate);
      transition: all 300ms ease-in;
      translate: 0% -20%;
      transform-origin: bottom;
      filter: drop-shadow(0 0 100px #f00);
    }

    &:hover {
      --rotate: none;
    }
  }

  /* (15) */
  .bosom {
    --main-bg-col: #602f6c;
    --main-col: #ee61b3;

    display: grid;
    place-content: center;

    & > :only-child {
      --R: 200px;
      width: var(--R);
      height: var(--R);
      background: #f8ec7c;
      border-radius: 50% 50% 0 0;
      position: relative;
      top: -25px;

      &::before,
      &::after {
        content: "";
        position: absolute;
        background: #f8ec7c;
        width: 50%;
        height: 50%;
        top: 70%;
        border-radius: 0 0 50% 0;
      }
      &::before {
        rotate: 90deg;
      }
      &::after {
        left: 0;
      }
    }
  }

  /* (16) */
  .icecream-cones {
    --main-bg-col: #e3506d;
    --main-col: #1eff00;

    display: grid;
    place-content: center;
    place-items: center;

    & > :only-child {
      --R: 70px;
      position: absolute;
      display: grid;
      grid: 1fr 1fr / 1fr 1fr;
      place-content: center;
      place-items: center;
      gap: calc(var(--R) * 0.25);
      width: 50%;
      height: 50%;

      & > * {
        background: #dadad7;
        width: var(--R);
        height: var(--R);
        border-radius: 50%;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          background: #dadad7;
          width: 100%;
          height: 100%;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 85%);
          right: 50%;
        }

        &:nth-child(2) {
          rotate: y 180deg;
        }
        &:nth-child(3) {
          rotate: x 180deg;
        }
        &:nth-child(4) {
          rotate: z 180deg;
        }
      }
    }
  }

  /* (17) */
  .lamp {
    --main-bg-col: #e48e66;
    --main-col: #00c8ff;

    & > :only-child {
      margin: auto;
      position: relative;
      background: #682d5f;
      width: 3%;
      height: 70%;
      bottom: -38%;

      &::after {
        content: "";
        width: 100px;
        border: 50px solid transparent;
        border-bottom-color: #fffbd9;
        border-block-width: 150px;
        position: absolute;
        top: -30%;
        left: 50%;
        translate: -50% -50%;
      }
    }
  }

  /* (18) */
  .XX {
    --main-bg-col: #e3516e;

    display: grid;
    place-content: center;

    & > :only-child {
      --brdr-wdth: 100px;
      --gap: 50px;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        rotate: 90deg;
        translate: -50% -50%;
        border: var(--brdr-wdth) solid #fcde8b;
      }
      &::before {
        height: var(--gap);
        border-inline-color: transparent;
      }
      &::after {
        width: var(--gap);
        border-block-color: transparent;
      }
    }
  }

  /* (19) */
  .olympe {
    --main-bg-col: #66284b;

    & > * {
      --R: 140px;
      position: absolute;
      border: 30px solid;
      border-radius: 50%;
      width: var(--R);
      height: var(--R);
      rotate: 45deg;
      translate: -50% -50%;

      &:nth-child(1) {
        border-color: #f1ce48;
        border-bottom-color: transparent;
        top: 30%;
        left: 50%;
      }
      &:nth-child(2) {
        border-color: #cd7249;
        border-right-color: transparent;
        top: 50%;
        left: 30%;
      }
      &:nth-child(3) {
        border-color: #d36bec;
        border-left-color: transparent;
        top: 50%;
        left: 70%;
      }
      &:nth-child(4) {
        border-color: #fbfcfa;
        border-top-color: transparent;
        top: 70%;
        left: 50%;
      }
    }
  }

  /* (20) */
  .cool-A {
    --main-bg-col: #fefefe;
    --main-col: red;

    display: grid;
    place-content: center;

    & > :only-child {
      position: relative;
      width: 35px;
      height: 35px;
      background: #0287c6;
      border-radius: 50%;

      &::before,
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        translate: -50% -50%;
      }
      &::before {
        top: 50%;
        width: 330px;
        height: 250px;
        background: #2e2825;
        clip-path: polygon(
          0 100%,
          40% 0,
          60% 0,
          100% 100%,
          80% 100%,
          50% 20%,
          20% 100%
        );
      }
      &::after {
        --outer-wdth: 13px;
        --inner-wdth: calc(var(--outer-wdth) * 2);
        --outer-col: #fff;
        --inner-col: #0287c6;
        top: -150px;
        width: 400px;
        height: 400px;
        border: var(--outer-wdth) solid var(--outer-col);
        rotate: 45deg;
        background-image: linear-gradient(
            to top,
            var(--inner-col) var(--inner-wdth),
            transparent var(--inner-wdth)
          ),
          linear-gradient(
            to left,
            var(--inner-col) var(--inner-wdth),
            transparent var(--inner-wdth)
          ),
          linear-gradient(
            to top,
            var(--outer-col) calc(var(--outer-wdth) + var(--inner-wdth)),
            transparent var(--outer-wdth)
          ),
          linear-gradient(
            to left,
            var(--outer-col) calc(var(--outer-wdth) + var(--inner-wdth)),
            transparent var(--outer-wdth)
          );

        clip-path: polygon(100% 100%, 60% 100%, 40% 80%, 80% 20%, 100% 40%);
      }
    }
  }

  /* (21) */
  .pac-man {
    --main-bg-col: #000;
    --main-col: green;

    display: flex;
    justify-content: center;
    align-items: center;

    & > :only-child {
      background: #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 30px 0 0 0 #fff, -30px 0 0 0;

      &::before,
      &::after {
        content: "";
        width: 70px;
        height: 70px;
        position: absolute;
        translate: 0 -50%;
      }
      &::before {
        left: 10%;
        top: 50%;
        background: conic-gradient(transparent 90deg, #dee047 90deg);
        border-radius: 50%;
        rotate: 45deg;
      }
      &::after {
        right: 10%;
        background: #c24e4d;
        border-radius: 50% 50% 0 0;
        clip-path: polygon(
          100% 100%,
          100% 0,
          0 0,
          0 100%,
          16.6% 80%,
          33.3% 100%,
          49.8% 80%,
          66.5% 100%,
          83% 80%,
          100% 100%
        );
      }
    }
  }

  /* (22) */
  .wave {
    --main-bg-col: #ead6b8;
    --main-col: red;

    display: flex;
    align-items: center;
    justify-content: center;

    & > * {
      --w: 20px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: var(--w) solid;
      border-color: #bb7055 #bb7055 transparent transparent;
      position: relative;

      &:nth-child(2) {
        rotate: -45deg;
      }
      &:nth-child(2n + 1) {
        top: 5px;
        rotate: 135deg;
      }
      &:first-child {
        left: 15.25px;
      }
      &:last-child {
        right: 15px;
      }

      &::before,
      &::after {
        content: "";
        background-color: #bb7055;
        width: var(--w);
        height: var(--w);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: var(--d) var(--d);
      }
      &::before {
        --d: -220%;
      }
      &::after {
        --d: 120%;
      }
    }
  }

  /* (23) */
  .cool-underline {
    display: grid;
    place-content: center;

    & > p > span {
      transition: background-size 500ms linear;
      background-image: linear-gradient(to top, red 10%, transparent 10%);
      background-repeat: no-repeat;
      background-size: 0;

      &:hover {
        color: orange;
        background-size: 100%;
      }
    }
  }

  /* (24) */
  .notes {
    --main-bg-col: #000;
    --main-col: orange;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    & > * {
      --w: 10px;
      width: var(--w);
      height: calc(var(--w) * 10);
      background: #fb5f58;
      position: relative;

      &:not(:nth-child(2)) {
        &::after {
          content: "";
        }
      }

      &:first-child::after {
        width: calc(var(--w) * 7);
      }

      &:nth-child(3) {
        background: #a24742;
      }

      &:last-child::after {
        box-shadow: 0 20px 0 0 #fb5f58;
      }

      &::before,
      &::after {
        background: inherit;
        position: absolute;
      }
      &::before {
        content: "";
        height: calc(var(--w) * 3.5);
        width: calc(var(--w) * 4.5);
        border-radius: 50%;
        bottom: -20%;
        left: -35px;
      }
      &::after {
        width: calc(var(--w) * 4);
        height: var(--w);
      }
    }
  }

  /* (25) */
  .ukulele {
    --main-bg-col: #f4ab3c;
    --main-col: blueviolet;
    position: relative;

    & > * {
      position: absolute;
      translate: -50% -50%;
      top: 50%;
      background-color: #988134;

      &::before,
      &::after {
        content: "";
        position: absolute;
        translate: -50% -50%;
        top: 50%;
      }

      &:nth-child(1) {
        z-index: 1;
        --R: 100px;
        border-radius: 50%;
        width: calc(var(--R) * 1.6);
        height: calc(var(--R) * 1.6);
        left: 22%;

        &::before {
          left: 155px;
          border-radius: 50%;
          width: calc(var(--R) * 1.25);
          height: calc(var(--R) * 1.25);
          background-image: radial-gradient(
            #21443c 30%,
            #f4ab3c 30% 38%,
            #988134 38% 100%
          );
        }

        &::after {
          background-color: #21443c;
          width: calc(var(--R) * 0.15);
          height: calc(var(--R) * 0.5);
          border-radius: 20%;
          right: 90px;
        }
      }

      &:nth-child(2) {
        right: -30px;
        width: 150px;
        height: 25px;
        background-color: #21443c;

        &::before {
          border-radius: 20%;
          width: 40px;
          height: 130%;
          right: -35%;
          background-color: #988134;
          background-image: linear-gradient(#21443c, #21443c),
            linear-gradient(#21443c, #21443c);
          background-repeat: no-repeat;
          background-position: 50% 25%, 50% 75%;
          background-size: 60% 15%;
        }
      }
    }
  }

  /* (26) */
  .circle-of-circles {
    --main-bg-col: #6890ce;
    --main-col: blue;

    display: flex;
    justify-content: center;
    align-items: center;

    & > :only-child {
      --brdr-rad: 12px;
      width: 250px;
      aspect-ratio: 1;
      border: var(--brdr-rad) solid #194380;
      border-radius: 50%;
      position: relative;

      & > *,
      &::before,
      &::after {
        box-sizing: content-box;
        border-radius: 50%;
        border: var(--brdr-rad) solid #194380;
        position: absolute;
        translate: -50% -50%;
      }

      &::before,
      &::after {
        content: "";
      }

      & > *,
      &::before {
        top: 0;
        width: 20%;
        height: 20%;
        background-color: #6890ce;
        background-image: radial-gradient(#194380 25%, #6890ce 25%);
        background-repeat: no-repeat;
        background-position: center;
      }

      & > :nth-child(1) {
        top: 25%;
        left: 5%;
      }
      & > :nth-child(2) {
        top: 25%;
        left: 95%;
      }
      & > :nth-child(3) {
        top: 70%;
        left: 97%;
      }
      & > :nth-child(4) {
        top: 70%;
        left: 3%;
      }

      &::after {
        --r: 80%;
        top: 127%;
        background-image: linear-gradient(#6890ce 30%, transparent 30%);
        background-repeat: no-repeat;
        border-color: #194380 transparent transparent;
        width: var(--r);
        height: var(--r);
      }
    }
  }

  .brandat {
    display: flex;
    justify-content: center;
    align-items: center;

    & > :only-child {
      width: 80%;
      aspect-ratio: 1;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      /* background-image: linear-gradient(orange, white); */

      & > :only-child {
        color: #333;
        font-size: 1.3rem;
      }
    }
  }

  #cool-shap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    contain: layout;

    /* &::before {
      content: "";
      width: 10%;
      aspect-ratio: 1;
      background-color: orange;
      border-radius: 100px;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: -1;
      transform: translateZ(-10px);
    } */

    & > .circle {
      position: absolute;
      border: 5px solid;
      border-radius: 100%;
      animation: shape-rotate 1s infinite linear;
      width: 70%;
      height: 70%;

      &._1 {
        border-color: red;
        rotate: z 60deg;
      }
      &._2 {
        border-color: green;
        rotate: z 120deg;
      }
      &._3 {
        border-color: blue;
        rotate: z 180deg;
      }
    }
  }
  @keyframes shape-rotate {
    to {
      transform: rotateX(360deg);
    }
  }

  #hover-effect {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 100px 50px;

    & > .item {
      background-color: orange;
      padding: 15px 10px 10px;
      border-radius: 100px;
      opacity: 0.5;
      font-size: 20px;
      cursor: pointer;

      &:hover {
        opacity: 1;
      }
    }
  }

  #dead-pool {
    background-color: #f4ac3d;
    display: flex;
    justify-content: center;
    align-items: center;

    & > :only-child {
      background-color: #94283a;
      width: 300px;
      height: 300px;
      border-radius: 1000px;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        background-color: inherit;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        height: 100%;
        width: 55px;
        z-index: 100;
      }

      & > :only-child {
        background-color: #010101;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 85%;
        aspect-ratio: 1;
        border-radius: inherit;

        &::before,
        &::after {
          content: "";
          background-color: #fff;
          position: absolute;
          top: 35%;
          width: 40px;
          aspect-ratio: 1;
          border-radius: inherit;
          clip-path: inset(50% 0 0 0);
          /* clip-path: xywh(50% 0 100% 100%); */
        }

        &::before {
          left: 15%;
          rotate: z 30deg;
        }

        &::after {
          right: 15%;
          rotate: z -30deg;
        }
      }
    }
  }

  #theme-toggle {
    --bg-col: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-col);

    & > #themeSwitch {
      --switch-d: 150px;
      width: var(--switch-d);
      height: calc(var(--switch-d) * 0.5);
      background-color: #f4b12c;
      border-radius: 1000px;
      position: relative;
      cursor: pointer;
      transition: background-color 500ms;

      &.dark {
        background-color: #000;

        &::before {
          background-image: url(./imgs/moon.svg);
          left: 75%;
        }
      }

      &::before {
        content: "";
        width: 40%;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 25%;
        translate: -50% -50%;
        border-radius: inherit;
        background-image: url(./imgs/sun.svg);
        background-color: orangered;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 60%;
        transition: background-image 500ms allow-discrete, left 500ms;
      }
    }
  }
}