Biblioteca de código (Uiverse / Galaxy)

<button class="cta">
  <span>Contact Us &nbsp;</span>
  <svg viewBox="0 0 13 10" height="10px" width="15px">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
  </svg>
</button>

<style>
/* From Uiverse.io by 0x-Sarthak  - Tags: button, hover, rounded, animated, hover button */
.cta {
  position: relative;
  margin: auto;
  padding: 11.5px 18px;
  transition: all 0.2s ease;
  border: 3px solid #552da8;
  border-radius: 50px;
  background: #552da8;
  cursor: pointer;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border-radius: 50px;
  background: white;
  width: 45px;
  height: 45px;
  transition: all 0.8s ease;
}

.cta span {
  position: relative;
  font-family: Montserrat;
  font-size: 18px;
  color: white;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.5s ease;
}

.cta:hover:before {
  width: 100%;
  background: #1c1c1c;
}

.cta:hover svg {
  transform: translateX(0);
  transition: all 2s ease;
}

.cta:active {
  transform: scale(0.95);
  transition: all 2s ease;
}

</style>
    

<!-- From Uiverse.io by 0x3ther  - Tags: simple, button, social media, hover button, tailwind, tailwindcss -->
<div class="flex items-center justify-center h-full">
  <button
    class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Facebook
  </button>
  <button
    class="text-white bg-gradient-to-r from-red-500 via-red-600 to-red-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    YouTube
  </button>
  <button
    class="text-white bg-gradient-to-r from-blue-400 via-blue-500 to-blue-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-400/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Twitter
  </button>
  <button
    class="text-white bg-gradient-to-r from-pink-500 via-pink-600 to-pink-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
    type="button"
  >
    Instagram
  </button>
</div>


    

<!-- From Uiverse.io by 0x3ther  - Tags: icon, animation, button, navigation, hover effect, tailwindbutton, tailwindcss -->
<div class="flex items-center gap-2">
  <button
    class="relative inline-flex items-center justify-center gap-2 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white hover:bg-[#F5F5F5] h-9 rounded-md px-3 group"
  >
    <svg
      class="lucide lucide-arrow-left"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m12 19-7-7 7-7"></path>
      <path d="M19 12H5"></path>
    </svg>
    <span class="origin-left scale-0 transition-transform group-hover:scale-100"
      >Back</span
    >
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#06B6D4] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#06B6D4"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
      ></path>
      <path
        d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
      ></path>
      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
    </svg>
    Dashboard
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#60A5FA] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-newspaper text-blue-400 dark:text-blue-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#60A5FA"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"
      ></path>
      <path d="M18 14h-8"></path>
      <path d="M15 18h-5"></path>
      <path d="M10 6h8v4h-8V6Z"></path>
    </svg>
    Articles
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FACC14] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-sticky-note text-yellow-400 dark:text-yellow-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#FACC14"
      fill="none"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"
      ></path>
      <path d="M15 3v6h6"></path>
    </svg>
    Notes
  </button>
  <button
    class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FB923C] h-9 rounded-md px-3"
  >
    <svg
      class="lucide lucide-star text-orange-400 dark:text-orange-600"
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="2"
      stroke="#FB923C"
      fill="#FB923C"
      viewBox="0 0 24 24"
      height="22"
      width="22"
      xmlns="http://www.w3.org/2000/svg"
    >
      <polygon
        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
      ></polygon>
    </svg>
    Reviews
  </button>
</div>


    

<a class="brutalist-button" href="/">
  <div class="ms-logo">
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
    <div class="ms-logo-square"></div>
  </div>
  <div class="button-text">
    <span>Get it from</span>
    <span>Microsoft</span>
  </div>
</a>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, microsoft, animated, brutalism, brutalist, glare effect */
.brutalist-button {
  display: flex;
  align-items: center;
  width: 169px;
  height: 60px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border: 3px solid #fff;
  outline: 3px solid #000;
  box-shadow: 6px 6px 0 #00a4ef;
  transition: all 0.1s ease-out;
  padding: 0 15px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.brutalist-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  z-index: 1;
  transition: none;
  /* Initially hide the pseudo-element */
  opacity: 0;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.brutalist-button:hover::before {
  /* Show the pseudo-element on hover */
  opacity: 1;
  animation: slide 2s infinite;
}

.brutalist-button:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 #000;
  background-color: #000;
  color: #fff;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.brutalist-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 #00a4ef;
  background-color: #fff;
  color: #000;
  border-color: #000;
}

/* Rest of the CSS remains the same */

.ms-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
  position: relative;
  z-index: 1;
}

.brutalist-button:hover .ms-logo {
  transform: rotate(-10deg) scale(1.1);
}

.brutalist-button:active .ms-logo {
  transform: rotate(10deg) scale(0.9);
}

.ms-logo-square {
  width: 100%;
  height: 100%;
}

.ms-logo-square:nth-child(1) {
  background-color: #f25022;
}
.ms-logo-square:nth-child(2) {
  background-color: #7fba00;
}
.ms-logo-square:nth-child(3) {
  background-color: #00a4ef;
}
.ms-logo-square:nth-child(4) {
  background-color: #ffb900;
}

.button-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: transform 0.2s ease-out;
  position: relative;
  z-index: 1;
}

.brutalist-button:hover .button-text {
  transform: skew(-5deg);
}

.brutalist-button:active .button-text {
  transform: skew(5deg);
}

.button-text span:first-child {
  font-size: 11px;
  text-transform: uppercase;
}

.button-text span:last-child {
  font-size: 16px;
  text-transform: uppercase;
}

</style>
    

<a href="/" class="brutalist-button">
  <div class="content-wrapper">
    <div class="claude-logo">
      <span class="starburst">✷</span>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>Claude 3.5</span>
    </div>
  </div>
</a>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, microsoft, animated, brutalism, brutalist, glare effect */
.brutalist-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3d19c;
  border: 3px solid #000000;
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  position: relative;
  box-shadow: 4px 4px 0px #000000;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 166px;
  height: 150px;
}

.brutalist-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

.brutalist-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.claude-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #eb6c22;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    margin-bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
  transform: rotate(0deg) scale(1);
}

.starburst {
  font-size: 48px;
  color: #ffffff;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0.8s;
}

.button-text span:first-child {
  font-size: 14px;
  font-weight: normal;
}

.button-text span:last-child {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brutalist-button:hover .content-wrapper {
  transform: translateY(-10px);
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg) scale(0.8);
  }
  to {
    transform: rotate(360deg) scale(0.8);
  }
}

.brutalist-button:hover .claude-logo {
  animation: slow-spin 12s linear infinite;
  margin-bottom: 5px;
}

.brutalist-button:not(:hover) .claude-logo {
  transform: rotate(0deg) scale(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    margin-bottom 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: 0;
}

.brutalist-button:hover .starburst {
  font-size: 38px;
}

.brutalist-button:hover .button-text {
  opacity: 1;
  max-height: 50px;
  margin-top: 2px;
}

.brutalist-button:not(:hover) .content-wrapper,
.brutalist-button:not(:hover) .starburst,
.brutalist-button:not(:hover) .button-text {
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-delay: 0s;
}

.brutalist-button::before,
.brutalist-button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background-color: rgba(200, 183, 128, 0.7);
  border-radius: 50%;
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  z-index: 1;
}

.brutalist-button::before {
  left: -20px;
  transform: translate(-50%, -50%);
}

.brutalist-button::after {
  right: -20px;
  transform: translate(50%, -50%);
}

.brutalist-button:hover::before {
  animation: criss-cross-left 0.8s both;
  animation-direction: alternate;
  opacity: 1;
}

.brutalist-button:hover::after {
  animation: criss-cross-right 0.8s both;
  animation-direction: alternate;
  opacity: 1;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}

.brutalist-button:hover .button-text {
  color: #ffffff;
}

.brutalist-button:hover .button-text span:last-child {
  color: #4e432d;
}

</style>
    

<div class="button-container">
  <a href="/" class="brutalist-button openai button-1">
    <div class="openai-logo">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        class="openai-icon"
      >
        <path
          fill="#10A37F"
          d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.0993 3.8558L12.5907 8.3829 14.6108 7.2144a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.3927-.6813zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
        ></path>
      </svg>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>GPT-Omni</span>
    </div>
  </a>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, button hover effect , brutalism, minimalism, openai */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Common styles for both buttons */
.brutalist-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  color: #e5dede;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Styles for the first button */
.button-1 {
  background-color: #063525;
  border: 3px solid #42c498;
  border-radius: 12px;
  box-shadow: 4px 4px 1px #000000;
}

.button-1:hover {
  background-color: #1a5c46;
  border-color: #030504;
  transform: translate(-6px, -6px) rotate(1deg);
  box-shadow: 10px 10px 0 #000000, 15px 15px 20px rgba(64, 164, 122, 0.2);
}

.button-1::before,
.button-1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: 0.6s;
}

.button-1::before {
  left: -100%;
}
.button-1::after {
  left: 100%;
}

.button-1:hover::before {
  animation: swipeRight 1.5s infinite;
}
.button-1:hover::after {
  animation: swipeLeft 1.5s infinite;
}

@keyframes swipeRight {
  100% {
    transform: translateX(200%) skew(-45deg);
  }
}

@keyframes swipeLeft {
  100% {
    transform: translateX(-200%) skew(-45deg);
  }
}

/* Hover effects */
.brutalist-button:hover .openai-logo {
  transform: translateY(-10px);
}

.brutalist-button:hover .openai-icon {
  width: 40px;
  height: 40px;
}

.bruta.brutalist-button:hover .openai-text {
  opacity: 1;
  max-height: 60px;
  margin-top: 8px;
}

/* Styles for the OpenAI logo and text */
.openai-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 3;
}

.openai-icon {
  width: 64px;
  height: 64px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.openai-text {
  font-size: 24px;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 3;
}

.button-text span:first-child {
  font-size: 12px;
  font-weight: normal;
}

.button-text span:last-child {
  font-size: 16px;
}

/* Hover effects */
.brutalist-button:hover .openai-logo {
  transform: translateY(-10px);
}

.brutalist-button:hover .openai-icon {
  width: 40px;
  height: 40px;
}

.brutalist-button:hover .button-text,
.brutalist-button:hover .openai-text {
  opacity: 1;
  max-height: 60px;
  margin-top: 8px;
}

/* Animation for the OpenAI logo */
@keyframes spin-and-zoom {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.brutalist-button:hover .openai-icon {
  animation: spin-and-zoom 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.brutalist-button:hover .openai-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.brutalist-button:active .openai-icon,
.brutalist-button:active .openai-text,
.brutalist-button:active .button-text {
  transform: scale(0.95);
}

</style>
    

<div class="button-container">
  <a href="/" class="brutalist-button openai">
    <div class="openai-logo">
      <svg
        class="openai-icon"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.0993 3.8558L12.5907 8.3829 14.6108 7.2144a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.3927-.6813zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
          fill="#10A37F"
        ></path>
      </svg>
    </div>
    <div class="button-text">
      <span>Powered By</span>
      <span>GPT-Omni</span>
    </div>
  </a>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: button, button hover effect , brutalism, template, minimalism, openai */
.button-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* Adjust this value to increase or decrease space between buttons */
  padding: 20px;
}

.brutalist-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid #000000;
  border-radius: 12px;
  padding: 0;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  position: relative;
  box-shadow: 4px 4px 0px #000000;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 130px;
  width: 130px;
  cursor: pointer;
}

.brutalist-button.openai {
  background-color: #356854;
}

.brutalist-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -150%;
  width: 300%;
  height: 300%;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.brutalist-button.openai::before {
  background-color: #316b58;
}

.brutalist-button.claude::before {
  background-color: #e3d19c;
}

.brutalist-button:hover::before {
  transform: translateX(-50%) scale(1);
}

.brutalist-button:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0px #000000;
}

.brutalist-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

.openai-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.openai-logo {
  align-items: center;
  justify-content: center;
  background-color: #0f1715; /* OpenAI's green color */
  border-radius: 50%; /* This creates the circular background */
}

.openai-icon {
  width: 54px;
  height: 54px;
  fill: #ffffff; /* White color for the SVG */
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.brutalist-button:hover .openai-logo {
  animation: spin 5s linear infinite;
  width: 50px;
  height: 50px;
  top: 28%;
}

.brutalist-button:hover .openai-icon {
  transform: scale(0.6);
}

.button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  z-index: 2;
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
}

.button-text span:first-child {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.button-text span:last-child {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffffff;
}

.brutalist-button:hover .button-text {
  opacity: 1;
  transform: translateY(0);
}

.brutalist-button.openai:hover .button-text {
  color: #d3d3d3;
}

.brutalist-button.openai:hover .button-text span:last-child {
  color: #d6cbbf;
}

@media (hover: hover) and (pointer: fine) {
  .brutalist-button:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0px #000000;
  }
}

</style>
    

<button class="Btn">Click Me</button>
<style>
/* From Uiverse.io by 1osm - Tags: button */
/* Button 1 */
.Btn {
  width: 150px;
  height: 50px;
  background-color: transparent;
  color: white;
  font-weight: bold;
  border-width: 2px;
  border-color: #FF5858;
  border-radius: 20px;
  transition: all 0.3s;
}

.Btn:hover {
  transform: translateY(-10px);
  background-color: #FF5858;
}

.Btn::after {
  transform: translateY(0);
}
</style>

<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
  <p class="Click">Click</p>
  <p class="OnHover">Thanks</p>

</button>

<style>
/* From Uiverse.io by 1osm - Tags: button */
button {
  width: 130px;
  height: 45px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-width: 10px;
  background: linear-gradient(to right, #5f6d7c, #456b8b, #49a6fc);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 10px;
}

button svg {
  height: 40px;
  width: 60px;
  transform: translate(-30px,3px) rotate(90deg);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button .Click {
  transform: translate(20px,-33px);
  font-size: 20px;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button .OnHover {
  transform: translate(-15px,-56px);
  font-size: 20px;
  opacity: 0%;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1)
}

button:hover svg {
  transform: translate(40px,3px) rotate(90deg);
}

button:hover .Click {
  opacity: 0%;
}

button:hover .OnHover {
  opacity: 100%;
}
</style>

<button>
  GLITCH
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button, glitch */
button,button::after {
  padding: 10px 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: transparent;
  position: relative;
}

button::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: 'GLITCH';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

button:hover::after {
  animation: glitch_4011 1s;
  text-shadow: 10 10px 10px black;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;
  background-color: transparent;
  border: 3px solid rgb(0, 255, 213);
}

button:hover {
  text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
}

button:hover {
  background-color: transparent;
  border: 1px solid rgb(0, 255, 213);
  box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
}

@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px,-10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px,10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px,0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px,-10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px,10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px,-10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px,10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px,-10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  100% {
    clip-path: var(--move1);
    transform: translate(0);
  }
}


</style>

<button>
  INPUT
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button */
button {
  /* padding: 5px 10px; */
  height: 50px;
  width: 100px;
  font-size: 20px;
  position: relative;
  border: navajowhite;
  background-color: #222;
  color: aliceblue;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 2px 2px 2px red;
}

button::before {
  content: '';
  height: 10px;
  width: 30px;
  position: absolute;
  background-image: linear-gradient(45deg, salmon,red);
  left: -10px;
  top: 0;
  z-index: -1;
  transition: 0.3s ease-in-out;
  border-radius: 5px;
}

button:hover::before {
  height: 100px;
  width: 100px;
}

button:hover {
  border-radius: 5px;
}

</style>

<button>
  <p class="icon_shadow">HAYABUSA
<svg fill-rule="nonzero" height="40px" width="40px" viewBox="0,0,256,256" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none" font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10" stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero" fill="#ff206e"><g transform="scale(5.12,5.12)"><path d="M9.00586,0c-0.26622,-0.00153 -0.52207,0.10314 -0.71087,0.29084c-0.1888,0.1877 -0.29497,0.44293 -0.29499,0.70916c0,0 -0.00031,2.83655 0.64063,6.42578c0.61624,3.45096 1.81717,7.63635 4.30078,10.82617c-0.03223,0.09658 -0.07,0.1913 -0.09375,0.29102c-0.51237,2.15694 -2.24793,7.75515 -3.67969,9.90234c-0.1714,0.25672 -0.21465,0.5782 -0.11719,0.87109c0.45954,1.38222 1.56103,3.62778 3.01758,6.31836c-0.01566,0.04013 -0.0287,0.08123 -0.03906,0.12305c-0.86684,3.46737 -4.47656,5.34766 -4.47656,5.34766c-0.38199,0.19127 -0.60031,0.60406 -0.54342,1.02745c0.05689,0.42339 0.37644,0.7639 0.79537,0.84755c0,0 4.31619,0.94287 7.71289,-1.3125c0.91656,1.52521 1.87104,3.06527 2.83594,4.55469c0.65113,1.06549 1.71842,1.81101 2.94141,2.05664c0.00065,0 0.0013,0 0.00195,0l3.50781,0.70117c0.12894,0.02568 0.26168,0.02568 0.39062,0l3.50781,-0.70117c1.22163,-0.24407 2.28615,-0.98944 2.9375,-2.05078c0.98284,-1.49004 1.95099,-3.02074 2.87695,-4.53516c3.39115,2.22499 7.67773,1.28711 7.67773,1.28711c0.41893,-0.08365 0.73848,-0.42416 0.79537,-0.84755c0.05689,-0.42339 -0.16143,-0.83618 -0.54342,-1.02745c0,0 -3.60972,-1.88028 -4.47656,-5.34766c-0.00187,-0.00718 -0.00383,-0.01434 -0.00586,-0.02148c1.46264,-2.68934 2.55988,-4.95683 2.99609,-6.45703c0.08216,-0.2834 0.03499,-0.58862 -0.12891,-0.83398c-1.43176,-2.1472 -3.1673,-7.74433 -3.67969,-9.90039c-0.0239,-0.10033 -0.06127,-0.19575 -0.09375,-0.29297c2.48361,-3.18982 3.68454,-7.37521 4.30078,-10.82617c0.64093,-3.58924 0.64063,-6.42578 0.64063,-6.42578c0.00009,-0.27036 -0.10929,-0.52924 -0.3032,-0.71764c-0.19392,-0.1884 -0.45584,-0.29025 -0.72609,-0.28236c-0.36819,0.01085 -0.70062,0.22321 -0.86523,0.55273c0,0 -1.22717,2.45223 -3.06836,5.27539c-1.83801,2.81828 -4.33608,5.97912 -6.53906,7.30664c-0.01664,-0.01026 -0.03357,-0.02003 -0.05078,-0.0293l-4,-2c-0.23724,-0.11863 -0.5119,-0.13815 -0.76353,-0.05427c-0.25164,0.08388 -0.45965,0.26429 -0.57826,0.50153l-0.10547,0.21094l-0.10547,-0.21094c-0.16817,-0.33628 -0.51075,-0.54982 -0.88672,-0.55273c-0.15789,-0.00126 -0.31384,0.03488 -0.45508,0.10547l-4,2c-0.01721,0.00927 -0.03414,0.01904 -0.05078,0.0293c-2.20298,-1.32752 -4.70105,-4.48836 -6.53906,-7.30664c-1.84119,-2.82316 -3.06836,-5.27539 -3.06836,-5.27539c-0.16849,-0.3369 -0.51199,-0.55055 -0.88867,-0.55273zM10.44922,5.48047c0.40281,0.67844 0.33529,0.67075 0.83789,1.44141c1.72202,2.64044 3.92494,5.59777 6.39063,7.38477l-3.50195,2.25781c-1.92627,-2.72329 -3.0125,-6.38833 -3.56641,-9.49023c-0.15981,-0.89493 -0.07317,-0.83633 -0.16016,-1.59375zM39.55078,5.48047c-0.08698,0.75742 -0.00035,0.69882 -0.16016,1.59375c-0.55406,3.10275 -1.64109,6.76867 -3.56836,9.49219l-3.50195,-2.25781c2.46659,-1.78682 4.67004,-4.74549 6.39258,-7.38672c0.5026,-0.77065 0.43508,-0.76296 0.83789,-1.44141zM27.05469,13.64453l2.44922,1.22461l5.24023,3.37891c0.22849,0.20156 0.3928,0.46551 0.46289,0.75977c0.5267,2.2163 1.97899,7.09786 3.70508,9.98047c-0.41087,1.29136 -1.51905,3.66685 -3.10156,6.52734c-0.11737,0.21216 -0.25142,0.44161 -0.37305,0.6582c-0.01256,0.00818 -0.02493,0.01665 -0.03711,0.02539l-2.72266,2.04297c-0.65602,0.49221 -1.4544,0.75781 -2.27539,0.75781h-0.2832c-0.95071,0 -1.87171,0.40914 -2.49414,1.1543c-0.67926,0.81273 -1.96214,1.8457 -2.625,1.8457c-0.66286,0 -1.94574,-1.03297 -2.625,-1.8457c-0.00065,-0.00065 -0.0013,-0.0013 -0.00195,-0.00195c-0.623,-0.7441 -1.54204,-1.15234 -2.49219,-1.15234h-0.2832c-0.82099,0 -1.61937,-0.2656 -2.27539,-0.75781l-2.5957,-1.94727c-0.15289,-0.27378 -0.33972,-0.58094 -0.48633,-0.84766c-1.57979,-2.87411 -2.7014,-5.22715 -3.14648,-6.46875c1.72375,-2.88394 3.17302,-7.75751 3.69922,-9.97266c0.07009,-0.29424 0.23442,-0.55626 0.46289,-0.75781l5.24024,-3.37891l2.41211,-1.20508c-0.17792,0.99687 -0.619,1.95257 -1.23828,2.91016c-1.033,1.622 -2.63797,3.33278 -2.66797,5.42578c-0.054,1.329 0.94872,2.75319 1.76172,3.49219c1.081,0.994 1.65347,2.07444 1.85547,3.52344c0.056,0.429 0.72267,0.41637 0.76367,-0.01562c0.268,-1.571 -0.38119,-3.37231 -1.36719,-4.57031c-2.357,-2.458 -0.04634,-4.32659 1.47266,-6.68359c0.5319,-0.8034 1.01497,-1.75086 1.28711,-2.77344c0.1517,0.03525 0.30954,0.03458 0.46094,-0.00195c0.35062,1.17299 0.9477,2.34876 1.27344,2.77734c1.519,2.357 3.82966,4.22459 1.47266,6.68359c-0.986,1.198 -1.63519,2.99736 -1.36719,4.56836c0.037,0.431 0.70567,0.44562 0.76367,0.01563c0.203,-1.448 0.77447,-2.52944 1.85547,-3.52344c0.489,-0.522 1.13328,-1.14213 1.48828,-2.07813c1.36175,-3.76223 -3.13108,-6.34958 -3.66797,-9.76953zM14.02148,24.43555c-0.28236,-0.0058 -0.554,0.10805 -0.74785,0.31343c-0.19385,0.20538 -0.29182,0.48315 -0.26973,0.7647c0,0 0.10863,1.46594 0.60156,3.09375c0.49293,1.62781 1.34722,3.59721 3.26758,4.32813c0.99298,0.37769 2.03753,0.34296 2.87305,0.26758c0.83552,-0.07538 1.48438,-0.23047 1.48438,-0.23047c0.26102,-0.06188 0.48624,-0.22602 0.62507,-0.45557c0.13883,-0.22954 0.17962,-0.50523 0.11321,-0.76514c0,0 -0.67774,-2.64234 -3.34375,-3.95703c-1.86724,-0.92051 -3.89258,-3.03906 -3.89258,-3.03906c-0.18388,-0.19856 -0.44038,-0.31413 -0.71094,-0.32031zM35.94727,24.4375c-0.2593,0.01386 -0.50305,0.12802 -0.67969,0.31836c0,0 -2.02534,2.11855 -3.89258,3.03906c-2.66601,1.3147 -3.34375,3.95703 -3.34375,3.95703c-0.06641,0.25991 -0.02562,0.5356 0.11321,0.76514c0.13883,0.22954 0.36405,0.39369 0.62507,0.45557c0,0 0.64886,0.15509 1.48438,0.23047c0.83552,0.07538 1.88006,0.11011 2.87305,-0.26758c1.92036,-0.73091 2.77464,-2.70031 3.26758,-4.32812c0.49293,-1.62781 0.60156,-3.09375 0.60156,-3.09375c0.02227,-0.28685 -0.08007,-0.56939 -0.28088,-0.77543c-0.20081,-0.20604 -0.48062,-0.31562 -0.76795,-0.30074zM15.53125,28.05469c0.68725,0.54202 1.36291,1.11611 2.20898,1.5332c0.89522,0.44146 1.43599,1.07873 1.78125,1.61914c-0.67935,0.05639 -1.49476,0.02582 -1.9375,-0.14258c-0.87935,-0.33469 -1.63087,-1.63351 -2.05273,-3.00977zM34.46875,28.05469c-0.42186,1.37626 -1.17338,2.67507 -2.05273,3.00977c-0.44274,0.1684 -1.25815,0.19897 -1.9375,0.14258c0.34526,-0.54041 0.88603,-1.17768 1.78125,-1.61914c0.84608,-0.4171 1.52174,-0.99118 2.20898,-1.5332zM27.99219,33.98633c-0.40904,-0.00235 -0.77828,0.24463 -0.93227,0.62358c-0.15399,0.37895 -0.06169,0.81348 0.23305,1.09712c0.29454,0.29454 0.30273,0.48463 0.31836,0.52344c-0.04939,0.01724 -0.07535,0.04102 -0.25391,0.04102c-0.20398,0.00033 -0.40298,0.06303 -0.57031,0.17969l-1.26953,0.88086c-0.325,0.22538 -0.71016,0.22538 -1.03516,0l-1.26953,-0.88086c-0.16733,-0.11666 -0.36633,-0.17935 -0.57031,-0.17969c-0.17855,0 -0.20452,-0.02378 -0.25391,-0.04102c0.01563,-0.03881 0.02382,-0.2289 0.31836,-0.52344c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273c-0.65827,0.65827 -1.10429,1.48152 -0.91602,2.41602c0.09414,0.46725 0.40294,0.92546 0.82422,1.19336c0.27576,0.17536 0.61685,0.19088 0.94336,0.24219l1.19727,0.83008c0.993,0.68862 2.3234,0.68862 3.31641,0l1.19727,-0.83008c0.32651,-0.05131 0.6676,-0.06683 0.94336,-0.24219c0.42128,-0.2679 0.73008,-0.72611 0.82422,-1.19336c0.18827,-0.93449 -0.25774,-1.75774 -0.91602,-2.41602c-0.18714,-0.19448 -0.44495,-0.30507 -0.71484,-0.30664zM13.35352,37.92188c0.37242,0.65914 0.75112,1.32264 1.15039,2.00586c-1.10139,0.73582 -2.40406,1.03593 -3.54492,1.14258c0.85618,-0.7877 1.75413,-1.82683 2.39453,-3.14844zM36.69336,38.01172c0.63728,1.27795 1.51135,2.28918 2.34766,3.05859c-1.12109,-0.1048 -2.39911,-0.39549 -3.48828,-1.10352c0.39398,-0.66374 0.77367,-1.31354 1.14063,-1.95508zM17.21094,40.41211c0.75295,0.34535 1.54863,0.58789 2.38672,0.58789h0.2832c0.37786,0 0.72803,0.16165 0.95898,0.4375c0.4435,0.53063 1.0736,1.23111 1.86523,1.77344c-0.67877,0.0717 -1.43942,0.09054 -2.00781,0.18359c-0.9398,0.15372 -1.86873,-0.28465 -2.36328,-1.10937zM32.63867,40.49219l-1.19336,1.90625c-0.52279,0.83632 -1.49107,1.24907 -2.45703,1.04883c-0.49569,-0.10254 -1.17427,-0.11834 -1.76172,-0.19727c0.8235,-0.54705 1.47803,-1.26937 1.93359,-1.81445c0.22957,-0.27484 0.5797,-0.43555 0.95898,-0.43555h0.2832c0.78054,0 1.52637,-0.20718 2.23633,-0.50781zM25,45c1.25356,0 2.55018,0.19239 3.58398,0.40625c0.37725,0.0782 0.75597,0.09392 1.12891,0.07227c-0.35918,0.42637 -0.84664,0.72726 -1.40039,0.83789c0,0.00065 0,0.0013 0,0.00195l-3.3125,0.66211l-3.31055,-0.66211h-0.00195c-0.58016,-0.11692 -1.08502,-0.44352 -1.44727,-0.90234c0.25811,0.0054 0.5181,-0.00611 0.7793,-0.04883c1.15191,-0.18858 2.62598,-0.36719 3.98047,-0.36719z"></path></g></g></svg></p>
</button>
<style>
/* From Uiverse.io by 212004ALJI - Tags: button */
button {
  --color2: #ff206e;
  padding: 15px 30px;
  border-radius: 18px;
  border: 1px solid #282828;
  background-color: #212121;
  box-shadow: inset 2px 2px 5px rgb(22, 22, 22);
  position: relative;
  overflow: hidden;
}

button::after {
  content: '';
  height: 30px;
  width: 60px;
  position: absolute;
  box-shadow: 0 0 20px 10px var(--color2);
  bottom: -45px;
  left: 21%;
  transition: 0.4s 0.3s;
}

button svg {
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  --move7: inset(0 0 0 0);
  clip-path: inset(50% 50% 50% 50%);
  margin-left: 5px;
  transition: 0.4s;
}

button:hover svg {
  clip-path: var(--move7);
  animation: glitch_4011 0.4s;
  animation-timing-function: steps(2, end);
}

button:hover:after {
  bottom: -40px;
  width: 100px;
}

button .icon_shadow {
  display: flex;
  align-items: center;
  transition: 0.4s;
  color: var(--color2);
  font-weight: bold;
  filter: drop-shadow(0 0 10px var(--color2));
}

button:hover .icon_shadow {
  filter: drop-shadow(0 0 10px var(--color2));
}

@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px,-10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px,10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px,0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px,-10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px,10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px,-10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px,10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px,-10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px,10px);
  }

  100% {
    transform: translate(0);
  }
}

</style>

<button>This is a button :)</button>
<style>
/* From Uiverse.io by 2Fl00rian6 - Tags: button */
button {
 background-color: rgb(20, 87, 244);
 border: 1px solid rgb(20, 87, 244);
 padding: 12px 20px;
 border-radius: 7px;
 transition: .3s;
 color: #fff;
}

button:hover {
 border: 1px solid rgb(20, 87, 244);
 background-color: transparent;
 color: rgb(20, 87, 244);
}

button:focus {
 box-shadow: 0px 0px 0px 5px rgba(20, 87, 244, 0.37), 0px 0px 0px 10px rgba(20, 87, 244, 0.38);
 outline: none;
}
</style>

<button class="button"></button>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: button, hover, smooth, dark, code, hover button, button hover effect , 2d button */
.button,
.button::before {
  box-sizing: border-box;
  --col-orange: #d17842;
  --col-white: #fff;
  --col-dark: #212121;
  cursor: pointer;
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 600;
  fill: var(--col-white);
  color: var(--col-white);

  color: var(col-dark);
  font-family: "arial";
}
.button {
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: var(--col-orange);
  padding: 8px 50px;
  position: relative;
  transition: all 200ms;
  border-radius: 25px;
  z-index: 99;
}

.button:hover {
  border-color: transparent;
  color: var(--col-dark);
  background: transparent;
}

.button::before {
  height: fit-content;
  content: "great work🥳";
  position: absolute;
  left: 40px;
  width: 0;
  overflow: hidden;
  transition: all 550ms;
  text-wrap: nowrap;
  z-index: -1;
}

.button:hover::before {
  width: 135px;
  color: var(--col-white);
}

.button::after {
  content: "hover me";
  position: relative;
}

.button:hover::after {
  display: none;
}

</style>
    

<div class="notification">
  <div class="bell-container">
    <div class="bell"></div>
  </div>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: icon, animation, notification, button, rotate, light&dark, hover effect, hover button */
/*making bell shape with one div */
.bell {
  border: 2.17px solid white;
  border-radius: 10px 10px 0 0;
  width: 15px;
  height: 17px;
  background: transparent;
  display: block;
  position: relative;
  top: -3px;
}
.bell::before,
.bell::after {
  content: "";
  background: white;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2.17px;
}
.bell::before {
  top: 100%;
  width: 20px;
}
.bell::after {
  top: calc(100% + 4px);
  width: 7px;
}
/*container main styling*/
.notification {
  background: transparent;
  border: none;
  padding: 15px 15px;
  border-radius: 50px;
  cursor: pointer;
  transition: 300ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*notifications number with before*/
.notification::before {
  content: "1";
  color: white;
  font-size: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/*container background hover effect*/
.notification:hover {
  background: rgba(170, 170, 170, 0.062);
}
/*container animations*/
.notification:hover > .bell-container {
  animation: bell-animation 650ms ease-out 0s 1 normal both;
}
/*bell ring and scale animation*/
@keyframes bell-animation {
  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-15deg);
    scale: 1.1;
  }
  60% {
    transform: rotate(10deg);
    scale: 1.1;
  }
  80% {
    transform: rotate(-10deg);
  }
  0%,
  100% {
    transform: rotate(0deg);
  }
}

</style>
    

<button alt="BECOME A MEMBER">
  <i>B</i>
  <i>E</i>
  <i>C</i>
  <i>O</i>
  <i>M</i>
  <i>E</i>
  <i>&nbsp;</i>
  <i>A</i>
  <i>&nbsp;</i>
  <i>M</i>
  <i>E</i>
  <i>M</i>
  <i>B</i>
  <i>E</i>
  <i>R</i>
</button>


<style>
/* From Uiverse.io by A3zra - Tags: button, 3d cool effect, 3d hover */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  position: relative;
  padding: 0 20px;
  font-size: 18px;
  text-transform: uppercase;
  border: 0;
  background-color: #E15331;
  border-radius: 12px;
  overflow: hidden;
  transition: 31ms cubic-bezier(.5, .7, .4, 1);
  width: 300px;
}

button:before {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 15px;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 1;
}

button:active {
  box-shadow: none;
  transform: translateY(7px);
  transition: 35ms cubic-bezier(.5, .7, .4, 1);
}

button:hover:before {
  transition: all .0s;
  transform: translateY(100%);
  opacity: 0;
  color: #E15331;
}

button i {
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  font-style: normal;
  transition: all 2s ease;
  transform: translateY(-20px);
  opacity: 0;
}

button:hover i {
  transition: all .2s ease;
  transform: translateY(0px);
  opacity: 1;
}

button:hover i:nth-child(1) {
  transition-delay: 0.045s;
}

button:hover i:nth-child(2) {
  transition-delay: calc(0.045s * 3);
}

button:hover i:nth-child(3) {
  transition-delay: calc(0.045s * 4);
}

button:hover i:nth-child(4) {
  transition-delay: calc(0.045s * 5);
}

button:hover i:nth-child(6) {
  transition-delay: calc(0.045s * 6);
}

button:hover i:nth-child(7) {
  transition-delay: calc(0.045s * 7);
}

button:hover i:nth-child(8) {
  transition-delay: calc(0.045s * 8);
}

button:hover i:nth-child(9) {
  transition-delay: calc(0.045s * 9);
}

button:hover i:nth-child(10) {
  transition-delay: calc(0.045s * 10);
}

</style>

<!-- From Uiverse.io by AKAspidey01  - Tags: simple, animation, button, #button, tailwind, button hover effect  -->
<button
  class="relative border-2 border-black group hover:border-green-500 w-12 h-12 duration-500 overflow-hidden"
  type="button"
>
  <p
    class="font-Manrope text-3xl h-full w-full flex items-center justify-center text-black duration-500 relative z-10 group-hover:scale-0"
  >
    ×
  </p>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 group-hover:top-9 duration-500 top-12 left-0"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:left-9 duration-500 left-12"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:right-9 duration-500 right-12"
  ></span>
  <span
    class="absolute w-full h-full bg-green-500 rotate-45 group-hover:bottom-9 duration-500 bottom-12 right-0"
  ></span>
</button>


    

<button class="button">
  <div class="button-inner-curve">
    <div class="icon">
      <svg
        class=""
        xml:space="preserve"
        style="enable-background:new 0 0 512 512"
        viewBox="0 0 24 24"
        y="0"
        x="0"
        height="20"
        width="20"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <g fill="#000">
            <path
              class=""
              data-original="#000000"
              opacity="1"
              fill="#000000"
              d="M14.22 21.63c-1.18 0-2.85-.83-4.17-4.8l-.72-2.16-2.16-.72c-3.96-1.32-4.79-2.99-4.79-4.17 0-1.17.83-2.85 4.79-4.18l8.49-2.83c2.12-.71 3.89-.5 4.98.58s1.3 2.86.59 4.98l-2.83 8.49c-1.33 3.98-3 4.81-4.18 4.81zM7.64 7.03c-2.78.93-3.77 2.03-3.77 2.75 0 .72.99 1.82 3.77 2.74l2.52.84c.22.07.4.25.47.47l.84 2.52c.92 2.78 2.03 3.77 2.75 3.77s1.82-.99 2.75-3.77l2.83-8.49c.51-1.54.42-2.8-.23-3.45s-1.91-.73-3.44-.22z"
            ></path>
            <path
              class=""
              data-original="#000000"
              opacity="1"
              fill="#000000"
              d="M10.11 14.4c-.19 0-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l3.58-3.59c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-3.58 3.59c-.14.15-.34.22-.53.22z"
            ></path>
          </g>
        </g>
      </svg>
    </div>
    <p>Send Message</p>
  </div>
</button>

<style>
/* From Uiverse.io by AKAspidey01  - Tags: neumorphism, flashy, button */
.button {
  cursor: pointer;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 5px 5px 21px #bababa, -5px -5px 21px #ffffff;
  padding: 5px 5px;
  border-radius: 12px;
  border: 1px solid #000000bc;
}
.button-inner-curve {
  border-radius: 50px;
  background: #e0e0e0;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: inset 5px 5px 15px #bababa, inset -5px -5px 15px #ffffff;
  display: flex;
  padding: 12px 15px 10px 15px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

</style>
    

<!-- From Uiverse.io by AKAspidey01 - Tags: simple, button, hover button -->
<button class="cursor-pointer font-semibold overflow-hidden relative z-100 border border-green-500 group px-8 py-2">
  <span class="relative z-10 text-green-500 group-hover:text-white text-xl duration-500">Magic !</span>
  <span class="absolute w-full h-full bg-green-500 -left-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:left-0 duration-500"></span>
  <span class="absolute w-full h-full bg-green-500 -right-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:right-0 duration-500"></span>
</button>

<div class="main-section">
  <button class="first-button"> Hover Me </button>
  <button class="second-button"> <svg viewBox="0 0 24 24" width="20" height="20" stroke="#ffd300" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg> Add To Cart</button>
</div>

<style>
/* From Uiverse.io by AKAspidey01 - Tags: button, add */
.first-button {
  background: rgb(115, 15, 209);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1em;
  min-height: 60px;
  width: 200px;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.6s;
}

.main-section {
  display: flex;
  flex-direction: column;
  height: 60px;
  overflow: hidden;
  align-items: flex-start;
}

.main-section:hover .second-button , .main-section:hover .first-button {
  transform: translateY(-60px);
}

.second-button {
  background: rgb(209, 15, 57);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1em;
  min-height: 60px;
  width: 200px;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.6s;
}

</style>

<!-- From Uiverse.io by 05akalan57  - Tags: card, border, css effect -->
<div
  class="relative drop-shadow-xl w-48 h-64 overflow-hidden rounded-xl bg-[#3d3c3d]"
>
  <div
    class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-xl inset-0.5 bg-[#323132]"
  >
    CARD
  </div>
  <div class="absolute w-56 h-48 bg-white blur-[50px] -left-1/2 -top-1/2"></div>
</div>


    

<div class="card">
  <img
    src="https://uiverse.io/build/_assets/astronaut-WTFWARES.png"
    alt=""
    class="image"
  />
  <div class="heading">We're on Social Media</div>
  <div class="icons">
    <a href="https://www.instagram.com/uiverse.io/" class="instagram">
      <svg
        width="24"
        height="25"
        viewBox="0 0 24 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.0459 7.5H17.0559M3.0459 12.5C3.0459 9.986 3.0459 8.73 3.3999 7.72C3.71249 6.82657 4.22237 6.01507 4.89167 5.34577C5.56096 4.67647 6.37247 4.16659 7.2659 3.854C8.2759 3.5 9.5329 3.5 12.0459 3.5C14.5599 3.5 15.8159 3.5 16.8269 3.854C17.7202 4.16648 18.5317 4.67621 19.201 5.34533C19.8702 6.01445 20.3802 6.82576 20.6929 7.719C21.0459 8.729 21.0459 9.986 21.0459 12.5C21.0459 15.014 21.0459 16.27 20.6929 17.28C20.3803 18.1734 19.8704 18.9849 19.2011 19.6542C18.5318 20.3235 17.7203 20.8334 16.8269 21.146C15.8169 21.5 14.5599 21.5 12.0469 21.5C9.5329 21.5 8.2759 21.5 7.2659 21.146C6.37268 20.8336 5.56131 20.324 4.89202 19.6551C4.22274 18.9862 3.71274 18.1751 3.3999 17.282C3.0459 16.272 3.0459 15.015 3.0459 12.501V12.5ZM15.8239 11.94C15.9033 12.4387 15.8829 12.9481 15.7641 13.4389C15.6453 13.9296 15.4304 14.392 15.1317 14.7991C14.833 15.2063 14.4566 15.5501 14.0242 15.8108C13.5917 16.0715 13.1119 16.2439 12.6124 16.318C12.1129 16.392 11.6037 16.3663 11.1142 16.2422C10.6248 16.1182 10.1648 15.8983 9.76082 15.5953C9.35688 15.2923 9.01703 14.9123 8.76095 14.4771C8.50486 14.0419 8.33762 13.5602 8.2689 13.06C8.13201 12.0635 8.39375 11.0533 8.99727 10.2487C9.6008 9.44407 10.4974 8.91002 11.4923 8.76252C12.4873 8.61503 13.5002 8.86599 14.3112 9.46091C15.1222 10.0558 15.6658 10.9467 15.8239 11.94Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://twitter.com/uiverse_io" class="x">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19.8003 3L13.5823 10.105L19.9583 19.106C20.3923 19.719 20.6083 20.025 20.5983 20.28C20.594 20.3896 20.5657 20.4969 20.5154 20.5943C20.4651 20.6917 20.3941 20.777 20.3073 20.844C20.1043 21 19.7293 21 18.9793 21H17.2903C16.8353 21 16.6083 21 16.4003 20.939C16.2168 20.8847 16.0454 20.7957 15.8953 20.677C15.7253 20.544 15.5943 20.358 15.3313 19.987L10.6813 13.421L4.64033 4.894C4.20733 4.281 3.99033 3.975 4.00033 3.72C4.00478 3.61035 4.03323 3.50302 4.08368 3.40557C4.13414 3.30812 4.20536 3.22292 4.29233 3.156C4.49433 3 4.87033 3 5.62033 3H7.30833C7.76333 3 7.99033 3 8.19733 3.061C8.38119 3.1152 8.55295 3.20414 8.70333 3.323C8.87333 3.457 9.00433 3.642 9.26733 4.013L13.5833 10.105M4.05033 21L10.6823 13.421"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
    <a href="https://discord.gg/KD8ba2uUpT" class="discord">
      <svg
        width="25"
        height="25"
        viewBox="0 0 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.5989 6.5003H14.2919C14.3851 6.5003 14.4764 6.47427 14.5555 6.42515C14.6347 6.37603 14.6985 6.30577 14.7399 6.2223L15.4179 4.8543C15.4664 4.75358 15.5488 4.67313 15.6506 4.62706C15.7524 4.58098 15.8673 4.57222 15.9749 4.6023C16.6309 4.7903 18.0049 5.2433 19.1029 6.0003C22.9669 8.8973 22.6069 15.3903 22.5779 16.7603C22.5765 16.8444 22.5541 16.9269 22.5129 17.0003C20.5299 20.5003 17.0899 20.5003 17.0899 20.5003L15.9239 18.0743M15.9239 18.0743C16.4479 17.9163 17.0029 17.7253 17.6029 17.5003M15.9239 18.0743C13.4799 18.8093 11.7219 18.8083 9.27791 18.0733M13.5989 6.5003H10.9109C10.8179 6.50039 10.7266 6.47451 10.6475 6.42557C10.5683 6.37664 10.5044 6.30659 10.4629 6.2233L9.77991 4.8533C9.73146 4.75279 9.64925 4.6725 9.54762 4.62644C9.446 4.58038 9.33142 4.57148 9.22391 4.6013C8.56891 4.7893 7.19291 5.2433 6.09391 6.0003C2.23091 8.8973 2.59091 15.3903 2.61991 16.7603C2.62132 16.8445 2.64366 16.9269 2.68491 17.0003C4.66791 20.5003 8.10791 20.5003 8.10791 20.5003L9.27791 18.0733M9.27791 18.0733C8.75491 17.9163 8.19891 17.7253 7.59891 17.5003M10.6009 12.5003C10.6009 12.7655 10.4956 13.0199 10.308 13.2074C10.1205 13.3949 9.86612 13.5003 9.60091 13.5003C9.33569 13.5003 9.08134 13.3949 8.8938 13.2074C8.70626 13.0199 8.60091 12.7655 8.60091 12.5003C8.60091 12.2351 8.70626 11.9807 8.8938 11.7932C9.08134 11.6057 9.33569 11.5003 9.60091 11.5003C9.86612 11.5003 10.1205 11.6057 10.308 11.7932C10.4956 11.9807 10.6009 12.2351 10.6009 12.5003ZM16.6029 12.5003C16.6029 12.7655 16.4976 13.0199 16.31 13.2074C16.1225 13.3949 15.8681 13.5003 15.6029 13.5003C15.3377 13.5003 15.0833 13.3949 14.8958 13.2074C14.7083 13.0199 14.6029 12.7655 14.6029 12.5003C14.6029 12.2351 14.7083 11.9807 14.8958 11.7932C15.0833 11.6057 15.3377 11.5003 15.6029 11.5003C15.8681 11.5003 16.1225 11.6057 16.31 11.7932C16.4976 11.9807 16.6029 12.2351 16.6029 12.5003Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </a>
  </div>
</div>

<style>
/* From Uiverse.io by 0senno  - Tags: simple, card, Discord, smooth */
.card {
  max-width: 500px;
  margin: 0 auto;
  background-color: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.image {
  width: 100%;
  max-width: 180px;
  display: block;
  margin: auto;
}

.heading {
  font-size: 1.5rem;
  color: #fff;
  padding: 20px 0;
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #2e2e2e;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.icons a:hover {
  background-color: #405de6;
}

.icons svg {
  fill: #fff;
  width: 30px;
  height: 30px;
}

</style>
    

<div class="card">
  <div class="banner">
    <span class="banner-text">SUBSCRIBE</span>
    <span class="banner-text">JOIN US</span>
  </div>
  <span class="card__title">Nihilism</span>
  <p class="card__subtitle">Get fresh void to your inbox every week.</p>
  <form class="card__form">
    <input placeholder="Your Email" type="email" required="" />
    <button class="sign-up">Sign up</button>
  </form>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: 3d, card, clean, Brutalism */
.card {
  width: 320px;
  padding: 30px;
  background: #fff;
  border: 8px solid #000;
  box-shadow: 15px 15px 0 #000;
  transform: rotate(-2deg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card:active {
  animation: shake 0.5s ease-in-out;
}
.card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 20px 20px 0 #000;
}
.banner {
  position: absolute;
  top: 3px;
  right: -95px;
  background: #000;
  color: #fff;
  padding: 15px;
  width: 350px;
  text-align: center;
  transform: rotate(45deg);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
  overflow: hidden;
  transition: background 0.5s ease;
}
.banner-text {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 100%;
  position: absolute;
  left: 13%;
  top: 50%;
  transform: translateY(-50%);
}
.banner:hover .banner-text:first-child {
  opacity: 0;
  transform: translateY(-100%);
}
.banner:hover .banner-text:last-child {
  opacity: 1;
  transform: translateY(-40%);
}
.banner-text:last-child {
  opacity: 0;
  transform: translateY(60%);
}
.banner:hover {
  background: red;
}
.card__title {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
  border-bottom: 2px solid #000;
  width: 50%; /* or any other percentage or pixel value */
}
.card__subtitle {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.card__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card__form input {
  padding: 12px;
  border: 4px solid #000;
  font-size: 16px;
  font-family: "Proxima Nova", sans-serif;
  transition: all 0.3s ease;
  background-color: #fff;
}
.card__form input:focus {
  outline: none;
  transform: scale(1.05);
}
.sign-up {
  border: 4px solid #000;
  background: #000;
  color: #fff;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sign-up:hover {
  background: #fff;
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 5px 0 #000;
}
.sign-up:active {
  animation: shake 0.5s ease-in-out;
  transform: translateY(0);
  box-shadow: none;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

</style>
    

<div class="card">
  <div data-text="The Eye of Providence" class="title">
    The Eye of Providence
  </div>
  <div class="eye-of-providence">
    <div class="triangle"></div>
    <div class="eye">
      <div class="eyelid"></div>
      <div class="iris">
        <div class="pupil"></div>
      </div>
    </div>
  </div>
  <div class="spotlight"></div>
  <div class="scan-line"></div>
  <div class="glitch-text">Always Watching</div>
  <div class="footer-text">Obey. Trust. Consume</div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, card, smooth, hover effect, advanced, card hover */
.card {
  background-color: #222;
  border: 10px solid rgb(161, 156, 116);
  padding: 30px;
  width: 400px;
  text-align: center;
  position: relative;
  box-shadow: 9px 11px 1px rgb(0, 0, 0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );

  opacity: 0.3;
  pointer-events: none;
  z-index: 2;
  animation: tv-static 0.2s infinite linear alternate;
}

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  background-size: 100% 2px, 3px 100%;
  animation: tv-flicker 0.15s infinite;
  z-index: 35;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes tv-static {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.1;
  }
}

.eye-of-providence {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 190px solid rgb(198, 181, 113);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}

.card:hover .triangle {
  transform: scale(1.05);
}

.eye {
  width: 90px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #fff, #e6e6e6);
  border-radius: 50%;
  position: absolute;
  top: 90px;
  left: 65px;
  overflow: hidden;
  box-shadow: 0 0 0 10px rgb(115, 112, 92), 15px 15px 0 #000,
    inset -5px -5px 10px rgba(0, 0, 0, 0.2),
    inset 5px 5px 10px rgba(255, 255, 255, 0.3);
  z-index: 2;
  animation: blink 6s infinite cubic-bezier(0.76, 0, 0.24, 1);
}

.pupil {
  width: 16px;
  height: 16px;
  background: rgb(207, 19, 19);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000, #444);
  border: 2px solid #fff;
  position: absolute;
  top: 14px;
  left: 14px;
  box-shadow: inset 0 0 10px rgba(203, 4, 4, 0.2), 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes blink {
  0%,
  90%,
  100% {
    height: 50px;
  }
  92%,
  98% {
    height: 0px;
  }
}

@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.1);
  }
}

.iris {
  width: 45px;
  height: 45px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 22px;
  animation: look-around 6s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes look-around {
  0%,
  100% {
    transform: translate(-2, 10px) scale(1);
  }
  25% {
    transform: translate(-18px, 10px) scale(1.1);
  }
  50% {
    transform: translate(0, 15px) scale(1.2);
  }
  75% {
    transform: translate(20px, 10px) scale(1.1);
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  padding-bottom: 33px;
  text-shadow: 3px 3px #000;
  z-index: 3;
  position: relative;
  display: inline-block;
}

.title::before,
.title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title::before {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.title::after {
  left: -2px;
  text-shadow: -1px 0 blue;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(30px, 9999px, 10px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 78px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  100% {
    top: 1px;
    left: -1px;
    clip: rect(79px, 9999px, 16px, 0);
  }
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "The Eye of Providence";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(34px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 89px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 22px, 0);
  }
  15% {
    clip: rect(75px, 9999px, 4px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(45px, 9999px, 98px, 0);
  }
  30% {
    clip: rect(39px, 9999px, 57px, 0);
  }
  35% {
    clip: rect(90px, 9999px, 65px, 0);
  }
  40% {
    clip: rect(7px, 9999px, 90px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 88px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 23px, 0);
  }
  55% {
    clip: rect(57px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(85px, 9999px, 87px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(32px, 9999px, 56px, 0);
  }
  75% {
    clip: rect(36px, 9999px, 98px, 0);
  }
  80% {
    clip: rect(12px, 9999px, 43px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 76px, 0);
  }
  90% {
    clip: rect(43px, 9999px, 23px, 0);
  }
  95% {
    clip: rect(76px, 9999px, 87px, 0);
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(75, 68, 68, 0.5);
  animation: scan 2.5s linear infinite;
  z-index: 4;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  text-shadow: 3px 3px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "The Eye of Providence";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(34px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(92px, 9999px, 89px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 22px, 0);
  }
  15% {
    clip: rect(75px, 9999px, 4px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 87px, 0);
  }
  25% {
    clip: rect(45px, 9999px, 98px, 0);
  }
  30% {
    clip: rect(39px, 9999px, 57px, 0);
  }
  35% {
    clip: rect(90px, 9999px, 65px, 0);
  }
  40% {
    clip: rect(7px, 9999px, 90px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 88px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 23px, 0);
  }
  55% {
    clip: rect(57px, 9999px, 35px, 0);
  }
  60% {
    clip: rect(85px, 9999px, 87px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 12px, 0);
  }
  70% {
    clip: rect(32px, 9999px, 56px, 0);
  }
  75% {
    clip: rect(36px, 9999px, 98px, 0);
  }
  80% {
    clip: rect(12px, 9999px, 43px, 0);
  }
  85% {
    clip: rect(54px, 9999px, 76px, 0);
  }
  90% {
    clip: rect(43px, 9999px, 23px, 0);
  }
  95% {
    clip: rect(76px, 9999px, 87px, 0);
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(75, 68, 68, 0.5);
  animation: scan 2.5s linear infinite;
  z-index: 4;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.triangle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid #f00;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.title {
  color: rgb(255, 255, 255);
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  text-shadow: 3px 3px #000;
  z-index: 3;
}

.glitch-text {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 2px 2px #000;
  z-index: 3;
}

.glitch-text::before,
.glitch-text::after {
  content: "Always Watching";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 3px;
  text-shadow: -3px 0 #f00;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -3px;
  text-shadow: -3px 0 #0ff;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.footer-text {
  color: #fff;
  font-size: 14px;
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  position: relative;
  z-index: 3;
}

.footer-text::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 50px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

</style>
    

<div class="card">
  <div class="content">
    <div class="name">Nihilist</div>
    <div class="handle">@0xNihilist</div>
    <div class="title">
      <span class="emoji">😊</span> Happy<br />
      Product Designer
    </div>
  </div>
  <div class="dots orange-dots"></div>
  <div class="dots pink-dots"></div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, card, light */
.card-container {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #ffa07a 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #ffa07a 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #ffa07a 25%, transparent 25%),
    linear-gradient(45deg, #ffa07a 25%, transparent 25%);
  background-size: 100px 100px;
  background-color: #ffffff;
  perspective: 1000px;
}

.card {
  width: 400px;
  background-color: rgba(223, 216, 179, 0.9);
  border-radius: 20px;
  position: relative;
  border: 3px solid #000;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

.card:hover {
  transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 20px 20px 0 rgba(0, 0, 0, 0.2);
}

.card .content {
  padding: 30px;
  padding-top: 60px;
}

.card .name {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card .handle {
  position: absolute;
  top: 0;
  right: 20px;
  background-color: #f4c430;
  padding: 10px 20px;
  border-radius: 0 0 15px 15px;
  border: 2px solid #000;
  border-top: none;
  font-weight: bold;
}

.card .title {
  font-size: 18px;
}

.card .emoji {
  font-size: 24px;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(-30deg);
  pointer-events: none;
}

.card .name,
.card .title {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.card:hover .name {
  transform: translateZ(30px);
}

.card:hover .title {
  transform: translateZ(20px);
}

.card .handle {
  transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

.card:hover .handle {
  transform: translateZ(40px) translateY(-5px);
  background-color: #ffdb58;
}

.card .emoji {
  display: inline-block;
  transition: transform 0.3s ease-out;
}

.card:hover .emoji {
  transform: translateZ(50px) rotate(15deg) scale(1.2);
}

@keyframes glitch {
  0% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(-5px, 5px);
  }
  20% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(5px, -5px);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
    transform: translate(-5px, 5px);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(5px, -5px);
  }
  80% {
    clip-path: inset(15% 0 70% 0);
    transform: translate(-5px, 5px);
  }
  100% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(5px, -5px);
  }
}

.card::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  z-index: -1;
}

.card:hover::after {
  opacity: 0.1;
}

</style>
    

<div class="card">
  <span class="card__title">Newsletter</span>
  <p class="card__content">
    Get existential crisis delivered straight to your inbox every week.
  </p>
  <form class="card__form">
    <input required="" type="email" placeholder="Your life" />
    <button class="card__button">Click me</button>
  </form>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: newsletter, card, light, box-shadow, hover button, cool card, brutalism */
.card {
  width: 300px;
  padding: 20px;
  background: #fff;
  border: 6px solid #000;
  box-shadow: 12px 12px 0 #000;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translate(-5px, -5px);
  box-shadow: 17px 17px 0 #000;
}

.card__title {
  font-size: 32px;
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
  position: relative;
  overflow: hidden;
}

.card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 3px;
  background-color: #000;
  transform: translateX(-100%);
  transition: transform 0.3s;
}

.card:hover .card__title::after {
  transform: translateX(0);
}

.card__content {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  margin-bottom: 20px;
}

.card__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card__form input {
  padding: 10px;
  border: 3px solid #000;
  font-size: 16px;
  font-family: inherit;
  transition: transform 0.3s;
  width: calc(100% - 26px); /* Adjust for padding and border */
}

.card__form input:focus {
  outline: none;
  transform: scale(1.05);
  background-color: #000;
  color: #ffffff;
}

.card__button {
  border: 3px solid #000;
  background: #000;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  left: 20%;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
  width: 50%;
  height: 100%;
}

.card__button::before {
  content: "Sure?";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 105%;
  background-color: #5ad641;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.card__button:hover::before {
  transform: translateY(0);
}

.card__button:active {
  transform: scale(0.95);
}

@keyframes glitch {
  0% {
    transform: translate(2px, 2px);
  }
  25% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(-2px, 2px);
  }
  75% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
}

.glitch {
  animation: glitch 0.3s infinite;
}

</style>
    

<div class="brutalist-card">
  <div class="brutalist-card__header">
    <div class="brutalist-card__icon">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
        ></path>
      </svg>
    </div>
    <div class="brutalist-card__alert">Warning</div>
  </div>
  <div class="brutalist-card__message">
    This is a brutalist card with a very angry button. Proceed with caution,
    you've been warned.
  </div>
  <div class="brutalist-card__actions">
    <a class="brutalist-card__button brutalist-card__button--mark" href="#"
      >Mark as Read</a
    >
    <a class="brutalist-card__button brutalist-card__button--read" href="#"
      >Okay</a
    >
  </div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: icon, minimalist, notification, card, hover, brutalist */
.brutalist-card {
  width: 320px;
  border: 4px solid #000;
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 10px 10px 0 #000;
  font-family: "Arial", sans-serif;
}

.brutalist-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
}

.brutalist-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  padding: 0.5rem;
}

.brutalist-card__icon svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
}

.brutalist-card__alert {
  font-weight: 900;
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.brutalist-card__message {
  margin-top: 1rem;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 2px solid #000;
  padding-bottom: 1rem;
  font-weight: 600;
}

.brutalist-card__actions {
  margin-top: 1rem;
}

.brutalist-card__button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 3px solid #000;
  background-color: #fff;
  color: #000;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 5px 5px 0 #000;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 1rem;
}

.brutalist-card__button--read {
  background-color: #000;
  color: #fff;
}

.brutalist-card__button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
}

.brutalist-card__button:hover::before {
  left: 100%;
}

.brutalist-card__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #000;
}

.brutalist-card__button--mark:hover {
  background-color: #296fbb;
  border-color: #296fbb;
  color: #fff;
  box-shadow: 7px 7px 0 #004280;
}

.brutalist-card__button--read:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff;
  box-shadow: 7px 7px 0 #800000;
}

.brutalist-card__button:active {
  transform: translate(5px, 5px);
  box-shadow: none;
}

</style>
    

<div class="YoutubeVideo">
  <div class="Image"></div>
  <div class="Icon"></div>
  <div class="Title"></div>
  <div class="Name"></div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.YoutubeVideo {
  width: 250px;
  height: 220px;
  background: transparent;
}

.Image {
  width: 250px;
  height: 154px;
  border-radius: 10px;
  background: #3a3a3a;
}

.Icon {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(0px,10px);
}

.Title {
  width: 180px;
  height: 15px;
  border-radius: 2px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(-15px,10px);
}

.Name {
  width: 100px;
  height: 15px;
  border-radius: 2px;
  float: right;
  background-color: #3a3a3a;
  transform: translate(-15px,20px);
}
</style>

<div class="card">
  <div class="imge">
    <div class="Usericon"></div>
    <p class="UserName"></p>
    <p class="Id"></p>
  </div>

  <div class="Description"></div>

  <div class="social-media">
        <a href="#">
            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
            </svg>
        </a>
        <a href="#">
            <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
            </svg>
        </a>
    </div>

</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 190px;
  height: 254px;
  background: rgb(38, 38, 38);
  box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333);
}

.imge {
  height: 70px;
  background-color: #ff5858;
}

.imge .Usericon {
  background-color: #414141;
  transform: translateX(10px) translateY(10px);
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.imge .UserName {
  background-color: #414141;
  width: 60px;
  height: 15px;
  border-width: 10px;
  border-radius: 5px;
  border-color: #262626;
  color: #262626;
  font-size: 15px;
  font-weight: bold;
  transform: translateX(70px) translateY(-35px);
}

.imge .Id {
  background-color: #414141;
  width: 100px;
  height: 15px;
  border-width: 10px;
  border-radius: 5px;
  border-color: #262626;
  color: #262626;
  font-size: 15px;
  font-weight: bold;
  transform: translateX(70px) translateY(-25px);
}

.Description {
  border-color: #141414;
  background-color: #414141;
  transform: translate(5px, 6px);
  width: 180px;
  height: 130px;
  border-radius: 5px;
}

/*______Social Media______*/
.social-media:before {
  content: " ";
  display: block;
  width: 100%;
  height: 2px;
  transform: translatey(10px);
  background: #414141;
}

.social-media a {
  margin-right: 15px;
  text-decoration: none;
  color: inherit;
}

.social-media a:last-child {
  margin-right: 0;
}

.social-media a svg {
  color: #ff5858;
  transform: translatex(25px) translateY(20px);
  width: 20px;
  fill: currentColor;
}
</style>

<div class="card">
  <div class="smallIcon">
    <div class="Icon"></div>
    <div class="Name"></div>
    <div class="Roles"></div>
    <div class="Descripion"></div>
  </div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 250px;
  height: 90px;
  background: #262626;
}

.smallIcon {
  width: 100%;
  height: 100%;
  background-color: #ff5858;
}

.smallIcon div {
  background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 
  40%, #e5e5e5 48%);
  margin-top: 10px;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
  color: #262626;
  font-weight: bold;
  font-size: 15px;
}

.Icon {
  margin: 10px;
  width: 70px;
  height: 70px;
  float: left;
  border-radius: 5px;
}

.Name {
  width: 90px;
  height: 20px;
  float: left;
  transform: translate(10px ,0px);
  border-radius: 5px;
}

.Roles {
  width: 40px;
  height: 20px;
  float: left;
  transform: translate(20px ,0px);
  border-radius: 5px;
}

.Descripion {
  margin: 10px;
  width: 140px;
  height: 45px;
  float: left;
  transform: translate(0px ,-5px);
  border-radius: 5px;
}

@keyframes load89234 {
  100% {
    background-position: -100% 0;
  }
}
</style>

<div class="card">
  <div class="GameImg">

    <div class="Gfooter">
      <div class="SmallIcon"></div>
      <span class="Stars"><svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="StarIcon">
      <g stroke="none" fill="#ebd300" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
      <path d="M210 405 l-33 -85 -83 0 c-45 0 -85 -4 -88 -9 -3 -5 23 -33 59 -62 36 -29 65 -60 65 -68 0 -9 -9 -48 -20 -86 -11 -38 -20 -71 -20 -72 0 -12 35 4 85 37 33 22 67 40 75 40 8 0 42 -18 75 -40 50 -33 85 -49 85 -37 0 1 -9 34 -20 72 -11 38 -20 77 -20 86 0 8 29 39 65 68 36 28 63 56 60 62 -4 5 -44 9 -90 9 l-83 0 -33 85 c-17 47 -35 85 -39 85 -4 0 -22 -38 -40 -85z"></path>
      </g>
      </svg>
        5/5</span>
      <span class="Descripion">This is Descripion of The Game</span>
    </div>

    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50.000000 50.000000" height="50.000000pt" width="50.000000pt" version="1.0" xmlns="http://www.w3.org/2000/svg" class="GameIcon">
    <g stroke="none" fill="#ff5858" transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)">
    <path d="M427 471 c-2 -11 -36 -35 -78 -57 -62 -33 -77 -46 -94 -81 -14 -30 -24 -41 -35 -36 -64 25 -90 27 -117 7 -58 -42 -115 -185 -99 -248 19 -76 81 -73 195 9 19 14 41 25 50 25 9 0 43 -18 75 -40 33 -22 70 -43 83 -46 64 -16 101 30 89 113 -7 56 -62 159 -99 187 -28 20 -56 18 -121 -9 -16 -7 -17 -5 -11 16 12 39 36 60 102 90 56 25 83 50 83 78 0 18 -17 12 -23 -8z m-41 -252 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-236 -14 c0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 -7 15 -15z m196 -26 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m80 0 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z m-40 -40 c10 -17 -13 -36 -27 -22 -12 12 -4 33 11 33 5 0 12 -5 16 -11z"></path></g></svg>
    <span class="Name">Game Name</span>
  </div>
</div>
<style>
/* From Uiverse.io by 1osm - Tags: card */
.card {
  width: 200px;
  height: 250px;
  background: #262626;
}

.GameIcon {
  transform: translate(-80px,-50px);
  position: absolute;
  width: 200px;
  height: 200px;
  transition: 0.3s;
}

.GameImg {
  width: 100%;
  height: 100%;
}

.Gfooter {
  width: 100%;
  height: 0%;
  background-color: #262626;
  border-radius: 10px;
  transition: all 0.3s;
}

.Name {
  transform: translate(10px,200px);
  position: absolute;
  background-color: transparent;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s;
  color: #ff5858;
}

.SmallIcon {
  width: 0px;
  height: 0px;
  transform: translate(10px,10px);
  border-radius: 10px;
  background-color: #ff5858;
  transition: 0.2s;
}

.Descripion {
  padding: 10px;
  position: absolute;
  transform: translate(0px,20px);
  opacity: 0%;
  color: #ff5858;
  font-weight: bold;
  font-size: 15px;
}

.StarIcon {
  transform: translate(-0px,25px);
  width: 20px;
  fill: #ebd300;
}

.Stars {
  position: absolute;
  color: white;
  font-size: 15px;
  font-weight: bold;
  transform: translate(80px,-70px);
}

.GameImg:hover .Descripion {
  opacity: 100%;
}

.GameImg:hover .Gfooter {
  width: 100%;
  height: 100%;
}

.GameImg:hover .SmallIcon {
  width: 60px;
  height: 60px;
}

.GameImg:hover .Name {
  transform: translate(75px,-235px);
}

.GameImg:hover .GameIcon {
  transform: translate(100px,-160px);
}

</style>

<div class="card">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="card__content">
        <span class="name">John Doe</span>
        <span class="job">Software engineer</span>
    </div>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: card */
.card {
  border: .05rem solid black;
  height: 210px;
  width: 180px;
  overflow: hidden;
  position: relative;
}

.card:hover .img1 {
  transform: scale(1.5, 1.2) translate(5px, -30px) rotate(5deg);
}

.card:hover .img1::before {
  transition: transform 1s 0.4s;
  transform: translateX(400px) skewX(-10deg);
}

.card:hover .img2 {
  transform: translateY(120%);
}

.card .img {
  position: absolute;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgb(65, 122, 255), rgb(23, 65, 193));
  background-size: 100% 200%;
  transition: 0.3s all;
}

.card .img1 {
  top: 0;
  right: 0;
  position: relative;
}

.card .img1::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  height: 100%;
  width: 10px;
  transform: skewX(-10deg);
  background-image: linear-gradient(to right, rgb(32, 151, 248), rgba(255, 255, 255, 0.9));
}

.card .img2 {
  bottom: 0;
  right: 0;
  background-position: bottom center;
}

.card__content {
  margin-left: 1rem;
  margin-top: 1rem;
  transform: translateX(-130%);
  transition: .5s ease-in-out transform .3s;
  position: relative;
  z-index: -1;
}

.card__content span {
  display: block;
}

.card__content .name {
  font-weight: bold;
  font-size: 1.7rem;
}

.card__content .job {
  color: #B2B2B2;
}

.card:hover .card__content {
  transform: translateX(0);
}
</style>

<div class="main">
<div class="card">
  <div class="card-content">
    <div class="h3"><span>UI</span>VERSE</div>
    <div class="h1">Love to Code.</div>
    <p class="p">Love to spend hours in codeing and get lost in own fantasy world of code, the feeling 😂🚀😊 </p>
  </div>
</div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, cardhover , card animation */
.h3 span {
  font-weight: 800;
  background: linear-gradient(125deg, #b663ff, #13c1ef);
  text-transform: uppercase;
  -webkit-background-cLip: text;
  -webkit-text-filL-coLor: transparent;
}

.h3::after {
  content: '';
  margin-top: -5px;
  height: 3px;
  width: 25%;
  background: linear-gradient(125deg, #b663ff, #13c1ef);
  display: block;
}

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

.card {
  width: 80%;
  position: relative;
  background-color: rgb(16 16 16);
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 1.5rem;
  padding: 1rem;
}

.card:after {
  content: "";
  height: 70px;
  width: 1px;
  position: absolute;
  left: -1px;
  top: 65%;
  transition: top, opacity;
  transition-duration: 600ms;
  transition-timing-function: ease;
  background: linear-gradient(transparent, mediumslateblue,transparent);
  box-shadow: 0 0 30px mediumslateblue;
  opacity: 0;
}

.card:after {
  top: 65%;
  opacity: 0;
}

.card:hover:after {
  top: 25%;
  opacity: 1;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1px, 
    transparent 1px
  );
  background-position: 50% 50%;
  background-size: 1.1rem 1.1rem;
  padding: 2.3rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.card-content .h1,.h3,.p {
  text-align: center;
}

.card-content .h1 {
  color: rgb(250 249 246);
  font-size: 2.6rem;
}

.card-content  .h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.card-content  .p {
  color: rgb(255 255 255 / 75%);
  line-height: 1.3rem;
}

@media(max-width: 700px) {
  .card {
    width: calc(100% - 2rem);
    margin: 0rem 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
  }
}

@media(max-width: 600px) {
  .card-content {
    padding: 3rem;
  }

  .card-content  .h1 {
    font-size: 2.2rem;
  }
}

</style>

<div class="price-section">
	<article class="price-table">
		<div class="price"><small>$</small>249</div>
		<span class="title">Solo Version</span>
		<span class="description">A single license for solo designers, developers and freelancers.
		</span>
		<div class="features">
			
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Free updates</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					You will gain access to every future update.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Use on unlimited projects</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Create as many projects as you want.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Asset Hosting</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Keep your files for easy access and management. 5GB space included. Scale when necessary.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Community support</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Get help and learn new things in our community Slack with over 5,000 contributors.
				</div>
			</details>
			<details class="feature">
				<summary>
					<i aria-hidden="true" class="checkmark">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
						</svg>
					</i>
					<span class="name">Version control</span>
					<i aria-hidden="true" class="question-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
							<path fill="none" d="M0 0h24v24H0z"></path>
							<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
						</svg>
					</i>
				</summary>
				<div class="answer">
					Instant rollbacks to any version
				</div>
			</details>
		</div>
	</article>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, business card, card template, card design */
.price-section {
  color: #fff;
}
/* End basic CSS override */
.price-table {
  background-color: #152148;
  border-radius: 16px;
  max-width: 355px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  background-image: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(29, 123, 219, 0.1) 20%, #152148 40%, #152148 100%);
}

.price-table:after {
  content: "";
  display: block;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  z-index: -1;
  position: absolute;
  border-radius: 16px;
  background-image: linear-gradient(135deg, #4ade80, #1d7bdb 40%, #293359 60%, #152148 100%);
}

.price-table .price {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 4px;
  position: relative;
  color: #fff;
}

.price-table .price small {
  font-size: 1.25rem;
  font-weight: 400;
  position: absolute;
  left: -1.5ch;
}

.price-table .title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  margin-top: 10px;
  color: #fff;
}

.price-table .description {
  font-size: 1rem;
  text-align: center;
  margin-top: 2px;
}

.features {
  margin-top: 22px;
}

.feature {
  position: relative;
}

.feature + .feature {
  margin-top: 16px;
}

.feature summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.feature summary::-webkit-details-marker {
  display: none;
}

.feature[open] summary:after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 50;
}

.feature[open] div {
  -webkit-animation: scale 0.15s ease;
  animation: scale 0.15s ease;
}

.feature .checkmark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.feature .checkmark svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.feature .question-icon {
  display: flex;
  align-items: center;
  margin-left: 6px;
  cursor: pointer;
}

.feature .answer {
  padding: 12px;
  background-color: #111b40;
  border-radius: 6px;
  position: absolute;
  top: -12px;
  z-index: 100;
  transform: translatey(-100%) translatex(-50%);
  transform-origin: bottom center;
  width: 80%;
  left: 50%;
  border: 1px solid #293359;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
}

@-webkit-keyframes scale {
  0% {
    transform: translatey(-100%) translatex(-50%) scale(0);
  }

  100% {
    transform: translatey(-100%) translatex(-50%) scale(1);
  }
}

@keyframes scale {
  0% {
    transform: translatey(-100%) translatex(-50%) scale(0);
  }

  100% {
    transform: translatey(-100%) translatex(-50%) scale(1);
  }
}
</style>

<div class="wrapper">

<article>
	<span class="h1">How to create a pop-up without JavaScript</span>
	<p>Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:</p>

	<p>Toggle the <strong>How it works</strong> button for more info.</p>

</article>

<details>
	<summary>How it works<svg viewBox="0 0 256 256" fill="currentColor" height="192" width="192" xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="256" width="256"></rect><circle stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" r="96" cy="128" cx="128"></circle><circle r="12" cy="180" cx="128"></circle><path stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" d="M127.9995,144.0045v-8a28,28,0,1,0-28-28"></path></svg></summary>
	<div>
			<p>The scaling effect you see when you open this <code>&lt;details&gt;</code> element is created by using a keyframe animation.</p>
		<p></p><pre><code>@keyframes scale { 
&nbsp;0% {
&nbsp;&nbsp;transform: scale(0);
&nbsp;}
&nbsp;100% {
&nbsp;&nbsp;transform: scale(1);
&nbsp;}
}</code></pre> <p></p>
<p>This animation is added to the <code>&lt;div&gt;</code>, but only when the <code>[open]</code> attribute is toggled.</p>
<p></p><pre><code>details[open] div { 
&nbsp;animation: scale .15s ease;
}</code></pre><p></p>
	<p>Sadly there's no way (that I know of) to animate the  <code>&lt;div&gt;</code> when the  <code>&lt;details&gt;</code> is closing.</p>
	</div>
</details>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, popup */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

article {
  margin-top: 50px;
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
}

article > * + * {
  margin-top: 0.5em;
}

article:is(h1, h2, h3) + * {
  margin-top: 0.5em;
}

article .h1 {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.125;
}

article code {
  background-color: #eee;
  font-weight: 600;
  font-family: monospace;
}

details {
  position: relative;
  right: 16px;
  margin-top: 35px;
  bottom: 16px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
}

details div {
  background-color: #1e1e27;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  border-radius: 8px;
  position: absolute;
  height: 350px;
  width: 400px;
  bottom: calc(100% + 1rem);
  right: -50%;
  overflow: auto;
  transform-origin: 100% 100%;
  color: #95a3b9;
}

details div::-webkit-scrollbar {
  width: 15px;
  background-color: #1e1e27;
}

details div::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 99em;
  background-color: #95a3b9;
  border: 5px solid #1e1e27;
}

details div > * + * {
  margin-top: 0.75em;
}

details div p > code {
  font-size: 1rem;
  font-family: monospace;
}

details div pre {
  white-space: pre-line;
  border: 1px solid #95a3b9;
  border-radius: 6px;
  font-family: monospace;
  padding: 0.75em;
  font-size: 0.875rem;
  color: #fff;
}

details[open] div {
  -webkit-animation: scale 0.25s ease;
  animation: scale 0.25s ease;
}

summary {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  padding: 0.75em 3em 0.75em 1.25em;
  border-radius: 99em;
  color: #fff;
  background-color: #185adb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  list-style: none;
  text-align: center;
  cursor: pointer;
  transition: 0.15s ease;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover, summary:focus {
  background-color: #1348af;
}

summary svg {
  position: absolute;
  right: 1.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
</style>

<div class="section_our_solution">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="our_solution_category">
        <div class="solution_cards_box">
          <div class="solution_card">
            <div class="hover_color_bubble"></div>
            <div class="so_top_icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" viewBox="0 0 512 512" height="50" id="Layer_1">
                <g>
                  <g>
                    <g>
                      <g>
                        <path fill="#fae19e" d="m47.478 452.317 295.441 19.76c5.511.369 10.277-3.8 10.645-9.31l28.393-424.517c.369-5.511-3.8-10.276-9.31-10.645l-295.441-19.76c-5.511-.369-10.276 3.8-10.645 9.31l-28.394 424.517c-.368 5.511 3.8 10.277 9.311 10.645z"></path>
                      </g>
                      <g>
                        <g>
                          <g>
                            <g>
                              <g>
                                <path fill="#fff9e9" d="m17.5 504.177h226.14l79.96-79.605v-355.86c0-5.523-4.477-10-10-10h-296.1c-5.523 0-10 4.477-10 10v425.466c0 5.522 4.477 9.999 10 9.999z"></path>
                              </g>
                              <path fill="#fff4d6" d="m313.601 58.712h-40c5.523 0 10 4.477 10 10v355.861l-.258 40.078 40.258-40.078v-355.861c0-5.523-4.477-10-10-10z"></path>
                            </g>
                          </g>
                        </g>
                        <path fill="#ffeec2" d="m243.64 504.177v-70.253c0-5.523 4.477-10 10-10h69.96z"></path>
                      </g>
                    </g>
                    <g>
                      <path fill="#fed23a" d="m468.636 248.58-33.372.165v-50.826c0-9.183 7.463-16.662 16.673-16.708h.007c9.217-.046 16.693 7.371 16.693 16.562v50.807z"></path>
                      <path fill="#54b1ff" d="m451.96 504.177c-10.362-10.277-16.196-24.263-16.208-38.857l-.062-73.973c0-.644.524-1.169 1.171-1.173l30.038-.149c.647-.003 1.171.517 1.171 1.161l.062 74.079c.012 14.531-5.749 28.472-16.015 38.756z"></path>
                      <path fill="#fdf385" d="m451.959 469.333h-.01c-14.434.072-26.14-11.542-26.14-25.935v-213.527c0-6.778 5.477-12.283 12.255-12.316l27.626-.137c6.826-.034 12.378 5.49 12.378 12.316v213.436c0 14.38-11.687 26.091-26.109 26.163z"></path>
                      <path fill="#faee6e" d="m465.69 217.417-23.769.118c6.037.79 10.708 5.94 10.708 12.198v213.437c0 9.823-5.455 18.397-13.507 22.87 3.79 2.115 8.164 3.317 12.826 3.293h.01c14.422-.072 26.109-11.783 26.109-26.163v-213.436c.001-6.826-5.551-12.351-12.377-12.317z"></path>
                      <path fill="#54b1ff" d="m491.274 247.925-71.615.355c-7.305.036-13.226 5.968-13.226 13.248 0 7.281 5.921 13.153 13.226 13.117l58.389-.29v77.489c0 7.281 5.921 13.153 13.226 13.117 7.305-.036 13.226-5.968 13.226-13.248v-90.672c0-7.28-5.922-13.152-13.226-13.116z"></path>
                      <g>
                        <path fill="#3da7ff" d="m491.274 247.925-38.441.188-.167 26.311 25.381-.067v77.489c0 7.281 5.921 13.153 13.226 13.117 7.305-.036 13.226-5.968 13.226-13.248v-90.672c.001-7.282-5.921-13.154-13.225-13.118z"></path>
                      </g>
                    </g>
                  </g>
                  <g fill="#060606">
                    <path d="m373.147 20.122-295.44-19.761c-9.631-.638-17.984 6.665-18.629 16.293l-2.311 34.557h-39.267c-9.649 0-17.5 7.851-17.5 17.5v425.466c0 9.649 7.851 17.5 17.5 17.5h226.141c1.96 0 3.902-.801 5.292-2.185l34.138-33.987c.347.074.701.133 1.065.157l58.282 3.898c9.302.614 18.005-6.952 18.629-16.293l28.393-424.515c.639-9.528-6.766-17.993-16.293-18.63zm-122.006 465.902v-52.1c0-1.378 1.122-2.5 2.5-2.5h51.9zm94.939-23.757c-.244 1.51-1.131 2.286-2.66 2.327l-46.28-3.096 31.752-31.611c1.414-1.407 2.209-3.32 2.209-5.315v-355.86c0-9.649-7.851-17.5-17.5-17.5h-77.993c-9.697 0-9.697 15 0 15h77.993c1.379 0 2.5 1.122 2.5 2.5v347.712h-62.46c-9.649 0-17.5 7.851-17.5 17.5v62.753h-218.641c-1.378 0-2.5-1.122-2.5-2.5v-425.465c0-1.378 1.122-2.5 2.5-2.5h178.168c9.697 0 9.697-15 0-15h-123.868l2.244-33.556c.244-1.511 1.131-2.286 2.661-2.327l295.44 19.76c1.511.244 2.287 1.131 2.328 2.661z"></path>
                    <path d="m267.827 237.047h-204.553c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"></path>
                    <path d="m267.827 289.332h-204.553c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"></path>
                    <path d="m55.774 192.262c0 4.142 3.358 7.5 7.5 7.5h204.553c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-204.553c-4.142 0-7.5 3.358-7.5 7.5z"></path>
                    <path d="m91.807 139.977c0 4.142 3.358 7.5 7.5 7.5h132.487c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-132.487c-4.142 0-7.5 3.358-7.5 7.5z"></path>
                    <path d="m194.755 438.787c-13.489.036-26.978.065-40.467.086-4.534.007-9.067.013-13.6.016-8.215.006-13.75-1.643-15.59-10.679-1.556-7.64-12.364-6.613-14.464 0-5.19 16.337-13.774 9.936-18.582-1.053-4.797-10.963-6.027-23.233-8.122-34.9-1.54-8.573-14.506-6.17-14.732 1.994-.298 10.751-1.302 21.331-4.031 31.758-2.815 10.758-7.034 21.097-11.222 31.376-3.651 8.961 10.867 12.816 14.464 3.988 3.711-9.108 7.427-18.266 10.193-27.714 5.14 12.36 15.774 26.34 30.927 18.101 2.819-1.533 5.452-3.712 7.763-6.253 7.88 9.106 19.609 8.388 30.584 8.375 15.627-.02 31.254-.054 46.881-.095 9.649-.025 9.667-15.025-.002-15z"></path>
                    <path d="m505.932 246.439c-3.897-3.878-9.255-5.867-14.695-6.014l-5.668.028v-10.719c0-6.529-3.878-13.427-9.433-16.862v-15.098c0-31.069-48.372-30.934-48.372.146v15.1c-5.659 3.498-9.455 9.741-9.455 16.852v10.982c-24.966 1.7-25.037 39.745.028 41.232.16 33.575.152 66.6-.028 100.737-.049 9.414 14.949 9.966 15 .079.18-34.166.188-67.22.029-100.823l37.211-.185s-.048 110.848-.048 160.784c0 24.338-37.219 24.5-37.219-.253l.013-13.677c.585-9.68-14.387-10.583-14.973-.904v12.834c0 11 3.402 20.316 9.988 26.869.586 15.693 7.198 30.878 18.369 41.956 3.205 3.18 7.642 2.208 10.744-.182 11.365-11.385 17.769-26.394 18.169-42.414 4.951-4.931 9.908-9.896 9.908-26.896l.006-68.351c12.97 3.689 26.494-6.348 26.494-19.946v-90.672c0-5.523-2.155-10.709-6.068-14.603zm-72.623-5.727v-10.841c0-2.219 1.523-4.08 3.573-4.633l30.025-.149c.84.208 1.615.605 2.243 1.231.915.911 1.419 2.123 1.419 3.414v10.794zm18.671-52c4.604 0 9.155 4.514 9.155 9.062v12.166l-18.372.091v-12.111c.001-5.053 4.133-9.183 9.217-9.208zm-.011 303.901c-3.487-4.942-6.009-10.531-7.417-16.406 2.322.503 4.674.765 7.027.765 2.627 0 5.253-.326 7.839-.957-1.374 5.964-3.892 11.587-7.449 16.598zm45.031-140.899c0 7.101-11.452 7.66-11.452.131 0 0 .013-70.974.021-77.48.005-4.196-3.483-7.509-7.558-7.509l-58.389.29c-7.242 0-7.073-11.331.074-11.366l71.615-.355c3.463.295 5.359 2.168 5.688 5.617v90.672z"></path>
                  </g>
                </g>
              </svg>
            </div>
            <div class="solu_title">
              <div>Demo 1</div>
            </div>
            <div class="solu_description">
              <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
              </p>
              <button class="read_more_btn" type="button">Read More</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, hover effect, card animation, card hover */
.section_our_solution .row {
  align-items: center;
}

.our_solution_category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.our_solution_category .solution_cards_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solution_cards_box .solution_card {
  flex: 0 50%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),
    0 5px 15px 0 rgba(37, 44, 97, 0.15);
  border-radius: 15px;
  margin: 8px;
  padding: 10px 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 265px;
  transition: 0.7s;
}

.solution_cards_box .solution_card:hover {
  background: #309df0;
  color: #fff;
  transform: scale(1.1);
  z-index: 9;
}

.solution_cards_box .solution_card:hover::before {
  background: rgb(85 108 214 / 10%);
}

.solution_cards_box .solution_card:hover .solu_title h3,
.solution_cards_box .solution_card:hover .solu_description p {
  color: #fff;
}

.solution_cards_box .solution_card:before {
  content: "";
  position: absolute;
  background: rgb(85 108 214 / 5%);
  width: 170px;
  height: 400px;
  z-index: -1;
  transform: rotate(42deg);
  right: -56px;
  top: -23px;
  border-radius: 35px;
}

.solution_cards_box .solution_card:hover .solu_description button {
  background: #fff !important;
  color: #309df0;
}

.solution_card .so_top_icon {
}

.solution_card .solu_title div {
  color: #212121;
  font-size: 1.3rem;
  margin-top: 13px;
  margin-bottom: 13px;
}

.solution_card .solu_description p {
  font-size: 15px;
  margin-bottom: 15px;
}

.solution_card .solu_description button {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(
    140deg,
    #42c3ca 0%,
    #42c3ca 50%,
    #42c3cac7 75%
  ) !important;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  padding: 5px 16px;
}

.our_solution_content div {
  text-transform: capitalize;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.our_solution_content p {
}

.hover_color_bubble {
  position: absolute;
  background: rgb(54 81 207 / 15%);
  width: 100rem;
  height: 100rem;
  left: 0;
  right: 0;
  z-index: -1;
  top: 16rem;
  border-radius: 50%;
  transform: rotate(-36deg);
  left: -18rem;
  transition: 0.7s;
}

.solution_cards_box .solution_card:hover .hover_color_bubble {
  top: 0rem;
}

.solution_cards_box .solution_card .so_top_icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution_cards_box .solution_card .so_top_icon img {
  width: 40px;
  height: 50px;
  object-fit: contain;
}

/*start media query*/
@media screen and (min-width: 320px) {
  .sol_card_top_3 {
    position: relative;
    top: 0;
  }

  .our_solution_category {
    width: 100%;
    margin: 0 auto;
  }

  .our_solution_category .solution_cards_box {
    flex: auto;
  }
}

@media only screen and (min-width: 768px) {
  .our_solution_category .solution_cards_box {
    flex: 1;
  }
}

@media only screen and (min-width: 1024px) {
  .sol_card_top_3 {
    position: relative;
    top: -3rem;
  }

  .our_solution_category {
    width: 80%;
    margin: 0 auto;
  }
}
</style>

<div class="container">
 <div class="left-side">
  <div class="card">
   <div class="card-line"></div>
   <div class="buttons"></div>
  </div>
  <div class="post">
   <div class="post-line"></div>
   <div class="screen">
    <div class="dollar">$</div>
   </div>
   <div class="numbers"></div>
   <div class="numbers-line2"></div>
  </div>
 </div>
 <div class="right-side">
  <div class="new">New Transaction</div>
  
   <svg viewBox="0 0 451.846 451.847" height="512" width="512" xmlns="http://www.w3.org/2000/svg" class="arrow"><path fill="#cfcfcf" data-old_color="#000000" class="active-path" data-original="#000000" d="M345.441 248.292L151.154 442.573c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744L278.318 225.92 106.409 54.017c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.287 194.284c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373z"></path></svg>
 
 </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: payment card, animated, hover effect, card animation */
.container {
  background-color: #ffffff;
  display: flex;
  width: 460px;
  height: 120px;
  position: relative;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.03);
  width: 220px;
}

.container:hover .left-side {
  width: 100%;
}

.left-side {
  background-color: #5de2a3;
  width: 130px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  overflow: hidden;
}

.right-side {
  width: calc(100% - 130px);
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
}

.right-side:hover {
  background-color: #f9f7f9;
}

.arrow {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.new {
  font-size: 23px;
  font-family: "Lexend Deca", sans-serif;
  margin-left: 20px;
}

.card {
  width: 70px;
  height: 46px;
  background-color: #c7ffbc;
  border-radius: 6px;
  position: absolute;
  display: flex;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
}

.card-line {
  width: 65px;
  height: 13px;
  background-color: #80ea69;
  border-radius: 2px;
  margin-top: 7px;
}

@media only screen and (max-width: 480px) {
  .container {
    transform: scale(0.7);
  }

  .container:hover {
    transform: scale(0.74);
  }

  .new {
    font-size: 18px;
  }
}

.buttons {
  width: 8px;
  height: 8px;
  background-color: #379e1f;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
  border-radius: 50%;
  margin-top: 5px;
  transform: rotate(90deg);
  margin: 10px 0 0 -30px;
}

.container:hover .card {
  animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

.container:hover .post {
  animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  60% {
    -webkit-transform: translateY(-70px) rotate(90deg);
    transform: translateY(-70px) rotate(90deg);
  }

  100% {
    -webkit-transform: translateY(-8px) rotate(90deg);
    transform: translateY(-8px) rotate(90deg);
  }
}

.post {
  width: 63px;
  height: 75px;
  background-color: #dddde0;
  position: absolute;
  z-index: 11;
  bottom: 10px;
  top: 120px;
  border-radius: 6px;
  overflow: hidden;
}

.post-line {
  width: 47px;
  height: 9px;
  background-color: #545354;
  position: absolute;
  border-radius: 0px 0px 3px 3px;
  right: 8px;
  top: 8px;
}

.post-line:before {
  content: "";
  position: absolute;
  width: 47px;
  height: 9px;
  background-color: #757375;
  top: -8px;
}

.screen {
  width: 47px;
  height: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 22px;
  right: 8px;
  border-radius: 3px;
}

.numbers {
  width: 12px;
  height: 12px;
  background-color: #838183;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 52px;
}

.numbers-line2 {
  width: 12px;
  height: 12px;
  background-color: #aaa9ab;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 68px;
}

@keyframes slide-post {
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

.dollar {
  position: absolute;
  font-size: 16px;
  font-family: "Lexend Deca", sans-serif;
  width: 100%;
  left: 0;
  top: 0;
  color: #4b953b;
  text-align: center;
}

.container:hover .dollar {
  animation: fade-in-fwd 0.3s 1s backwards;
}

@keyframes fade-in-fwd {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<div class="body">
<a class="card education" href="#">
     <div class="overlay"></div>
  <div class="circle">

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="29 14 71 76" height="76px" width="71px">
    
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g transform="translate(30.000000, 14.000000)" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="Group">
        <g fill="#D98A19" id="Group-8">
            <g id="Group-7">
                <g id="Group-6">
                    <path id="Fill-1" d="M0,0 L0,75.9204805 L69.1511499,75.9204805 L0,0 Z M14.0563973,32.2825679 L42.9457663,63.9991501 L14.2315268,63.9991501 L14.0563973,32.2825679 Z"></path>
                </g>
            </g>
        </g>
        <g stroke-linecap="square" stroke="#FFFFFF" transform="translate(0.000000, 14.114286)" id="Group-20">
            <path id="Line" d="M0.419998734,54.9642857 L4.70316223,54.9642857"></path>
            <path id="Line" d="M0.419998734,50.4404762 L4.70316223,50.4404762"></path>
            <path id="Line" d="M0.419998734,45.9166667 L4.70316223,45.9166667"></path>
            <path id="Line" d="M0.419998734,41.3928571 L2.93999114,41.3928571"></path>
            <path id="Line" d="M0.419998734,36.8690476 L4.70316223,36.8690476"></path>
            <path id="Line" d="M0.419998734,32.3452381 L4.70316223,32.3452381"></path>
            <path id="Line" d="M0.419998734,27.8214286 L4.70316223,27.8214286"></path>
            <path id="Line" d="M0.419998734,23.297619 L2.93999114,23.297619"></path>
            <path id="Line" d="M0.419998734,18.7738095 L4.70316223,18.7738095"></path>
            <path id="Line" d="M0.419998734,14.25 L4.70316223,14.25"></path>
            <path id="Line" d="M0.419998734,9.72619048 L4.70316223,9.72619048"></path>
            <path id="Line" d="M0.419998734,5.20238095 L2.93999114,5.20238095"></path>
            <path id="Line" d="M0.419998734,0.678571429 L4.70316223,0.678571429"></path>
        </g>
    </g>
</svg>
  </div>
  <p>Education</p>
</a>

</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: cardgift, card template, card animation, card hover */
.education {
  --bg-color: #ffd861;
  --bg-color-light: #ffeeba;
  --text-color-hover: #4C5656;
  --box-shadow-color: rgba(255, 215, 97, 0.48);
}

.card {
  width: 220px;
  height: 321px;
  background: #fff;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 14px 26px rgba(0,0,0,0.04);
  transition: all 0.3s ease-out;
  text-decoration: none;
}

.card:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0,0,0,0.11),
    0 24px 46px var(--box-shadow-color);
}

.card:hover .overlay {
  transform: scale(4) translateZ(0);
}

.card:hover .circle {
  border-color: var(--bg-color-light);
  background: var(--bg-color);
}

.card:hover .circle:after {
  background: var(--bg-color-light);
}

.card:hover p {
  color: var(--text-color-hover);
}

.card:active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15px 24px rgba(0,0,0,0.11),
    0 15px 24px var(--box-shadow-color);
}

.card p {
  font-size: 17px;
  color: #4C5656;
  margin-top: 30px;
  z-index: 1000;
  transition: color 0.3s ease-out;
}

.circle {
  width: 131px;
  height: 131px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.circle:after {
  content: "";
  width: 118px;
  height: 118px;
  display: block;
  position: absolute;
  background: var(--bg-color);
  border-radius: 50%;
  transition: opacity 0.3s ease-out;
}

.circle svg {
  z-index: 10000;
  transform: translateZ(0);
}

.overlay {
  width: 118px;
  position: absolute;
  height: 118px;
  border-radius: 50%;
  background: var(--bg-color);
  top: 70px;
  left: 50px;
  z-index: 0;
  transition: transform 0.3s ease-out;
}
</style>

<div class="modal">
	<article class="modal-container">
		<header class="modal-container-header">
			<span class="modal-container-title">
				<svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path d="M0 0h24v24H0z" fill="none"></path>
					<path d="M14 9V4H5v16h6.056c.328.417.724.785 1.18 1.085l1.39.915H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8v1h-7zm-2 2h9v5.949c0 .99-.501 1.916-1.336 2.465L16.5 21.498l-3.164-2.084A2.953 2.953 0 0 1 12 16.95V11zm2 5.949c0 .316.162.614.436.795l2.064 1.36 2.064-1.36a.954.954 0 0 0 .436-.795V13h-5v3.949z" fill="currentColor"></path>
				</svg>
				Terms and Services
			</span>
			<button class="icon-button">
				<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path d="M0 0h24v24H0z" fill="none"></path>
					<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" fill="currentColor"></path>
				</svg>
			</button>
		</header>
		<section class="modal-container-body rtf">
			<span>Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.</span>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor non habere, sed ne palatum quidem. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete. </p>

			<span>Ut proverbia non nulla veriora sint quam vestra dogmata.</span>

			<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; </p>

			<p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit; Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Nec enim, cum tua causa cui commodes, beneficium illud habendum est, sed faeneratio, nec gratia deberi videtur ei, qui sua causa commodaverit. Universa enim illorum ratione cum tota vestra confligendum puto. Sed residamus, inquit, si placet. Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ita enim se Athenis collocavit, ut sit paene unus ex Atticis, ut id etiam cognomen videatur habiturus. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. </p>

			<span>An hoc usque quaque, aliter in vita?</span>
			<ol>
				<li>Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.</li>
				<li>Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.</li>
				<li>Certe nihil nisi quod possit ipsum propter se iure laudari.</li>
				<li>Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur.</li>
			</ol>

			<p>Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Totum autem id externum est, et quod externum, id in casu est. Non autem hoc: igitur ne illud quidem. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Quamquam tu hanc copiosiorem etiam soles dicere. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Videsne quam sit magna dissensio? </p>

			<span>Claudii libidini, qui tum erat summo ne imperio, dederetur.</span>

			<p>Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute, ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Haec mirabilia videri intellego, sed cum certe superiora firma ac vera sint, his autem ea consentanea et consequentia, ne de horum quidem est veritate dubitandum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi altera, vivendi tertia. Nemo enim est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod omnia referrentur, quod est ultimum rerum appetendarum. Quid est, quod ab ea absolvi et perfici debeat? Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Quod iam a me expectare noli. Quod totum contra est. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. </p>

			<span>Sed nimis multa.</span>

			<p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed ad illum redeo. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. </p>

		</section>
		<footer class="modal-container-footer">
			<button class="button is-ghost">Decline</button>
			<button class="button is-primary">Accept</button>
		</footer>
	</article>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, accept, card design */
.button,
.input,
.select,
.textarea {
  font: inherit;
}

a {
  color: inherit;
}

.modal-container {
  max-height: 400px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .modal-container {
    width: 90%;
  }
}

.modal-container-header {
  padding: 16px 32px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-container-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-weight: 700;
  font-size: 1.125;
}

.modal-container-title svg {
  width: 32px;
  height: 32px;
  color: #750550;
}

.modal-container-body {
  padding: 24px 32px 51px;
  overflow-y: auto;
}

.rtf h1,
.rtf h2,
.rtf h3,
.rtf h4,
.rtf h5,
.rtf h6 {
  font-weight: 700;
}

.rtf h1 {
  font-size: 1.5rem;
  line-height: 1.125;
}

.rtf h2 {
  font-size: 1.25rem;
  line-height: 1.25;
}

.rtf h3 {
  font-size: 1rem;
  line-height: 1.5;
}

.rtf > * + * {
  margin-top: 1em;
}

.rtf > * + :is(h1, h2, h3) {
  margin-top: 2em;
}

.rtf > :is(h1, h2, h3) + * {
  margin-top: 0.75em;
}

.rtf ul,
.rtf ol {
  margin-left: 20px;
  list-style-position: inside;
}

.rtf ol {
  list-style: numeric;
}

.rtf ul {
  list-style: disc;
}

.modal-container-footer {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #ddd;
  gap: 12px;
  position: relative;
}

.modal-container-footer:after {
  content: "";
  display: block;
  position: absolute;
  top: -51px;
  left: 24px;
  right: 24px;
  height: 50px;
  flex-shrink: 0;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
  pointer-events: none;
}

.button {
  padding: 12px 20px;
  border-radius: 8px;
  background-color: transparent;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s ease;
}

.button.is-ghost:hover, .button.is-ghost:focus {
  background-color: #dfdad7;
}

.button.is-primary {
  background-color: #750550;
  color: #fff;
}

.button.is-primary:hover, .button.is-primary:focus {
  background-color: #4a0433;
}

.icon-button {
  padding: 0;
  border: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.15s ease;
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

.icon-button:hover, .icon-button:focus {
  background-color: #dfdad7;
}
</style>

    <section class="product-container product-1">
      <div class="card">
        <div class="photo"></div>
        <div class="content">
          <div class="title">GeForce RTX 4090</div>
          <div class="bg-title">RTX</div>
          <div class="feature size">
            <div>size :</div>
            <span>S</span>
            <span>M</span>
            <span>L</span>
          </div>
          <div class="feature color">
            <div>color :</div>
            <span>pink</span>
            <span class="tt">blue</span>
            <span class="ttt">green</span>
          </div>
          <button class="btn-buy">buy now</button>
        </div>
      </div>
    </section>

<style>
/* From Uiverse.io by Admin12121 - Tags: animated, card animation, card hover, 3d card */
.product-container {
  position: relative;
}

.card {
  font-family: Lato, sans-serif;
  position: relative;
  width: 290px;
  height: 400px;
  background: #232323;
  border-radius: 20px;
  overflow: hidden;
}

.card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--product-color);
  clip-path: circle(150px at 80% 20%);
  transition: .5s ease-in-out;
}

.card:hover:before {
  clip-path: circle(300px at 80% -20%);
}

.title {
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 12px;
}

.bg-title {
  font-size: 10em;
  font-weight: 900;
  font-style: italic;
  color: rgba(255,255,255,.04);
  position: absolute;
  max-width: 120%;
  top: -150%;
  transition: .6s;
}

.card:hover .bg-title {
  transform: translateY(60%);
}

.photo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  height: 220px;
  transition: .5s;
}

.card:hover .photo {
  top: 0%;
  transform: translateY(0%);
}

.photo img {
  position: absolute;
  width: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  transition: .5s;
}

.card:hover .photo img {
  width: 260px;
  top: 56%;
}

.content {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  transition: 1s;
  z-index: 5;
}

.card:hover .content {
  height: 190px;
}

.feature {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: .5s;
  visibility: hidden;
  opacity: 0;
}

.card:hover .feature {
  visibility: visible;
  opacity: 1;
  transition-delay: .5s;
}

.feature div {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 10px;
}

.feature span {
  min-width: 20px;
  padding: 0 4px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  display: inline-block;
  color: #111;
  background: #fff;
  margin: 0 5px;
  transition: .4s;
  border-radius: 4px;
  cursor: pointer
}

.feature span:hover {
  color: #000;
  background: var(--product-color);
}

.btn-buy {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #111;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
  cursor: pointer;
  outline: none;
}

.card:hover .btn-buy {
  opacity: 1;
  transform: translateY(0px);
  transition: 0.5s;
  transition-delay: 0.5s;
}

.card:hover .btn-buy:hover {
  background: var(--product-color);
  transition-delay: 0;
  transition: 0.05s;
}

.product-1 {
  --product-color: #EB6CA4;
}

.size span {
  cursor: pointer;
  z-index: 50;
}

.feature .tt:hover {
  background: #038dff;
}

.feature .ttt:hover {
  background: #09ff0d;
}
</style>

<div class="brutalist-container">
  <input
    placeholder="TYPE HERE"
    class="brutalist-input smooth-type"
    type="text"
  />
  <label class="brutalist-label">SMOOTH BRUTALIST</label>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: simple, input, smooth, flip, hover button, brutalist */
.brutalist-container {
  position: relative;
  width: 250px;
  font-family: monospace;
}

.brutalist-input {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #4a90e2;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
    glitch 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.brutalist-input:focus::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}

.brutalist-input:focus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -2;
  clip-path: inset(0 100% 0 0);
  animation: glitch-slice 4s steps(2, end) infinite;
}

@keyframes glitch-slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  10% {
    clip-path: inset(0 5% 0 0);
  }
  20% {
    clip-path: inset(0 80% 0 0);
  }
  30% {
    clip-path: inset(0 10% 0 0);
  }
  40% {
    clip-path: inset(0 50% 0 0);
  }
  50% {
    clip-path: inset(0 30% 0 0);
  }
  60% {
    clip-path: inset(0 70% 0 0);
  }
  70% {
    clip-path: inset(0 15% 0 0);
  }
  80% {
    clip-path: inset(0 90% 0 0);
  }
  90% {
    clip-path: inset(0 5% 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.brutalist-label {
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 5px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.brutalist-input:focus + .brutalist-label {
  transform: rotate(0deg) scale(1.05);
  background-color: #4a90e2;
}

.smooth-type {
  position: relative;
  overflow: hidden;
}

.smooth-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smooth-type:focus::before {
  opacity: 1;
  animation: type-gradient 2s linear infinite;
}

@keyframes type-gradient {
  0% {
    background-position: 300px 0;
  }
  100% {
    background-position: 0 0;
  }
}

.brutalist-input::placeholder {
  color: #888;
  transition: color 0.3s ease;
}

.brutalist-input:focus::placeholder {
  color: transparent;
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes focus-pulse {
  0%,
  100% {
    border-color: #000;
  }
  50% {
    border-color: #4a90e2;
  }
}

</style>
    

<div class="input-container">
  <input
    class="input"
    name="text"
    type="text"
    placeholder="Search the internet..."
  />
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags:  */
.input {
  width: 100%;
  max-width: 270px;
  height: 60px;
  padding: 12px;
  font-size: 18px;
  font-family: "Courier New", monospace;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 #000;
}

.input::placeholder {
  color: #888;
}

.input:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000;
}

.input:focus {
  background-color: #000;
  color: #fff;
  border-color: #ffffff;
}

.input:focus::placeholder {
  color: #fff;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.input:focus::after {
  content: "|";
  position: absolute;
  right: 10px;
  animation: blink 0.7s step-end infinite;
}

.input:valid {
  animation: typing 2s steps(30, end);
}
.input-container {
  position: relative;
  width: 100%;
  max-width: 270px;
}

.input {
  width: 100%;
  height: 60px;
  padding: 12px;
  font-size: 18px;
  font-family: "Courier New", monospace;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 0;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 8px 8px 0 #000;
}

.input::placeholder {
  color: #888;
}

.input:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 #000;
}

.input:focus {
  background-color: #010101;
  color: #fff;
  border-color: #d6d9dd;
}

.input:focus::placeholder {
  color: #fff;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px) rotate(-5deg);
  }
  50% {
    transform: translateX(5px) rotate(5deg);
  }
  75% {
    transform: translateX(-5px) rotate(-5deg);
  }
  100% {
    transform: translateX(0);
  }
}

.input:focus {
  animation: shake 0.5s ease-in-out;
}

@keyframes glitch {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.input:not(:placeholder-shown) {
  animation: glitch 1s linear infinite;
}

.input-container::after {
  content: "|";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.input:focus + .input-container::after {
  color: #fff;
}

.input:not(:placeholder-shown) {
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0px 0px 0 #000;
}

</style>
    

<div class="input__container">
  <div class="shadow__input"></div>
  <button class="input__button__shadow">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="#000000"
      width="20px"
      height="20px"
    >
      <path d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
      ></path>
    </svg>
  </button>
  <input
    type="text"
    name="username"
    class="input__search"
    placeholder="Enter username"
  />
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: 3d, input, username, brutalism, raw */
.input__container {
  position: relative;
  background: #f0f0f0;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  border: 4px solid #000;
  max-width: 350px;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-10deg);
  perspective: 1000px;
  box-shadow: 10px 10px 0 #000;
}

.input__container:hover {
  transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
  box-shadow: 25px 25px 0 -5px #e9b50b, 25px 25px 0 0 #000;
}

.shadow__input {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  transform: translateZ(-50px);
  background: linear-gradient(
    45deg,
    rgba(255, 107, 107, 0.4) 0%,
    rgba(255, 107, 107, 0.1) 100%
  );
  filter: blur(20px);
}

.input__button__shadow {
  cursor: pointer;
  border: 3px solid #000;
  background: #e9b50b;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transform: translateZ(20px);
  position: relative;
  z-index: 3;
  font-weight: bold;
  text-transform: uppercase;
}

.input__button__shadow:hover {
  background: #e9b50b;
  transform: translateZ(10px) translateX(-5px) translateY(-5px);
  box-shadow: 5px 5px 0 0 #000;
}

.input__button__shadow svg {
  fill: #000;
  width: 25px;
  height: 25px;
}

.input__search {
  width: 100%;
  outline: none;
  border: 3px solid #000;
  padding: 15px;
  font-size: 18px;
  background: #fff;
  color: #000;
  transform: translateZ(10px);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  z-index: 3;
  font-family: "Roboto", Arial, sans-serif;
  letter-spacing: -0.5px;
}

.input__search::placeholder {
  color: #666;
  font-weight: bold;
  text-transform: uppercase;
}

.input__search:hover,
.input__search:focus {
  background: #f0f0f0;
  transform: translateZ(20px) translateX(-5px) translateY(-5px);
  box-shadow: 5px 5px 0 0 #000;
}

.input__container::before {
  content: "USERNAME";
  position: absolute;
  top: -15px;
  left: 20px;
  background: #e9b50b;
  color: #000;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 14px;
  transform: translateZ(50px);
  z-index: 4;
  border: 2px solid #000;
}

</style>
    

<div class="Message">
  <input title="Write Message" tabindex="i" pattern="\d+" placeholder="Message.." class="MsgInput" type="text">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="30.000000pt" height="30.000000pt" viewBox="0 0 30.000000 30.000000" preserveAspectRatio="xMidYMid meet" class="SendSVG">
  <g transform="translate(0.000000,30.000000) scale(0.100000,-0.100000)" fill="#ffffff70" stroke="none">
  <path d="M44 256 c-3 -8 -4 -29 -2 -48 3 -31 5 -33 56 -42 28 -5 52 -13 52 -16 0 -3 -24 -11 -52 -16 -52 -9 -53 -9 -56 -48 -2 -21 1 -43 6 -48 10 -10 232 97 232 112 0 7 -211 120 -224 120 -4 0 -9 -6 -12 -14z"></path>
  </g>
</svg><span class="l"></span>
  
</div>
<style>
/* From Uiverse.io by 1osm - Tags: input, message, send */
.Message {
  width: 310px;
  height: 40px;
  border-radius: 10px;
  background-color: #40414f;
  transform: translate(0px,0px);
  box-shadow: 5px 5px #34343f;
}

.MsgInput {
  font-size: 18px;
  border-radius: 5px;
  background-color: #40414f;
  border: none;
  outline: none;
  width: 250px;
  height: 30px;
  transform: translate(5px,-3px);
  color: white;
  padding: 10px;
  font-weight: bold;
}

.SendSVG {
  width: 30px;
  height: 30px;
  border-width: 50px;
  transform: translate(20px,5px);
  background-size: 10px;
  border-radius: 10px;
  transition: 0.3s;
}

.SendSVG:hover {
  background-color: #2b2b35;
}

.l {
  position: absolute;
  width: 1%;
  height: 30px;
  background-color: #2e2f38;
  transform: translate(-20px,5px);
}

</style>

<!-- From Uiverse.io by AKAspidey01  - Tags: simple, flashy, animation, hover, input, smooth, hover effect, button hover effect  -->
<div class="relative rounded-full overflow-hidden bg-white shadow-xl w-3/4">
  <input
    type="text"
    name="text"
    placeholder="Hover on Submit"
    class="input bg-transparent outline-none border-none pl-6 pr-10 py-5 w-full font-sans text-lg font-semibold"
  />
  <div class="absolute right-2 top-[0.4em]">
    <button
      class="w-14 h-14 rounded-full bg-violet-500 group shadow-xl flex items-center justify-center relative overflow-hidden"
    >
      <svg
        width="50"
        height="50"
        viewBox="0 0 64 64"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="relative z-10"
      >
        <path
          d="M63.6689 29.0491L34.6198 63.6685L0.00043872 34.6194L29.0496 1.67708e-05L63.6689 29.0491Z"
          fill="white"
          fill-opacity="0.01"
        ></path>
        <path
          d="M42.8496 18.7067L21.0628 44.6712"
          stroke="white"
          stroke-width="3.76603"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M26.9329 20.0992L42.85 18.7067L44.2426 34.6238"
          stroke="white"
          stroke-width="3.76603"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
      <div
        class="w-full h-full rotate-45 absolute left-[32%] top-[32%] bg-black group-hover:-left-[100%] group-hover:-top-[100%] duration-1000"
      ></div>
      <div
        class="w-full h-full -rotate-45 absolute -left-[32%] -top-[32%] group-hover:left-[100%] group-hover:top-[100%] bg-black duration-1000"
      ></div>
    </button>
  </div>
</div>


    

<!-- From Uiverse.io by ARUSH221617  - Tags: input -->
<form class="flex items-center max-w-lg mx-auto">
  <label class="sr-only" for="voice-search">Search</label>
  <div class="relative w-full">
    <div
      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
    >
      <svg
        viewBox="0 0 21 21"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4 text-gray-500 dark:text-gray-400"
      >
        <path
          d="M11.15 5.6h.01m3.337 1.913h.01m-6.979 0h.01M5.541 11h.01M15 15h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 2.043 11.89 9.1 9.1 0 0 0 7.2 19.1a8.62 8.62 0 0 0 3.769.9A2.013 2.013 0 0 0 13 18v-.857A2.034 2.034 0 0 1 15 15Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </div>
    <input
      required=""
      placeholder="Search..."
      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
      id="voice-search"
      type="text"
    />
    <button
      class="absolute inset-y-0 end-0 flex items-center pe-3"
      type="button"
    >
      <svg
        viewBox="0 0 16 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
      >
        <path
          d="M15 7v3a5.006 5.006 0 0 1-5 5H6a5.006 5.006 0 0 1-5-5V7m7 9v3m-3 0h6M7 1h2a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3Z"
          stroke-width="2"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
    </button>
  </div>
  <button
    class="inline-flex items-center py-2.5 px-3 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
    type="submit"
  >
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      class="w-4 h-4 me-2"
    >
      <path
        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
        stroke-width="2"
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke="currentColor"
      ></path></svg
    >Search
  </button>
</form>


    

<div class="wave-group">
  <input required="" type="text" class="input">
  <span class="bar"></span>
  <label class="label">
    <span class="label-char" style="--index: 0">N</span>
    <span class="label-char" style="--index: 1">a</span>
    <span class="label-char" style="--index: 2">m</span>
    <span class="label-char" style="--index: 3">e</span>
  </label>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: input */
.wave-group {
  position: relative;
}

.wave-group .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.wave-group .input:focus {
  outline: none;
}

.wave-group .label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  display: flex;
}

.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * .05s);
}

.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {
  transform: translateY(-20px);
  font-size: 14px;
  color: #5264AE;
}

.wave-group .bar {
  position: relative;
  display: block;
  width: 200px;
}

.wave-group .bar:before,.wave-group .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
  left: 50%;
}

.wave-group .bar:after {
  right: 50%;
}

.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {
  width: 50%;
}


</style>

<div class="container">
  <span class="bg-color"></span>
  <input placeholder="Search..." class="input" name="text" type="text" />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    class="search icon"
  >
    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
    <g
      stroke-linejoin="round"
      stroke-linecap="round"
      id="SVGRepo_tracerCarrier"
    ></g>
    <g id="SVGRepo_iconCarrier">
      <path
        stroke-linejoin="round"
        stroke-linecap="round"
        stroke-width="2"
        stroke="#dedede"
        d="M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
      ></path>
    </g>
  </svg>
  <button>
    <svg
      stroke="#ffffff"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24.00 24.00"
      height="104px"
      width="104px"
      class="icon"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-width="0.144"
        stroke="#CCCCCC"
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <path
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="1"
          stroke="#dedede"
          d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
        ></path>
      </g>
    </svg>
  </button>
</div>

<style>
/* From Uiverse.io by Adamsco51  - Tags: simple, input, click */
.container {
  width: 300px;
  height: 40px;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 2px;
}

.input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 55px;
  padding-right: 65px;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  font-size: 1.25rem;
  color: #dedede;
  font-weight: 500;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.search {
  position: absolute;
  left: 0;
  margin: 0 12px;
  z-index: 99;
  stroke: #fff;
}

.icon {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: pointer;
}

button {
  position: absolute;
  backdrop-filter: blur(8px);
  background: transparent;
  background-clip: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 2px;
  right: 0;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container::before {
  content: "";
  position: absolute;
  left: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(202, 241, 61);
  z-index: -1;
  opacity: 0.1;
}

.container::after {
  content: "";
  position: absolute;
  right: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(202, 241, 61);
  z-index: -1;
  opacity: 0.1;
}

</style>
    

<div class="div">
  <input type="checkbox" />
  <span>
    <svg
      class="svgi"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#909090"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>

    <svg
      class="svgii"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="#3fc079"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
    </svg>
  </span>
  <input type="text" placeholder="'Unlock' me by clicking the lock icon" />
</div>

<style>
/* From Uiverse.io by Admin12121  - Tags: input, toggle, futuristic, input effect  */
.div {
  --field-size: 50px;
  --field-border-color: #ccc;
  margin: 0 auto;
  font-size: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  width: 300px;
  overflow: hidden;
  display: flex;
  background: white;
}

.div input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: var(--field-size);
  height: var(--field-size);
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.div input[type="checkbox"]:hover + span .svgi {
  display: none;
  /* Remove the background image */
}
.div input[type="checkbox"]:hover + span .svgii {
  display: block;
}

.div input[type="checkbox"]:checked + span .svgi {
  display: none; /* Remove the background image */
}

.div input[type="checkbox"]:checked + span .svgii {
  display: block;
}

.div input[type="checkbox"]:checked + span::before,
.div input[type="checkbox"]:checked + span::after {
  pointer-events: none;
}

.div input[type="checkbox"]:checked + span::after {
  transform: translateY(-100%);
}

.div input[type="checkbox"]:checked + span::before {
  transform: translateY(100%);
}
.div input[type="checkbox"] + span .svgii {
  display: none;
}
.div input[type="checkbox"] + span,
.svgi,
.svgii {
  width: var(--field-size);
  height: var(--field-size);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--field-border-color);
  cursor: pointer;
}

.div input[type="checkbox"] + span::after,
.div input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  right: 0;
  height: 50%;
  left: var(--field-size);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  background: rgba(0, 0, 0, 0.075);
  z-index: 2;
  cursor: not-allowed;
}

.div input[type="checkbox"] + span::after {
  top: 0;
}

.div input[type="checkbox"] + span::before {
  bottom: 0;
}

.div input[type="text"] {
  padding: 1em;
  border: 0;
  flex: 1;
  font-size: 1rem;
  --placeholder-color: #ababab;
  font-family: inherit;
}

.div input[type="text"]::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]:-ms-input-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]::-moz-placeholder {
  color: var(--placeholder-color);
}

.div input[type="text"]:-moz-placeholder {
  color: var(--placeholder-color);
}

</style>
    

<section>
    <div class="input-group">
        <input class="input" autocomplete="off" name="text" type="text" required="">
        <label class="user-label">Full Name</label>
    </div>
</section>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: input */
.input-group {
  position: relative;
}

.input {
  border: 3px solid #000;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: black;
}

.user-label {
  position: absolute;
  left: 15px;
  color: #000;
  pointer-events: none;
  transform: translateY(1rem);
  transition: 350ms;
}

.input:focus,
input:valid {
  outline: none;
  --angle: 0deg;
  border-bottom: 3px solid;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  animation: 3s rotate9234 linear infinite;
}

@keyframes rotate9234 {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.input:focus~label,
input:valid~label {
  transform: translateY(235%) scale(1);
  background-color: #e8e8e8;
  padding: 0 .2em;
  color: #2196f3;
}
</style>

 <div class="container">
        <input type="text" required="required">
        <label>You'r name</label>
        <i></i>
    </div>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: input */
.container {
  position: relative;
  width: 200px;
}

.container input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  color: #222;
  padding: 8px;
}

.container label {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(105, 105, 105, 0.7);
  text-transform: uppercase;
  pointer-events: none;
  transition: .5s;
  font-weight: bold;
}

.container input:valid ~ label,
.container input:focus ~ label {
  color: rgb(10, 131, 212);
  transform: translateY(-15px);
  font-size: .6rem;
}

.container i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #222;
}

.container i:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);
  animation: animate 3s linear infinite;
}
</style>

<div class="input-container">
  <input type="text" name="email" class="text-input" />
  <label for="email">Email</label>
</div>

<style>
/* From Uiverse.io by Alanav29  - Tags: simple, email, minimalist, input, light, toggle, text animation, input effect  */
.input-container {
  width: auto;
  position: static;
  display: flex;
  flex-direction: column-reverse;
}

.input-container label {
  color: black;
  position: relative;
  top: 2px;
  border: solid white;
  border-top: none;
  border-right: none;
  border-left: none;
  width: fit-content;
  transition: transform 0.2s;
  margin: 0px 0px 0px 12px;
  padding: 0px 4px 0px 4px;
  font-size: 20px;
}

.input-container input:focus + label {
  color: rgb(161, 66, 249);
  transform: scale(1.2);
  transform: translateX(0.5rem);
}

.input-container input {
  border: 2px rgb(161, 66, 249) solid;
  padding: 8px;
}

.input-container input:focus {
  outline: none;
}

</style>
    

<input type="text" name="text" class="input" placeholder="Type your text">
<style>
/* From Uiverse.io by Alaner-xs - Tags: input */
.input {
 background-color: #383838;
 border: 1ex solid none;
 border-top-width: 1.7em;
 margin: 0;
 padding: 0;
 color: #383838;
 word-wrap: break-word;
 outline: 7px solid #383838;
 height: 30px;
 font-size: 17px;
 text-align: center;
 transition: all 1s;
 max-width: 190px;
 font-weight: bold;
 font-family: 'Courier New', Courier, monospace;
}

.input:hover {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}

.input:focus {
 border-top-width: 0.2em;
 background-color: #f1e8e8;
}
</style>

<input type="text" name="text" class="input" placeholder="Type here...">
<style>
/* From Uiverse.io by Alaner-xs - Tags: input */
.input {
 border: 3px solid rgb(127, 170, 170);
 border-radius: 20px;
 background-image: linear-gradient(120deg,#3c3c3c,#585858);
 color: rgb(127, 170, 170);
 cursor: pointer;
 padding: 7px 12px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 17px;
 transition: all 1s;
 max-width: 170px;
}

.input:focus {
 outline-color: rgb(127, 170, 170);
}
</style>

<div class="form__group">
    <input type="text" class="form__field w-100" placeholder="Input text">
    <label for="name" class="form__label"> Input text </label>
</div>
<style>
/* From Uiverse.io by Alien14k - Tags: input */
.form__group {
  position: relative;
}

.form__field {
  border: 1px solid silver !important;
  border-radius: 5px;
  box-sizing: border-box;
  color: #313a46;
  height: 40px;
  padding: 0rem 15px;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  top: 10px;
  border-right: none;
  border-left: none;
}

.form__label {
  background-color: white;
  border-left: 1px solid silver;
  border-right: 1px solid silver;
  color: #9b9b9b;
  display: block;
  font-size: .9em;
  margin-left: 10px;
  padding: 0 10px;
  pointer-events: none;
  position: absolute;
  top: -10px;
  transition: 0.2s;
}

.form__field:focus {
  border: 1px solid #B9192C !important;
  outline: none;
}

.form__field:focus ~ .form__label {
  background-color: white;
  border-right: 1px solid #B9192C;
  border-left: 1px solid #B9192C;
  color: #B9192C;
  font-size: .9em;
  margin-left: 10px;
  padding: 0 10px;
  position: absolute;
  top: -10px;
  transition: 0.2s;
}
</style>

<p class="input-container">
    <input type="text" placeholder="Enter your name" name="text" id="text" class="input-field" autocomplete="name">
    <label class="input-label" for="text">Name</label>
</p>
<style>
/* From Uiverse.io by Allyhere - Tags: input */
.input-container {
  --c-text: rgb(50, 50, 80);
  --c-bg: rgb(252, 252, 252);
  --c-outline: rgb(55, 45 , 190);
  display: grid;
  gap: 1ch;
  position: relative;
  max-width: 190px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: black;
}

.input-field {
  padding: 0.5em 0.75em;
  border-radius: 0.2em;
  border: 1px solid var(--c-border, currentColor);
  color: var(--c-text);
  font-size: 1rem;
  letter-spacing: 0.1ch;
  width: 100%;
}

.input-field:not(:placeholder-shown) + .input-label {
  transform: translateY(-220%);
  opacity: 1;
}

.input-field:invalid {
  --c-border: rgb(230, 85, 60);
  --c-text: rgb(230, 85, 60);
  --c-outline: rgb(230, 85, 60);
}

.input-field:is(:disabled, :read-only) {
  --c-border: rgb(150, 150, 150);
  --c-text: rgb(170, 170, 170);
}

.input-field:is(:focus, :focus-visible) {
  outline: 2px solid var(--c-outline);
  outline-offset: 2px;
}

.input-label {
  --timing: 200ms ease-in;
  position: absolute;
  left: 0;
  top: 50%;
  transition: transform var(--timing),
    opacity var(--timing);
  transform: translateY(-50%);
  opacity: 0;
  color: var(--c-text);
  font-weight: 500;
}

</style>

<div class="container">
  <input required="" type="text" name="text" class="input">
  <label class="label">Username</label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: neumorphism, skeuomorphism, 3d, input */
.container {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  color: white;
}

.container .label {
  font-size: 15px;
  padding-left: 10px;
  position: absolute;
  top: 13px;
  transition: 0.3s;
  pointer-events: none;
}

.input {
  width: 200px;
  height: 45px;
  border: none;
  outline: none;
  padding: 0px 7px;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  background-color: transparent;
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.input:focus {
  border: 2px solid transparent;
  color: #fff;
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4),
  inset 3px 3px 10px rgba(0,0,0,1),
  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
}

.container .input:valid ~ .label,
.container .input:focus ~ .label {
  transition: 0.3s;
  padding-left: 2px;
  transform: translateY(-35px);
}

.container .input:valid,
.container .input:focus {
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4),
  inset 3px 3px 10px rgba(0,0,0,1),
  inset -1px -1px 6px rgba(255, 255, 255, 0.4);
}
</style>

<div class="relative">
  <input class="input-cal input-base" id="input" placeholder="" type="text">
  <label id="label-input">Name</label>
</div>
<style>
/* From Uiverse.io by Amine-maker - Tags: active, input, account */
#label-input {
  transition: all 0.1s ease-in-out;
  color: #2c2c54;
  position: absolute;
  top: 30%;
  left: 18px;
  transform: scale(0.95);
  opacity: 1;
  pointer-events: none;
}

.input-base {
  border-radius: 10px;
}

#input:focus ~ label#label-input,
#input:not(:placeholder-shown) ~ #label-input {
  top: -20% !important;
  left: 2px !important;
  transform: scale(0.8);
  background: white;
  color: black;
  padding: 0 6px;
  opacity: 1;
}

#input {
  transition: outline 0.2s ease;
  font-size: 1rem;
  outline-color: var(--button-text);
  outline: unset;
  border: 1px solid #bbbbbb;
  padding: 17px 10px 10px 17px;
  width: 100%;
}

#input:focus {
  box-shadow: 0 0 0 1px #e8e8e8, 0 0 0 3px rgb(92, 127, 202);
}

.relative {
  position: relative;
}

</style>

<div class="search-bar-container">
  <div class="search-bar">
    <span class="search-icon">
      <svg
        height="20"
        width="20"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21.53,20.47l-5-5a8,8,0,1,0-1.06,1.06l5,5a.75.75,0,0,0,1.06-1.06ZM4,10A6,6,0,1,1,10,16,6,6,0,0,1,4,10Z"
          fill="currentColor"
        ></path>
      </svg>
    </span>
    <input placeholder="Search..." type="text" />
    <button class="filter-button" type="button">
      <svg
        height="20"
        width="20"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3,5V7H4L10,13.92V19A1,1,0,0,0,11,20h2a1,1,0,0,0,1-1V13.92L20,7h1V5ZM12,17H12V13a1,1,0,0,0-.29-.71L6.41,7h11.18l-5.29,5.29A1,1,0,0,0,12,13Z"
          fill="currentColor"
        ></path>
      </svg>
    </button>
  </div>
</div>

<style>
/* From Uiverse.io by AmruthLP12  - Tags: icon, purple, black, input, dark, theme, html, css */
.search-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    #333,
    #111
  ); /* Dark gradient background */
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px #8839ff; /* Glowing effect */
  padding: 10px 15px;
}

.search-icon {
  color: #fff; /* White color for the search icon */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}

.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px;
  flex: 1;
  min-width: 200px;
}

.search-bar input::placeholder {
  color: #bbb; /* Lighter placeholder text color */
}

.filter-button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0 10px;
  cursor: pointer;
  color: #fff; /* White color for the filter icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
    

<input placeholder="Email" class="input" name="text" type="email">
<style>
/* From Uiverse.io by Anas92876 - Tags: input */
.input {
  max-width: 400px;
  padding: 1rem;
  border-radius: 1rem;
  border: none;
  box-shadow: 2px 2px 30px 2px lightgrey;
}

</style>

<section class="add-card page">
  <form class="form">
    <label for="name" class="label">
      <span class="title">Card holder full name</span>
      <input
        class="input-field"
        type="text"
        name="input-name"
        title="Input title"
        placeholder="Enter your full name"
      />
    </label>
    <label for="serialCardNumber" class="label">
      <span class="title">Card Number</span>
      <input
        id="serialCardNumber"
        class="input-field"
        type="number"
        name="input-name"
        title="Input title"
        placeholder="0000 0000 0000 0000"
      />
    </label>
    <div class="split">
      <label for="ExDate" class="label">
        <span class="title">Expiry Date</span>
        <input
          id="ExDate"
          class="input-field"
          type="text"
          name="input-name"
          title="Expiry Date"
          placeholder="01/23"
        />
      </label>
      <label for="cvv" class="label">
        <span class="title"> CVV</span>
        <input
          id="cvv"
          class="input-field"
          type="number"
          name="cvv"
          title="CVV"
          placeholder="CVV"
        />
      </label>
    </div>
    <input class="checkout-btn" type="button" value="Checkout" />
  </form>
</section>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, tooltip, form, text animation, click animation, cool card, cardhover , card animation */
.form {
  background: #0c0f14;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  position: relative;
  border-radius: 25px;
}
.form .label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: -moz-fit-content;
  height: fit-content;
}
.form .label:has(input:focus) .title {
  top: 0;
  left: 0;
  color: #d17842;
}
.form .label .title {
  padding: 0 10px;
  transition: all 300ms;
  font-size: 12px;
  color: #8b8e98;
  font-weight: 600;
  width: -moz-fit-content;
  width: fit-content;
  top: 14px;
  position: relative;
  left: 15px;
  background: #0c0f14;
}
.form .input-field {
  width: auto;
  height: 50px;
  text-indent: 15px;
  border-radius: 15px;
  outline: none;
  background-color: transparent;
  border: 1px solid #21262e;
  transition: all 0.3s;
  caret-color: #d17842;
  color: #aeaeae;
}

.form .input-field:hover {
  border-color: rgba(209, 121, 66, 0.5);
}

.form .input-field:focus {
  border-color: #d17842;
}
.form .split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 15px;
}
.form .split label {
  width: 130px;
}
.form .checkout-btn {
  margin-top: 20px;
  padding: 20px 0;
  border-radius: 25px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  border: none;
  justify-content: center;
  fill: #fff;
  color: #fff;
  border: 2px solid transparent;
  background: #d17842;
  transition: all 200ms;
}
.form .checkout-btn:active {
  scale: 0.95;
}

.form .checkout-btn:hover {
  color: #d17842;
  border: 2px solid #d17842;
  background: transparent;
}

</style>
    

<div class="container">
	
	<div class="modal">
		<div class="modal__header">
			<span class="modal__title">New project</span><button class="button button--icon"><svg width="24" viewBox="0 0 24 24" height="24" xmlns="http://www.w3.org/2000/svg">
					<path fill="none" d="M0 0h24v24H0V0z"></path>
					<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></button>
		</div>
		<div class="modal__body">
			<div class="input">
				<label class="input__label">Project title</label>
				<input class="input__field" type="text"> 
				<p class="input__description">The title must contain a maximum of 32 characters</p>
			</div>
			<div class="input">
								<label class="input__label">Description</label>
				<textarea class="input__field input__field--textarea"></textarea>
					<p class="input__description">Give your project a good description so everyone know what's it for</p>
			</div>
		</div>
		<div class="modal__footer">
			<button class="button button--primary">Create project</button>
		</div>
	</div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: form, contacts form, coolform */
.button {
  appaerance: none;
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  box-shadow: 0 15px 30px 0 rgba(0, 125, 171, 0.15);
  border-radius: 10px;
}

.modal__header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__body {
  padding: 1rem 1rem;
}

.modal__footer {
  padding: 0 1.5rem 1.5rem;
}

.modal__title {
  font-weight: 700;
  font-size: 1.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s ease;
}

.button--icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border-radius: 0.25rem;
}

.button--icon:focus, .button--icon:hover {
  background-color: #ededed;
}

.button--primary {
  background-color: #007dab;
  color: #FFF;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.button--primary:hover {
  background-color: #006489;
}

.input {
  display: flex;
  flex-direction: column;
}

.input + .input {
  margin-top: 1.75rem;
}

.input__label {
  font-weight: 700;
  font-size: 0.875rem;
}

.input__field {
  display: block;
  margin-top: 0.5rem;
  border: 1px solid #DDD;
  border-radius: 0.25rem;
  padding: 0.75rem 0.75rem;
  transition: 0.15s ease;
}

.input__field:focus {
  outline: none;
  border-color: #007dab;
  box-shadow: 0 0 0 1px #007dab, 0 0 0 4px rgba(0, 125, 171, 0.25);
}

.input__field--textarea {
  min-height: 100px;
  max-width: 100%;
}

.input__description {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: #8d8d8d;
}
</style>

<div class="container">
    <input type="checkbox" id="signup_toggle">
    <form class="form">
        <div class="form_front">
            <div class="form_details">Login</div>
            <input placeholder="Username" class="input" type="text">
            <input placeholder="Password" class="input" type="text">
            <button class="btn">Login</button>
            <span class="switch">Don't have an account? 
                <label class="signup_tog" for="signup_toggle">
                    Sign Up
                </label>
            </span>
        </div>
        <div class="form_back">
            <div class="form_details">SignUp</div>
            <input placeholder="Firstname" class="input" type="text">
            <input placeholder="Username" class="input" type="text">
            <input placeholder="Password" class="input" type="text">
            <input placeholder="Confirm Password" class="input" type="text">
            <button class="btn">Signup</button>
            <span class="switch">Already have an account? 
                <label class="signup_tog" for="signup_toggle">
                    Sign In
                </label>
            </span>
        </div>
    </form>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: form, 3d card, 3d cool effect */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.form .form_front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  backface-visibility: hidden;
  padding: 65px 45px;
  border-radius: 15px;
  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form .form_back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  padding: 65px 45px;
  border-radius: 15px;
  box-shadow: inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form_details {
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 10px;
  color: white;
}

.input {
  width: 245px;
  min-height: 45px;
  color: #fff;
  outline: none;
  transition: 0.35s;
  padding: 0px 7px;
  background-color: #212121;
  border-radius: 6px;
  border: 2px solid #212121;
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6);
}

.input::placeholder {
  color: #999;
}

.input:focus.input::placeholder {
  transition: 0.3s;
  opacity: 0;
}

.input:focus {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.btn {
  padding: 10px 35px;
  cursor: pointer;
  background-color: #212121;
  border-radius: 6px;
  border: 2px solid #212121;
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  transition: 0.35s;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.btn:focus {
  transform: scale(1.05);
  box-shadow: 6px 6px 10px rgba(0,0,0,1),
  1px 1px 10px rgba(255, 255, 255, 0.6),
  inset 2px 2px 10px rgba(0,0,0,1),
  inset -1px -1px 5px rgba(255, 255, 255, 0.6);
}

.form .switch {
  font-size: 13px;
  color: white;
}

.form .switch .signup_tog {
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.container #signup_toggle {
  display: none;
}

.container #signup_toggle:checked + .form {
  transform: rotateY(-180deg);
}
</style>

<!-- From Uiverse.io by Ameth1208  - Website: https://tailwindflex.com/@ameth1208/login - Name: Ameth1208 - Tags: login, form, input, sign-up -->
<div class="relative py-3 sm:max-w-xs sm:mx-auto">
  <div
    class="min-h-96 px-8 py-6 mt-4 text-left bg-white dark:bg-gray-900 rounded-xl shadow-lg"
  >
    <div class="flex flex-col justify-center items-center h-full select-none">
      <div class="flex flex-col items-center justify-center gap-2 mb-8">
        <div class="w-8 h-8 bg-gray-700" src=""></div>
        <p class="m-0 text-[16px] font-semibold dark:text-white">
          Login to your Account
        </p>
        <span class="m-0 text-xs max-w-[90%] text-center text-[#8B8E98]"
          >Get started with our app, just start section and enjoy experience.
        </span>
      </div>
      <div class="w-full flex flex-col gap-2">
        <label class="font-semibold text-xs text-gray-400">Username</label>
        <input
          placeholder="Username"
          class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900"
        />
      </div>
    </div>
    <div class="w-full flex flex-col gap-2">
      <label class="font-semibold text-xs text-gray-400">Password</label>
      <input
        placeholder="••••••••"
        class="border rounded-lg px-3 py-2 mb-5 text-sm w-full outline-none dark:border-gray-500 dark:bg-gray-900"
        type="password"
      />
    </div>
    <div>
      <button
        class="py-1 px-8 bg-blue-500 hover:bg-blue-800 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg cursor-pointer select-none"
      >
        Login
      </button>
    </div>
  </div>
</div>


    

  <div id="form-ui">
    <form action="" method="post" id="form">
      <div id="form-body">
        <div id="welcome-lines">
          <div id="welcome-line-1">Spotify</div>
          <div id="welcome-line-2">Welcome Back, Loyd</div>
        </div>
        <div id="input-area">
          <div class="form-inp">
            <input placeholder="Email Address" type="text">
          </div>
          <div class="form-inp">
            <input placeholder="Password" type="password">
          </div>
        </div>
        <div id="submit-button-cvr">
          <button id="submit-button" type="submit">Login</button>
        </div>
        <div id="forgot-pass">
          <a href="#">Forgot password?</a>
        </div>
        <div id="bar"></div>
      </div>
    </form>
    </div>
  

<style>
/* From Uiverse.io by AnthonyPreite - Tags: green, form, dark, Login, Spotify, duo-ton */
#form {
  display: grid;
  place-items: center;
  width: 300px;
  height: 472px;
  padding: 25px;
  background-color: #161616;
  box-shadow: 0px 15px 60px #00FF7F;
  outline: 1px solid #2b9962;
  border-radius: 10px;
}

#form-body {
  position: absolute;
  top: 50%;
  right: 25px;
  left: 25px;
  width: 230px;
  margin: -156px auto 0 auto;
}

#welcome-lines {
  text-align: center;
  line-height: 1;
}

#welcome-line-1 {
  color: #00FF7F;
  font-weight: 600;
  font-size: 40px;
}

#welcome-line-2 {
  color: #ffffff;
  font-size: 18px;
  margin-top: 17px;
}

#input-area {
  margin-top: 40px;
}

.form-inp {
  padding: 11px 25px;
  background: transparent;
  border: 1px solid #e3e3e3;
  line-height: 1;
  border-radius: 8px;
}

.form-inp:focus {
  border: 1px solid #00FF7F;
}

.form-inp:first-child {
  margin-bottom: 15px;
}

.form-inp input {
  width: 100%;
  background: none;
  font-size: 13.4px;
  color: #00FF7F;
  border: none;
  padding: 0;
  margin: 0;
}

.form-inp input:focus {
  outline: none;
}

#submit-button-cvr {
  margin-top: 20px;
}

#submit-button {
  display: block;
  width: 100%;
  color: #00FF7F;
  background-color: transparent;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
  padding: 14px 13px 12px 13px;
  border: 0;
  outline: 1px solid #00FF7F;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
  transition: all ease-in-out .3s;
}

#submit-button:hover {
  transition: all ease-in-out .3s;
  background-color: #00FF7F;
  color: #161616;
  cursor: pointer;
}

#forgot-pass {
  text-align: center;
  margin-top: 10px;
}

#forgot-pass a {
  color: #868686;
  font-size: 12px;
  text-decoration: none;
}

#bar {
  position: absolute;
  left: 50%;
  bottom: -50px;
  width: 28px;
  height: 8px;
  margin-left: -33px;
  background-color: #00FF7F;
  border-radius: 10px;
}

#bar:before,
#bar:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #ececec;
  border-radius: 50%;
}

#bar:before {
  right: -20px;
}

#bar:after {
  right: -38px;
}

    
</style>

<div class="file-upload-container">
  <div class="file-upload">
    <input multiple="" class="file-input" id="fileInput" type="file" />
    <label class="file-label" for="fileInput">
      <i class="upload-icon">📁</i>
      <p>Drag &amp; Drop your files here or click to upload</p>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: form */
.file-upload-container {
  width: 50%;
  max-width: 500px;
}

.file-upload {
  position: relative;
  border: 2px dashed #b8bcbf;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  transition: background-color 0.3s ease-in-out;
}

.file-upload:hover {
  background-color: #e2e6ea;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.upload-icon {
  font-size: 50px;
  color: #007bff;
  margin-bottom: 10px;
}

.file-upload p {
  margin: 0;
  font-size: 16px;
  color: #6c757d;
}

.file-upload.dragover {
  background-color: #007bff;
  color: white;
}

</style>
    

<div class="contact-form">
  <span class="heading">Contact Us</span>
  <form>
    <label for="name">Name:</label>
    <input type="text" required="">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required="">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required=""></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

<style>
/* From Uiverse.io by ClawHack1 - Tags: form */
.contact-form {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
}

.contact-form label {
  color: black;
}

.contact-form .heading {
  font-size: 24px;
  color: black;
  ;
  margin-bottom: 12px;
  font-weight: bold;
  display: block;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-bottom: 10px;
}

textarea {
  resize: none;
  height: 80px;
  width: 200px;
}

.contact-form input, .contact-form textarea {
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 5px #ff6384;
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

.contact-form button[type="submit"] {
  background-color: #ff6384;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form button[type="submit"]:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

</style>

<!-- From Uiverse.io by Cybercom682  - Tags: login, form, modern -->
<form
  class="bg-white dark:bg-zinc-900 shadow-2xl rounded-2xl overflow-hidden border-4 border-blue-400 dark:border-blue-800"
>
  <div class="px-8 py-10 md:px-10">
    <h2
      class="text-4xl font-extrabold text-center text-zinc-800 dark:text-white"
    >
      Welcome Back!
    </h2>
    <p class="text-center text-zinc-600 dark:text-zinc-400 mt-3">
      We missed you, sign in to continue.
    </p>
    <div class="mt-10">
      <div class="relative">
        <label
          class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
          for="email"
          >Email</label
        >
        <input
          placeholder="you@example.com"
          class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
          name="email"
          id="email"
          type="email"
        />
      </div>
      <div class="mt-6">
        <label
          class="block mb-3 text-sm font-medium text-zinc-600 dark:text-zinc-200"
          for="password"
          >Password</label
        >
        <input
          placeholder="••••••••"
          class="block w-full px-4 py-3 mt-2 text-zinc-800 bg-white border-2 rounded-lg dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-blue-400"
          name="password"
          id="password"
          type="password"
        />
      </div>
      <div class="mt-10">
        <button
          class="w-full px-4 py-3 tracking-wide text-white transition-colors duration-200 transform bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg hover:from-blue-700 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-800"
          type="submit"
        >
          Let's Go
        </button>
      </div>
    </div>
  </div>
  <div class="px-8 py-4 bg-blue-200 dark:bg-zinc-800">
    <div class="text-sm text-blue-900 dark:text-blue-300 text-center">
      Don't have an account?
      <a class="font-medium underline" href="#">Sign up</a>
    </div>
  </div>
</form>


    

<form action="" class="form">
    <p>
        Welcome,<span>sign in to continue</span>
    </p>
    <button class="oauthButton">
                    <svg class="icon" viewBox="0 0 24 24">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
            <path d="M1 1h22v22H1z" fill="none"></path>
        </svg>
                    Continue with Google
                </button>
    <button class="oauthButton">
                    <svg class="icon" viewBox="0 0 24 24">
            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
        </svg>
                    Continue with Github
                </button>
    <div class="separator">
        <div></div>
        <span>OR</span>
        <div></div>
    </div>
    <input type="email" placeholder="Email" name="email">
    <button class="oauthButton">
                    Continue
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                </button>
</form>
<style>
/* From Uiverse.io by D3OXY - Source: https://uiverse.io/andrew-demchenk0/little-treefrog-9 - Tags: form, github, google, login form, sign up form, card animation, card hover, 3d card, email card, oauth */
/* DEOXY Was Here */
.form {
  --background: #d3d3d3;
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --main-color: #323232;
  padding: 20px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.form > p {
  font-family: var(--font-DelaGothicOne);
  color: var(--font-color);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.form > p > span {
  font-family: var(--font-SpaceMono);
  color: var(--font-color-sub);
  font-weight: 600;
  font-size: 17px;
}

.separator {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.separator > div {
  width: 100px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--font-color-sub);
}

.separator > span {
  color: var(--font-color);
  font-family: var(--font-SpaceMono);
  font-weight: 600;
}

.oauthButton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
    /* margin: 50px auto 0 auto; */
  padding: auto 15px 15px auto;
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 16px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
  transition: all 250ms;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.oauthButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #212121;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 250ms;
}

.oauthButton:hover {
  color: #e8e8e8;
}

.oauthButton:hover::before {
  width: 100%;
}

.form > input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

</style>

<div class="form-card1">
  <div class="form-card2">
    <form class="form">
      <p class="form-heading">Get In Touch</p>

      <div class="form-field">
        <input required="" placeholder="Name" class="input-field" type="text" />
      </div>

      <div class="form-field">
        <input
          required=""
          placeholder="Email"
          class="input-field"
          type="email"
        />
      </div>

      <div class="form-field">
        <input
          required=""
          placeholder="Subject"
          class="input-field"
          type="text"
        />
      </div>

      <div class="form-field">
        <textarea
          required=""
          placeholder="Message"
          cols="30"
          rows="3"
          class="input-field"
        ></textarea>
      </div>

      <button class="sendMessage-btn">Send Message</button>
    </form>
  </div>
</div>

<style>
/* From Uiverse.io by DavidTM96  - Website: https://uiverse.io/Phelix652/selfish-pug-28 - Name: Phelix652 - Tags: material design, form, contact-form, contactform */
.form {
  display: flex;
  flex-direction: column;
  align-self: center;
  font-family: inherit;
  gap: 10px;
  padding-inline: 2em;
  padding-bottom: 0.4em;
  background-color: #171717;
  //background-color: #0a192f;
  border-radius: 20px;
}

.form-heading {
  text-align: center;
  margin: 2em;
  color: #64ffda;
  font-size: 1.2em;
  background-color: transparent;
  align-self: center;
}

.form-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 10px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: #ccd6f6;
  padding-inline: 1em;
}

.sendMessage-btn {
  cursor: pointer;
  margin-bottom: 3em;
  padding: 1em;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: transparent;
  color: #64ffda;
  font-weight: bold;
  outline: 1px solid #64ffda;
  transition: all ease-in-out 0.3s;
}

.sendMessage-btn:hover {
  transition: all ease-in-out 0.3s;
  background-color: #64ffda;
  color: #000;
  cursor: pointer;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.form-card1 {
  background-image: linear-gradient(163deg, #64ffda 0%, #64ffda 100%);
  border-radius: 22px;
  transition: all 0.3s;
}

.form-card1:hover {
  box-shadow: 0px 0px 30px 1px rgba(100, 255, 218, 0.3);
}

.form-card2 {
  border-radius: 0;
  transition: all 0.2s;
}

.form-card2:hover {
  transform: scale(0.98);
  border-radius: 20px;
}

</style>
    

<div class="login">
  <div class="hader">
    <span>Join us today!</span>
    <p>Sing up now to become a member.</p>
  </div>
  <form action="#">
    <input type="text" placeholder="Enter Name" required="" />
    <input type="email" placeholder="Enter Emaill" required="" />
    <input type="password" placeholder="Choose A Password" required="" />
    <input type="password" placeholder="Re-Enter Password" required="" />
    <input type="button" value="Signup" />
    <span> Already a member? <a href="#">Login Here</a></span>
  </form>
</div>

<style>
/* From Uiverse.io by FahadArnob52539  - Tags: form, html, css */
.login {
  max-width: 280px;
  background-color: #ffffff;
  border-radius: 5px;
}
.hader {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.hader p {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #706b6b;
}
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}
form input {
  height: 40px;
  outline: none;
  border: 1px solid #cccccc;
  padding: 10px;
  font-size: 15px;
  border-radius: 8px;
}
form input[type="button"] {
  background-color: rgba(17, 17, 226, 0.562);
  color: #ffffff;
  font-size: 17px;
}
form span {
  text-align: center;
  font-size: 16px;
  padding-top: 10px;
  color: #706b6b;
}
form span a {
  text-decoration: none;
  color: rgba(36, 36, 207, 0.671);
  font-weight: 500;
}

</style>
    

<div class="form-container" tabindex="0">
  <div class="form-container__block">
    <div class="form-container__header">
      <p>Sign in with existing account</p>
      <form class="form-container__form">
        <input placeholder="Email address or Username" type="email">
        <input placeholder="Password" type="password">
        <div class="form-container__register-buttons">
          <button class="form-container__sign">Sign In</button>
          <a class="form-container__sign forgot" href="#">Forgot password?</a>
        </div>
      </form>
    </div>
    <div class="form-container__footer">
      <p class="top-line">Or sign in with:</p>
      <div class="form-container__sign-app-buttons">
        <button class="google"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#167ee6" fill="#167ee6" d="m492.668 211.489-208.84-.01c-9.222 0-16.697 7.474-16.697 16.696v66.715c0 9.22 7.475 16.696 16.696 16.696h117.606c-12.878 33.421-36.914 61.41-67.58 79.194L384 477.589c80.442-46.523 128-128.152 128-219.53 0-13.011-.959-22.312-2.877-32.785-1.458-7.957-8.366-13.785-16.455-13.785z"></path>
              <path data-original="#12b347" fill="#12b347" d="M256 411.826c-57.554 0-107.798-31.446-134.783-77.979l-86.806 50.034C78.586 460.443 161.34 512 256 512c46.437 0 90.254-12.503 128-34.292v-.119l-50.147-86.81c-22.938 13.304-49.482 21.047-77.853 21.047z"></path>
              <path data-original="#0f993e" fill="#0f993e" d="M384 477.708v-.119l-50.147-86.81c-22.938 13.303-49.48 21.047-77.853 21.047V512c46.437 0 90.256-12.503 128-34.292z"></path>
              <path class="" data-original="#ffd500" fill="#ffd500" d="M100.174 256c0-28.369 7.742-54.91 21.043-77.847l-86.806-50.034C12.502 165.746 0 209.444 0 256s12.502 90.254 34.411 127.881l86.806-50.034c-13.301-22.937-21.043-49.478-21.043-77.847z"></path>
              <path class="" data-original="#ff4b26" fill="#ff4b26" d="M256 100.174c37.531 0 72.005 13.336 98.932 35.519 6.643 5.472 16.298 5.077 22.383-1.008l47.27-47.27c6.904-6.904 6.412-18.205-.963-24.603C378.507 23.673 319.807 0 256 0 161.34 0 78.586 51.557 34.411 128.119l86.806 50.034c26.985-46.533 77.229-77.979 134.783-77.979z"></path>
              <path data-original="#d93f21" fill="#d93f21" d="M354.932 135.693c6.643 5.472 16.299 5.077 22.383-1.008l47.27-47.27c6.903-6.904 6.411-18.205-.963-24.603C378.507 23.672 319.807 0 256 0v100.174c37.53 0 72.005 13.336 98.932 35.519z"></path>
            </g>
          </svg><span>Google</span></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#000000" fill="#000000" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path data-original="#ffa100" fill="#ffa100" d="M29.653 201.648.957 289.816c-2.599 8.006.208 16.843 7.07 21.834l247.972 180.183-79.366-155.859-146.98-134.326zM482.347 201.648l28.696 88.168c2.599 8.006-.208 16.843-7.07 21.834L256.001 491.832l87.212-184.854 139.134-105.33z"></path>
              <path class="" data-original="#ff6d18" fill="#ff6d18" d="m256 491.832-.001-178.6-94.302-111.585-65.97-32.822-66.074 32.822L256 491.832zM256 491.832l.001-189.402 94.302-100.783 71.367-32.822 60.677 32.822L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="m256 491.832 94.302-290.185H161.698L256 491.832z"></path>
              <path class="" data-original="#fc3819" fill="#fc3819" d="M29.654 201.65h132.148L104.929 26.874c-2.911-8.942-15.596-8.942-18.611 0L29.654 201.65zM482.346 201.65H350.198l56.769-174.776c2.911-8.942 15.596-8.942 18.611 0l56.768 174.776z"></path>
            </g>
          </svg></button>
        <button><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <g>
              <path class="" data-original="#2684ff" fill="#2684ff" d="M16.436 25.814c-10.23 0-17.903 9.378-16.198 18.756l69.056 422.86c1.705 11.085 11.083 18.756 22.166 18.756h334.196c7.674 0 14.494-5.967 16.198-13.641l69.907-427.123c1.707-10.231-5.967-18.756-16.196-18.756l-479.129-.852zm293.275 305.21H203.143l-28.134-150.899H336.14l-26.429 150.899z"></path>
              <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 -1 0 2434)" y2="2012.875" y1="2211.385" x2="270.312" x1="524.616" id="a">
                <stop style="stop-color:#0052CC" offset=".176"></stop>
                <stop style="stop-color:#2684FF" offset="1"></stop>
              </linearGradient>
              <path fill="" style="fill:url(#a);" d="M488.743 180.125H335.286L309.71 331.024H203.14L77.818 480.219s5.968 5.116 14.493 5.116h334.196c7.674 0 14.494-5.969 16.198-13.643l46.038-291.567z"></path>
            </g>
          </svg></button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: form */
.form-container__sign-app-buttons svg {
  width: 22px;
  height: auto;
}

.google svg {
  width: 18px;
  height: auto;
}

.form-container {
  min-width: 350px;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #4b4b4b;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.form-container:focus-within:not(:focus) {
  box-shadow: 0 0 6px 3px #caedff;
  -webkit-box-shadow: 0 0 6px 3px #caedff;
  outline: 1px solid #97dbff;
}

.form-container p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 14px;
}

.top-line {
  padding-top: 12px;
}

.form-container__form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.form-container__form input {
  height: 31px;
  border: 1px solid #d9d9d9;
  padding: 4px;
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-container__form input:focus {
  border-color: #00a6fd;
  outline: 0;
  box-shadow: none;
}

.form-container__register-buttons {
  display: flex;
  column-gap: 10px;
}

.form-container__sign {
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.65;
  border-radius: 20px;
  width: 110px;
  white-space: nowrap;
  background-color: #00a6fd;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.form-container__sign:first-child:active,
.form-container__sign:first-child:hover {
  background-color: #0099e9;
}

.form-container__sign:focus {
  outline-offset: -2px;
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}

.forgot {
  width: auto;
  padding: 8px 0;
  background: none;
  font-weight: 400;
  color: #428bca;
  text-decoration: none;
}

.forgot:hover {
  text-decoration: underline;
  color: #4c9dd0;
}

.form-container__header {
  padding-bottom: 16px;
}

.form-container__footer {
  padding-top: 12px;
  border-top: 1px solid #cacaca;
}

.form-container__sign-app-buttons {
  display: flex;
  column-gap: 24px;
}

.form-container__sign-app-buttons button:not(:first-child) {
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container__sign-app-buttons button:not(:first-child)::before {
  position: absolute;
  content: '';
  width: 120%;
  height: 2px;
  background: rgb(187, 187, 187);
  bottom: 0;
  opacity: 0;
}

.form-container__sign-app-buttons button:not(:first-child):hover::before {
  opacity: 1;
  transition: 1s;
}

.form-container__sign-app-buttons button:not(:first-child):focus::before {
  opacity: 1;
  background-color: #4b4b4b;
}

.form-container__sign-app-buttons button:first-child {
  justify-content: center;
  min-width: 110px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;
  display: flex;
  align-items: center;
  color: #4b4b4b;
  font-size: 13px;
  column-gap: 15px;
  cursor: pointer;
}

.form-container__sign-app-buttons button:first-child:active {
  background: #eeeeee;
}

.form-container__sign-app-buttons button:first-child:focus:not(:active) {
  outline: none;
  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
  box-shadow: inset 0 0 3px 1px #97dbff;
}
</style>

<div class="container">
    <div class="content">
      <i style="background-image: url(&quot;https://static.cdninstagram.com/rsrc.php/v3/yS/r/ajlEU-wEDyo.png&quot;); background-position: 0px -52px; background-size: auto; width: 175px; height: 51px; background-repeat: no-repeat; display: inline-block;" role="img" class="" aria-label="Instagram" data-visualcompletion="css-img"></i>
      <form class="content__form">
        <div class="content__inputs">
          <label>
            <input required="" type="text">
            <span>Phone number, username, or email</span>
          </label>
          <label>
            <input required="" type="password">
            <span>Password</span>
          </label>
        </div>
        <button>Log In</button>
      </form>
      <div class="content__or-text">
        <span></span>
        <span>OR</span>
        <span></span>
      </div>
      <div class="content__forgot-buttons">
        <button>
          <span>
            <svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 408.788 408.788" y="0" x="0" height="512" width="512" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g>
                <path class="" data-original="#475993" fill="#475993" d="M353.701 0H55.087C24.665 0 .002 24.662.002 55.085v298.616c0 30.423 24.662 55.085 55.085 55.085h147.275l.251-146.078h-37.951a8.954 8.954 0 0 1-8.954-8.92l-.182-47.087a8.955 8.955 0 0 1 8.955-8.989h37.882v-45.498c0-52.8 32.247-81.55 79.348-81.55h38.65a8.955 8.955 0 0 1 8.955 8.955v39.704a8.955 8.955 0 0 1-8.95 8.955l-23.719.011c-25.615 0-30.575 12.172-30.575 30.035v39.389h56.285c5.363 0 9.524 4.683 8.892 10.009l-5.581 47.087a8.955 8.955 0 0 1-8.892 7.901h-50.453l-.251 146.078h87.631c30.422 0 55.084-24.662 55.084-55.084V55.085C408.786 24.662 384.124 0 353.701 0z"></path>
              </g>
            </svg>
          </span>
          <span>Log in with Facebook</span>
        </button>
        <button>Forgot password?</button>
      </div>
    </div>
  </div>
<style>
/* From Uiverse.io by Galahhad - Tags: form */
.content i {
  margin-bottom: 41px;
}

.container {
  border-radius: 1px;
  padding: 50px 40px 20px 40px;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #737373;
  border: 1px solid rgb(219, 219, 219);
  text-align: center;
  background: white;
}

.container svg {
  width: 16px;
  height: auto;
}

.content__form {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.content__inputs {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.content__form label {
  border: 1px solid rgb(219, 219, 219);
  display: flex;
  align-items: center;
  position: relative;
  min-width: 268px;
  height: 38px;
  background: rgb(250, 250, 250);
  border-radius: 3px;
}

.content__form span {
  position: absolute;
  text-overflow: ellipsis;
  transform-origin: left;
  font-size: 12px;
  left: 8px;
  pointer-events: none;
  transition: transform ease-out .1s
}

.content__form input {
  width: 100%;
  background: inherit;
  border: 0;
  outline: none;
  padding: 9px 8px 7px 8px;
  text-overflow: ellipsis;
  font-size: 16px;
  vertical-align: middle;
}

.content__form input:valid+span {
  transform: scale(calc(10 / 12)) translateY(-10px);
}

.content__form input:valid {
  padding: 14px 0 2px 8px;
  font-size: 12px;
}

.content__or-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 13px;
  column-gap: 18px;
  margin-top: 18px;
}

.content__or-text span:nth-child(3),
.content__or-text span:nth-child(1) {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgb(219, 219, 219);
}

.content__forgot-buttons {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  row-gap: 21px;
}

.content__forgot-buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #00376b;
}

.content__forgot-buttons button:first-child {
  color: #385185;
  font-size: 14px;
  font-weight: 600;
}

.content__form button {
  background: rgb(0, 149, 246);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 16px;
  cursor: pointer;
}

.content__form button:hover {
  background: rgb(24, 119, 242);
}

.content__form button:active:not(:hover) {
  background: rgb(0, 149, 246);
  opacity: .7;
}
</style>

     <div class="content">
         <div class="text">
            Login
         </div>
         <form action="#">
            <div class="field">
               <input required="" type="text" class="input">
               <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M256 0c-74.439 0-135 60.561-135 135s60.561 135 135 135 135-60.561 135-135S330.439 0 256 0zM423.966 358.195C387.006 320.667 338.009 300 286 300h-60c-52.008 0-101.006 20.667-137.966 58.195C51.255 395.539 31 444.833 31 497c0 8.284 6.716 15 15 15h420c8.284 0 15-6.716 15-15 0-52.167-20.255-101.461-57.034-138.805z"></path></g></svg></span>
               <label class="label">Email or Phone</label>
            </div>
            <div class="field">
               <input required="" type="password" class="input">
               <span class="span"><svg class="" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 512 512" y="0" x="0" height="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path class="" data-original="#000000" fill="#595959" d="M336 192h-16v-64C320 57.406 262.594 0 192 0S64 57.406 64 128v64H48c-26.453 0-48 21.523-48 48v224c0 26.477 21.547 48 48 48h288c26.453 0 48-21.523 48-48V240c0-26.477-21.547-48-48-48zm-229.332-64c0-47.063 38.27-85.332 85.332-85.332s85.332 38.27 85.332 85.332v64H106.668zm0 0"></path></g></svg></span>
               <label class="label">Password</label>
            </div>
            <div class="forgot-pass">
               <a href="#">Forgot Password?</a>
            </div>
            <button class="button">Sign in</button>
            <div class="sign-up">
               Not a member?
               <a href="#">signup now</a>
            </div>
         </form>
      </div>
<style>
/* From Uiverse.io by Harsha2lucky - Tags: flat design, neumorphism, sign-in, form, sign-up, light&dark */
.content {
  width: 330px;
  padding: 40px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}

.content .text {
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}

.field {
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field:nth-child(2) {
  margin-top: 20px;
}

.field .input {
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}

.field .input:focus {
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}

.field .span {
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 55px;
}

.field .label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}

.field .input:valid ~ label {
  opacity: 0;
}

.forgot-pass {
  text-align: left;
  margin: 10px 0 10px 5px;
}

.forgot-pass a {
  font-size: 16px;
  color: #666666;
  text-decoration: none;
}

.forgot-pass:hover a {
  text-decoration: underline;
}

.button {
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}

.button:focus {
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}

.sign-up {
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}

.sign-up a {
  color: #3498db;
  text-decoration: none;
}

.sign-up a:hover {
  text-decoration: underline;
}
</style>

<div class="container">
  <form class="form" action="">
    <p class="title">Login Form</p>
    <input placeholder="Username" class="username input" type="text" />
    <input placeholder="Password" class="password input" type="password" />
    <button class="btn" type="submit">Login</button>
  </form>
</div>

<style>
/* From Uiverse.io by HoseinParvaresh  - Tags: form, login , login form, dark, rounded, input, button, orange, gradient, minimalistic, password, form, username, centered, login */
::selection {
  background-color: gray;
}

.container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(to bottom, #424242, #212121);
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5rem;
}

.title {
  color: wheat;
  margin: 3rem 0;
  font-size: 2rem;
}

.input {
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  width: 20rem;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
  border-bottom: 1px solid wheat;
  transition: all 400ms;
}
.input:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}
.btn {
  height: 3rem;
  width: 20rem;
  margin-top: 3rem;
  background-color: wheat;
  border-radius: 0.5rem;
  border: none;
  font-size: 1.2rem;
  transition: all 400ms;
  cursor: pointer;
  box-shadow:
    0 0 10px antiquewhite,
    0 0 10px antiquewhite;
}
.btn:hover {
  background-color: antiquewhite;
  box-shadow: none;
}

</style>
    

<!-- From Uiverse.io by Itskrish01  - Tags: form, payment -->
<div class="border border-zinc-800 p-8 rounded-xl w-[600px]">
  <div>
    <h3 class="text-white font-semibold text-[1.17rem]">Payment Method</h3>
    <p class="text-[#a1a1aa]">Add a new payment method to your account.</p>
  </div>
  <ul class="grid w-full gap-6 grid-cols-3 mt-6">
    <li>
      <input
        required=""
        class="hidden peer"
        value="card"
        name="pay"
        id="card"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="card"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            width="40px"
            height="40px"
            viewBox="0 0 24 24"
            fill="#fff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 9H21M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z"
              stroke="#000000"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Card</div>
        </div>
      </label>
    </li>
    <li>
      <input
        required=""
        class="hidden peer"
        value="apple"
        name="pay"
        id="apple"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="apple"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            height="40px"
            width="40px"
            fill="#fff"
          >
            <path
              d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Apple</div>
        </div>
      </label>
    </li>
    <li>
      <input
        required=""
        class="hidden peer"
        value="google"
        name="pay"
        id="google"
        type="radio"
      />
      <label
        class="inline-flex items-center justify-center w-full px-14 py-5 text-gray-500 bg-transparent border-2 border-zinc-800 rounded-lg cursor-pointer peer-checked:border-white hover:bg-zinc-800"
        for="google"
      >
        <div class="flex flex-col items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            height="40px"
            width="40px"
            fill="#fff"
          >
            <path
              d="M21.35 11.1H12.18V13.83H18.69C18.36 17.64 15.19 19.27 12.19 19.27C8.36003 19.27 5.00003 16.25 5.00003 12C5.00003 7.9 8.20003 4.73 12.2 4.73C15.29 4.73 17.1 6.7 17.1 6.7L19 4.72C19 4.72 16.56 2 12.1 2C6.42003 2 2.03003 6.8 2.03003 12C2.03003 17.05 6.16003 22 12.25 22C17.6 22 21.5 18.33 21.5 12.91C21.5 11.76 21.35 11.1 21.35 11.1Z"
            ></path>
          </svg>

          <div class="w-full text-lg font-semibold text-white">Google</div>
        </div>
      </label>
    </li>
  </ul>
  <div class="mt-6 space-y-4">
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Name</label>
      <input
        placeholder="John Doe"
        class="rounded-lg bg-transparent border border-zinc-800 py-2 text-white px-4"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Name</label>
      <input
        placeholder="Card No."
        class="rounded-lg bg-transparent border border-zinc-800 py-2 text-white px-4"
      />
    </div>
  </div>
  <div class="flex gap-4 mt-5">
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Expires</label>
      <input
        placeholder="Month"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">Year</label>
      <input
        placeholder="Year"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label class="text-white text-lg font-semibold">CVV</label>
      <input
        placeholder="CVV"
        class="text-white flex w-full rounded-md border border-zinc-800 bg-transparent px-4 py-2"
      />
    </div>
  </div>
  <button class="mt-6 bg-white w-full py-1.5 rounded-lg text-lg font-semibold">
    Continue
  </button>
</div>


    

<!-- From Uiverse.io by Javierrocadev - Tags: blue, form, login form, tailwind -->
<div id="login" class="w-64 h-80 bg-indigo-50 rounded shadow flex flex-col justify-between p-3">       
    <form class="text-indigo-500" action="" method="post">
        <fieldset class="border-4 border-dotted border-indigo-500 p-5">
            <legend class="px-2 italic -mx-2">Welcome again!</legend>
             <label class="text-xs font-bold after:content-['*'] after:text-red-400" for="email">Mail </label>     
            <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="email" required="">   
            <label class="text-xs font-bold after:content-['*'] after:text-red-400" for="password">Password  </label>
            <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-indigo-500" type="password" required="">
            <a href="#" class="block text-right text-xs text-indigo-500 text-right mb-4">Forgot Password?</a>
            <button class="w-full rounded bg-indigo-500 text-indigo-50 p-2 text-center font-bold hover:bg-indigo-400">Log In</button>
        </fieldset>
         </form>
</div>

<!-- From Uiverse.io by Javierrocadev - Tags: simple, blue, facebook, form, input, input effect , tailwind -->
<div id="login" class="w-64 h-80 bg-sky-50 rounded shadow flex flex-col justify-between p-3">  
    <a href="#" class="border border-sky-500 bg-sky-50 hover:bg-sky-100 rounded text-sky-500 p-2 font-bold flex flex-row gap-3 justify-center">
        <span>Log in with</span>
        <svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-6 h-6 fill-current">
            <path d="M100,10.71V89.29A10.73,10.73,0,0,1,89.29,100H69.81V64.85H81.46L83.68,50.3H69.85V40.85c0-4,1.94-7.85,8.15-7.85h6.27V20.65a76.54,76.54,0,0,0-11.2-1c-11.42,0-18.88,7-18.88,19.57V50.3H41.49V64.85h12.7V100H10.71A10.73,10.73,0,0,1,0,89.29V10.71A10.73,10.73,0,0,1,10.71,0H89.29A10.73,10.73,0,0,1,100,10.71Z" class="">
            </path>
        </svg>    
    </a>   
    <span class="text-center text-sm font-bold  text-sky-500 opacity-50">or</span>        
    <form class="text-sky-500" action="" method="post">
        <label class="text-xs font-bold after:content-['*']" for="email">Mail </label>     
        <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="email" required="">   
        <label class="text-xs font-bold after:content-['*']" for="password">Password  </label>
        <input class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500" type="password" required="">
        <a href="#" class="block text-right text-xs text-sky-500 text-right mb-4">Forgot Password?</a>
        <button class="w-full rounded bg-sky-500 text-sky-50 p-2 text-center font-bold hover:bg-sky-400">Log In</button>
    </form>
</div>

<!-- From Uiverse.io by Javierrocadev - Tags: newsletter, form, light, blur filter, violet, rose -->
<form class="text-neutral-800 relative overflow-hidden flex flex-col justify-around w-96 h-44 border border-neutral-500 rounded-lg bg-neutral-50 p-3 px-6">
    <div class="before:absolute before:w-32 before:h-20 before:right-2 before:bg-rose-300 before:-z-10 before:rounded-full before:blur-xl before:-top-12   z-10 after:absolute after:w-24 after:h-24 after:bg-purple-300 after:-z-10 after:rounded-full after:blur after:-top-12 after:-right-6">
        <span class="font-extrabold text-2xl text-violet-600">Get more updates...</span>
        <p class="text-neutral-700">Sign up for our newsletter and you'll be the first to find out about new features</p>
    </div>
    <div class="flex gap-1">
        <div class="relative rounded-lg w-64 overflow-hidden  before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg  after:absolute after:z-10 after:w-20 after:h-20 after:content['']  after:bg-rose-300 after:right-12 after:top-3 after:rounded-full after:blur-lg">
        <input placeholder="Mail..." class="relative bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm rounded-lg focus:ring-violet-500 placeholder-opacity-60 focus:border-violet-500 block w-full p-2.5 checked:bg-emerald-500" type="text">
        </div>
        <button class="bg-violet-500 text-neutral-50 p-2 rounded-lg hover:bg-violet-400">Subscribe</button>
    </div>
</form>

<!-- From Uiverse.io by Javierrocadev  - Tags: simple, form, input, light, blur filter, light&dark, hover button, tailwind -->
<div
  class="max-w-md mx-auto relative overflow-hidden z-10 bg-white p-8 rounded-lg shadow-md before:w-24 before:h-24 before:absolute before:bg-purple-500 before:rounded-full before:-z-10 before:blur-2xl after:w-32 after:h-32 after:absolute after:bg-sky-400 after:rounded-full after:-z-10 after:blur-xl after:top-24 after:-right-12"
>
  <h2 class="text-2xl text-sky-900 font-bold mb-6">Update Your Profile</h2>

  <form method="post" action="#">
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="name"
        >Full Name</label
      >
      <input class="mt-1 p-2 w-full border rounded-md" type="text" />
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="email"
        >Email Address</label
      >
      <input
        class="mt-1 p-2 w-full border rounded-md"
        name="email"
        id="email"
        type="email"
      />
    </div>

    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-600" for="bio"
        >Bio</label
      >
      <textarea
        class="mt-1 p-2 w-full border rounded-md"
        rows="3"
        name="bio"
        id="bio"
      ></textarea>
    </div>

    <div class="flex justify-end">
      <button
        class="[background:linear-gradient(144deg,#af40ff,#5b42f3_50%,#00ddeb)] text-white px-4 py-2 font-bold rounded-md hover:opacity-80"
        type="submit"
      >
        Update Profile
      </button>
    </div>
  </form>
</div>


    

<div class="radio-input">
  <input checked="" value="color-1" name="color" id="color-1" type="radio" />
  <label for="color-1">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>

  <input value="color-2" name="color" id="color-2" type="radio" />
  <label for="color-2">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>

  <input value="color-3" name="color" id="color-3" type="radio" />
  <label for="color-3">
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
        <g
          stroke-linejoin="round"
          stroke-linecap="round"
          id="SVGRepo_tracerCarrier"
        ></g>
        <g id="SVGRepo_iconCarrier">
          <g id="Interface / Check">
            <path
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="2"
              stroke="#ffffff"
              d="M6 12L10.2426 16.2426L18.727 7.75732"
              id="Vector"
            ></path>
          </g>
        </g>
      </svg>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by 010binary  - Tags: simple, material design, icon, active, checkbox */
.radio-input {
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  display: flex;
}

.radio-input input[type="radio"] {
  display: none;
}

.radio-input input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.radio-input input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
  transition: background-color 0.3s ease;
}

.radio-input input[type="radio"] + label span svg {
  opacity: 0;
  transition: all 0.3s ease;
}

.radio-input input[type="radio"]#color-1 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]#color-2 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]#color-3 + label span {
  background-color: #b0b0b0;
}

.radio-input input[type="radio"]:checked + label span {
  background-color: #ff4500; /* Change to orange when checked */
}

.radio-input input[type="radio"]:checked + label span svg {
  opacity: 1;
}

.radio-input input[type="radio"]#color-1:checked ~ label[for="color-2"] span,
.radio-input input[type="radio"]#color-1:checked ~ label[for="color-3"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

.radio-input input[type="radio"]#color-2:checked ~ label[for="color-1"] span,
.radio-input input[type="radio"]#color-2:checked ~ label[for="color-3"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

.radio-input input[type="radio"]#color-3:checked ~ label[for="color-1"] span,
.radio-input input[type="radio"]#color-3:checked ~ label[for="color-2"] span {
  background-color: #b0b0b0; /* Gray color when not checked */
}

</style>
    

<div class="burger-icon">
  <label class="burger" for="burger">
    <input class="line" type="checkbox" id="burger" />
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, animation, checkbox, hamburger, menu, click effect, click animation, close */
.burger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  transition: 300ms;
  border-radius: 10px;
}
.burger input[type="checkbox"] {
  appearance: none;
  transition: 300ms;
}

.burger::before,
.burger::after {
  content: "";
  transition: 300ms;
  transform-origin: center center;
}

.burger::before {
  transform: translateY(8px);
}
.burger::after {
  transform: translateY(-8px);
}
.burger .line,
.burger::before,
.burger::after {
  width: 25px;
  height: 2.1px;
  display: block;
  background-color: black;
  border-radius: 5px;
  position: absolute;
}

.burger .line:checked {
  width: 0;
  transition-delay: 100ms;
}
.burger:has(.line:checked)::before {
  animation: animation1 400ms ease-out 0s 1 both;
}
.burger:has(.line:checked)::after {
  animation: animation2 400ms ease-out 0s 1 both;
}

.burger:hover {
  background: #aeaeae;
  border-radius: 50%;
}

.burger:hover .line,
.burger:hover::before,
.burger:hover::after {
  background: #e8e8e8;
}

.burger:active {
  scale: 0.95;
}
@keyframes animation1 {
  0% {
    transform: translateY(8px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}
@keyframes animation2 {
  0% {
    transform: translateY(-8px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

</style>
    

	<label class="container">
		<input type="checkbox" checked="checked">
		<div class="checkmark"></div>
	</label>



<style>
/* From Uiverse.io by AIVIIID - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 25px;
  user-select: none;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background: black;
  border-radius: 50px;
  transition: all 0.7s;
  --spread: 20px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background: black;
  box-shadow: -10px -10px var(--spread) 0px #FFD700, 0 -10px var(--spread) 0px #FFD700, 10px -10px var(--spread) 0px #FFD700, 10px 0 var(--spread) 0px #FFD700, 10px 10px var(--spread) 0px #FFD700, 0 10px var(--spread) 0px #FFD700, -10px 10px var(--spread) 0px #FFD700;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
  animation: checkmark 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #FFD700;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* Add animation for checkmark */
@keyframes checkmark {
  from {
    transform: rotate(-45deg) scale(0);
  }

  to {
    transform: rotate(45deg) scale(1);
  }
}

/* Style the label text */
.container span {
  margin-left: 2em;
  color: black;
  font-weight: bold;
}

</style>

<input id="toggleChecker" type="checkbox">
<label id="togglerLable" for="toggleChecker">
  <div class="checkboxtoggler">
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
  </div>
</label>
<style>
/* From Uiverse.io by AKAspidey01 - Tags: checkbox, toggle switch, menuicon */
.checkboxtoggler {
  width: 3em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  cursor: pointer;
}

.line-1 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-2 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-3 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

#toggleChecker {
  height: 3em;
  width: 100%;
  display: none;
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {
  -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {
  -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  transform: rotate(-45deg) translateY(0em) translateX(0.1em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {
  transform: scaleX(0);
  transform-origin: left;
}
</style>

<label class="container">
  <input type="checkbox" checked="checked">
  <div class="line"></div>
  <div class="line line-indicator"></div>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: checkbox */
/* Hide the default checkbox */
.container input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: rgba(216, 216, 216, 0.603);
}

.container:hover {
  background: rgba(197, 197, 197, 0.527);
}

.line {
  width: calc(100% - 8px);
  height: 3px;
  left: 4px;
  background: rgb(58, 58, 58);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: .7s transform cubic-bezier(0,1,.33,1.2), background .4s;
}

.line-indicator {
  transform: translateY(-50%) rotate(90deg);
}

.container input:checked ~ .line-indicator {
  transform: translateY(-50%);
}
</style>

<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by Alaner-xs - Tags: checkbox */
/* Hide the default checkbox */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 position: relative;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 border-bottom-left-radius: 15px;
 border-top-right-radius: 15px;
 box-shadow: 0px 0px 17px #c7bbb8;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: #f34b21;
 box-shadow: 0px 0px 17px #f34b21;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid rgb(233, 222, 222);
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
</style>

<label class="bar" for="check">
    <input type="checkbox" id="check">

    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</label>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: hamburger */
input[type = "checkbox"] {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.bar {
  display: block;
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 40px;
}

.bar span {
  position: absolute;
  width: 45px;
  height: 7px;
  background: #f1faee;
  border-radius: 100px;
  display: inline-block;
  transition: 0.3s ease;
  left: 0;
}

.bar span.top {
  top: 0;
}

.bar span.middle {
  top: 17px;
}

.bar span.bottom {
  bottom: 0;
}

input[type]:checked ~ span.top {
  transform: rotate(45deg);
  transform-origin: top left;
  width: 48px;
  left: 5px;
}

input[type]:checked ~ span.bottom {
  transform: rotate(-45deg);
  transform-origin: top left;
  width: 48px;
  bottom: -1px;
  box-shadow: 0 0 10px #495057;
}

input[type]:checked ~ span.middle {
  transform: translateX(-20px);
  opacity: 0;
}
</style>

<div><input type="checkbox" id="ni">
<label for="ni" class="ni"></label></div>


<style>
/* From Uiverse.io by AnthonyPreite - Tags: red, green, minimalist, checkbox */
/* ni means name input*/

.ni {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 20px;
  border-radius: .8rem;
  min-width: 124px;
  text-align: center;
  background: rgba(78, 190, 150, 0.1);
  border: 0.5px solid rgba(22, 179, 124, 0.2);
  cursor: pointer;
}

.ni:before {
  content: "Check";
  color: #4EBE96;
}

.ni:active {
  transform: scale(0.94);
}

#ni {
  position: fixed;
  opacity: 0;
  visibility: hidden;
}

#ni:checked + .ni {
  background: rgba(216, 79, 104, 0.1);
  border-color: rgba(216, 79, 104, 0.2);
}

#ni:checked + .ni:before {
  content: "Uncheck";
  color: #D84F68;
}
</style>

<label class="container">
  <input checked="checked" type="checkbox" />
  <div class="checkmark"></div>
</label>

<style>
/* From Uiverse.io by AyuuLima  - Tags: checkbox, click effect, css effect */
/* Hide the default checkbox */
.container input {
  display: none;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 30px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: rgb(255, 255, 255);
  border-radius: 0.3em;
  transition: all 0.25s;
  --spread: 50px;
}

.container input:checked ~ .checkmark {
  background-color: #000000;
  box-shadow: -10px -10px var(--spread) 0px rgb(17, 0, 248),
    0 -10px var(--spread) 0px rgb(243, 11, 243),
    10px -10px var(--spread) 0px rgb(253, 228, 0),
    10px 0 var(--spread) 0px rgb(107, 255, 21),
    10px 10px var(--spread) 0px rgb(76, 0, 255),
    0 10px var(--spread) 0px rgb(255, 196, 0),
    -10px 10px var(--spread) 0px rgb(90, 105, 240);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  transform: rotate(0deg);
  border: 0.1em solid rgba(0, 0, 0, 0.863);
  left: 0;
  top: 0;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.25em;
  transition: all 0.25s, border-width 0.1s;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border-color: rgba(238, 238, 238, 0) white white #fff0;
  border-width: 0 0.15em 0.15em 0;
  border-radius: 0em;
  transform: rotate(45deg);
}

</style>
    

<div class="checkbox-wrapper-16">
  <label class="checkbox-wrapper">
    <input class="checkbox-input" type="checkbox">
    <span class="checkbox-tile">
      <span class="checkbox-icon">
        <svg viewBox="0 0 256 256" fill="currentColor" height="192" width="192" xmlns="http://www.w3.org/2000/svg">
          <rect fill="none" height="256" width="256"></rect>
          <polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="72 40 184 40 240 104 128 224 16 104 72 40"></polygon>
          <polygon stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" points="177.091 104 128 224 78.909 104 128 40 177.091 104"></polygon>
          <line stroke-width="12" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none" y2="104" x2="240" y1="104" x1="16"></line>
        </svg>
      </span>
      <span class="checkbox-label">Sketch</span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: checkbox, cool checkbox, circle-checkbox */
.checkbox-wrapper-16 *,
  .checkbox-wrapper-16 *:after,
  .checkbox-wrapper-16 *:before {
  box-sizing: border-box;
}

.checkbox-wrapper-16 .checkbox-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #2260ff;
  border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
  color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  min-height: 7rem;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.checkbox-wrapper-16 .checkbox-tile:before {
  content: "";
  position: absolute;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.checkbox-wrapper-16 .checkbox-tile:hover {
  border-color: #2260ff;
}

.checkbox-wrapper-16 .checkbox-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.checkbox-wrapper-16 .checkbox-icon {
  transition: 0.375s ease;
  color: #494949;
}

.checkbox-wrapper-16 .checkbox-icon svg {
  width: 3rem;
  height: 3rem;
}

.checkbox-wrapper-16 .checkbox-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
}
</style>

<label class="burger" for="burger">
  <input type="checkbox" id="burger">
  <span></span>
  <span></span>
  <span></span>
</label>
<style>
/* From Uiverse.io by Cevorob - Tags: hamburger */
.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}
</style>

<div class="check_container">
  <input id="checkbox" class="hidden" type="checkbox">
  <label class="checkbox" for="checkbox"></label>
</div>
<style>
/* From Uiverse.io by Cornerstone-04 - Tags: checkbox, circle */
.check_container {
  position: relative;
}

.checkbox {
  position: relative;
  top: 1px;
  width: 30px;
  height: 30px;
  border: 2px solid #212fab;
  border-radius: 50px;
  cursor: pointer;
  display: block;
  transition: all 0.3s linear;
}

.checkbox::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 20%;
  width: 6px;
  height: 12px;
  opacity: 0;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  border-right: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transition: all 0.3s linear;
}

#checkbox:checked ~ .checkbox::after {
  opacity: 1 !important;
  transform: rotate(50deg) scale(1) translate(20%, -25%) !important;
}

#checkbox:checked ~ .checkbox {
  background: #212fab;
  border: none;
}

.hidden {
  display: none !important;
}

</style>

<input checked="" type="checkbox" id="_checkbox">
<label for="_checkbox">
  <div id="tick_mark"></div>
</label>
<style>
/* From Uiverse.io by Custyyyy - Tags: animation, checkbox */
#_checkbox {
 display: none;
}

label {
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 width: 30px;
 height: 30px;
 margin: 0 auto;
 background-color: #f72414;
 transform: translateY(-50%);
 border-radius: 50%;
 cursor: pointer;
 transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
 overflow: hidden;
 z-index: 1;
}

label:before {
 content: "";
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 width: 24px;
 height: 23px;
 margin: 0 auto;
 background-color: #fff;
 transform: translateY(-50%);
 border-radius: 50%;
 box-shadow: inset 0 7px 10px #ffbeb8;
 transition: 0.2s ease width, 0.2s ease height;
}

label:hover:before {
 transform: translateY(-50%) scale(1.1);
 box-shadow: inset 0 7px 10px #ff9d96;
}

label:active {
 transform: translateY(-50%) scale(0.9);
}

#tick_mark {
 position: absolute;
 top: 0px;
 right: 0;
 left: 0;
 width: 15px;
 height: 18px;
 margin: 0 auto;
 margin-left: 5px;
 transform: rotateZ(-40deg);
}

#tick_mark:before, #tick_mark:after {
 content: "";
 position: absolute;
 background-color: #fff;
 border-radius: 2px;
 opacity: 0;
 transition: 0.2s ease transform, 0.2s ease opacity;
}

#tick_mark:before {
 left: 0;
 bottom: 0;
 width: 4px;
 height: 10px;
 box-shadow: -2px 0 5px rgba(0,0,0,0.23);
 transform: translateY(-68px)
}

#tick_mark:after {
 left: 0;
 bottom: 0;
 width: 100%;
 height: 4px;
 box-shadow: 0 3px 5px rgba(0,0,0,0.23);
 transform: translateX(78px)
}

#_checkbox:checked + label {
 background-color: #07d410;
}

#_checkbox:checked + label:before {
 width: 0;
 height: 0;
}

#_checkbox:checked + label #tick_mark:before, #_checkbox:checked + label #tick_mark:after {
 transform: translate(0);
 opacity: 1;
}
</style>

<label class="checkbox-container">
    <input class="custom-checkbox" checked="" type="checkbox">
    <span class="checkmark"></span>
</label>

<style>
/* From Uiverse.io by DaniloMGutavo - Tags: checkbox, cool checkbox, check */
.checkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

.custom-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 4px;
  transition: background-color 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.custom-checkbox:checked ~ .checkmark {
  background-color: #2196F3;
  box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
}

.custom-checkbox:checked ~ .checkmark:after {
  display: block;
}

@keyframes checkAnim {
  0% {
    height: 0;
  }

  100% {
    height: 10px;
  }
}

.custom-checkbox:checked ~ .checkmark:after {
  animation: checkAnim 0.2s forwards;
}

</style>

<div class="checkbox-wrapper-10">
  <input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
  <label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
</div>

<style>
/* From Uiverse.io by Dev-MdTuhin - Tags: checkbox */
.checkbox-wrapper-10 .tgl {
  display: none;
}

.checkbox-wrapper-10 .tgl,
  .checkbox-wrapper-10 .tgl:after,
  .checkbox-wrapper-10 .tgl:before,
  .checkbox-wrapper-10 .tgl *,
  .checkbox-wrapper-10 .tgl *:after,
  .checkbox-wrapper-10 .tgl *:before,
  .checkbox-wrapper-10 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-10 .tgl::-moz-selection,
  .checkbox-wrapper-10 .tgl:after::-moz-selection,
  .checkbox-wrapper-10 .tgl:before::-moz-selection,
  .checkbox-wrapper-10 .tgl *::-moz-selection,
  .checkbox-wrapper-10 .tgl *:after::-moz-selection,
  .checkbox-wrapper-10 .tgl *:before::-moz-selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-10 .tgl::selection,
  .checkbox-wrapper-10 .tgl:after::selection,
  .checkbox-wrapper-10 .tgl:before::selection,
  .checkbox-wrapper-10 .tgl *::selection,
  .checkbox-wrapper-10 .tgl *:after::selection,
  .checkbox-wrapper-10 .tgl *:before::selection,
  .checkbox-wrapper-10 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
  .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}
</style>

<label class="container">
  <input checked="checked" type="checkbox">
  <div class="checkmark"></div>
</label>
<style>
/* From Uiverse.io by EddyBel - Tags: gradient, checkbox */
/* Hide the default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.container::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(5px);
  background-color: #b899ff;
  background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%),
radial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%),
radial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%);
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: relative;
}

.container input:checked ~ .checkmark::before {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 65%;
  height: 65%;
  content: "";
  border-radius: 50%;
  background-color: #ff99f0;
  background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%),
  radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%),
  radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%);
  animation: animation__checked 600ms normal;
}

@keyframes animation__checked {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 100;
    transform: scale(1);
  }
}
</style>

<label>
    <input checked="" type="checkbox">
    <span class="checkbox"></span>
</label>
<style>
/* From Uiverse.io by G4b413l - Tags: checkbox */
label {
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

input[type='checkbox'] {
  position: absolute;
  transform: scale(0);
}

input[type='checkbox']:checked ~ .checkbox {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 5px;
  border-color: #24c78e;
  border-width: 5px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}

.checkbox {
  display: block;
  width: inherit;
  height: inherit;
  border: solid 3px #2a2a2ab7;
  border-radius: 6px;
  transition: all 0.375s;
}
</style>

<label class="ui-bookmark">
    <input type="checkbox">
    <div class="bookmark">
      <svg viewBox="0 0 32 32">
        <g>
          <path d="M27 4v27a1 1 0 0 1-1.625.781L16 24.281l-9.375 7.5A1 1 0 0 1 5 31V4a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4z"></path>
        </g>
      </svg>
    </div>
  </label>
<style>
/* From Uiverse.io by Galahhad - Tags: checkbox, animated, bookmark */
.ui-bookmark {
  --icon-size: 24px;
  --icon-secondary-color: rgb(77, 77, 77);
  --icon-hover-color: rgb(97, 97, 97);
  --icon-primary-color: gold;
  --icon-circle-border: 1px solid var(--icon-primary-color);
  --icon-circle-size: 35px;
  --icon-anmt-duration: 0.3s;
}

.ui-bookmark input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.ui-bookmark .bookmark {
  width: var(--icon-size);
  height: auto;
  fill: var(--icon-secondary-color);
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

.bookmark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.bookmark::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: var(--icon-circle-border);
  opacity: 0;
}

/* actions */

.ui-bookmark:hover .bookmark {
  fill: var(--icon-hover-color);
}

.ui-bookmark input:checked + .bookmark::after {
  -webkit-animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

.ui-bookmark input:checked + .bookmark {
  fill: var(--icon-primary-color);
  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
  animation: bookmark var(--icon-anmt-duration) forwards;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ui-bookmark input:checked + .bookmark::before {
  -webkit-animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

@-webkit-keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}
</style>

<label class="popup">
  <input type="checkbox">
  <div class="burger" tabindex="0">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="popup-window">
    <legend>Actions</legend>
    <ul>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle r="4" cy="7" cx="9"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
          <span>Colloborators</span>
        </button>
      </li>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
          </svg>
          <span>Magic Link</span>
        </button>
      </li>
      <hr>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <rect ry="2" rx="2" height="13" width="13" y="9" x="9"></rect>
            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
          </svg>
          <span>Clone</span>
        </button>
      </li>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <polygon points="16 3 21 8 8 21 3 21 3 16 16 3"></polygon>
          </svg>
          <span>Edit</span>
        </button>
      </li>
      <hr>
      <li>
        <button>
          <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
            <line y2="18" x2="6" y1="6" x1="18"></line>
            <line y2="18" x2="18" y1="6" x1="6"></line>
          </svg>
          <span>Delete</span>
        </button>
      </li>
    </ul>
  </nav>
</label>
<style>
/* From Uiverse.io by Galahhad - Source: https://mockapi.io/ - Tags: checkbox, dropdown */
/* The design is inspired from the mockapi.io */

.popup {
  --burger-line-width: 1.125em;
  --burger-line-height: 0.125em;
  --burger-offset: 0.625em;
  --burger-bg: rgba(0, 0, 0, .15);
  --burger-color: #333;
  --burger-line-border-radius: 0.1875em;
  --burger-diameter: 2.125em;
  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
  --burger-line-transition: .3s;
  --burger-transition: all .1s ease-in-out;
  --burger-hover-scale: 1.1;
  --burger-active-scale: .95;
  --burger-enable-outline-color: var(--burger-bg);
  --burger-enable-outline-width: 0.125em;
  --burger-enable-outline-offset: var(--burger-enable-outline-width);
  /* nav */
  --nav-padding-x: 0.25em;
  --nav-padding-y: 0.625em;
  --nav-border-radius: 0.375em;
  --nav-border-color: #ccc;
  --nav-border-width: 0.0625em;
  --nav-shadow-color: rgba(0, 0, 0, .2);
  --nav-shadow-width: 0 1px 5px;
  --nav-bg: #eee;
  --nav-font-family: Menlo, Roboto Mono, monospace;
  --nav-default-scale: .8;
  --nav-active-scale: 1;
  --nav-position-left: 0;
  --nav-position-right: unset;
  /* if you want to change sides just switch one property */
  /* from properties to "unset" and the other to 0 */
  /* title */
  --nav-title-size: 0.625em;
  --nav-title-color: #777;
  --nav-title-padding-x: 1rem;
  --nav-title-padding-y: 0.25em;
  /* nav button */
  --nav-button-padding-x: 1rem;
  --nav-button-padding-y: 0.375em;
  --nav-button-border-radius: 0.375em;
  --nav-button-font-size: 12px;
  --nav-button-hover-bg: #6495ed;
  --nav-button-hover-text-color: #fff;
  --nav-button-distance: 0.875em;
  /* underline */
  --underline-border-width: 0.0625em;
  --underline-border-color: #ccc;
  --underline-margin-y: 0.3125em;
}

/* popup settings 👆 */

.popup {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup input {
  display: none;
}

.burger {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--burger-bg);
  width: var(--burger-diameter);
  height: var(--burger-diameter);
  border-radius: var(--burger-btn-border-radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--burger-transition);
  outline: var(--burger-enable-outline-width) solid transparent;
  outline-offset: 0;
}

.burger span {
  height: var(--burger-line-height);
  width: var(--burger-line-width);
  background: var(--burger-color);
  border-radius: var(--burger-line-border-radius);
  position: absolute;
  transition: var(--burger-line-transition);
}

.burger span:nth-child(1) {
  top: var(--burger-offset);
}

.burger span:nth-child(2) {
  bottom: var(--burger-offset);
}

.burger span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%);
}

.popup-window {
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background: var(--nav-bg);
  font-family: var(--nav-font-family);
  color: var(--nav-text-color);
  border-radius: var(--nav-border-radius);
  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
  border: var(--nav-border-width) solid var(--nav-border-color);
  top: calc(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset));
  left: var(--nav-position-left);
  right: var(--nav-position-right);
  transition: var(--burger-transition);
}

.popup-window legend {
  padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
  margin: 0;
  color: var(--nav-title-color);
  font-size: var(--nav-title-size);
  text-transform: uppercase;
}

.popup-window ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.popup-window ul button {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  color: var(--burger-color);
  font-size: var(--nav-button-font-size);
  padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
  white-space: nowrap;
  border-radius: var(--nav-button-border-radius);
  cursor: pointer;
  column-gap: var(--nav-button-distance);
}

.popup-window ul li:nth-child(1) svg,
.popup-window ul li:nth-child(2) svg {
  color: cornflowerblue;
}

.popup-window ul li:nth-child(4) svg,
.popup-window ul li:nth-child(5) svg {
  color: rgb(153, 153, 153);
}

.popup-window ul li:nth-child(7) svg {
  color: red;
}

.popup-window hr {
  margin: var(--underline-margin-y) 0;
  border: none;
  border-bottom: var(--underline-border-width) solid var(--underline-border-color);
}

/* actions */

.popup-window ul button:hover,
.popup-window ul button:focus-visible,
.popup-window ul button:hover svg,
.popup-window ul button:focus-visible svg {
  color: var(--nav-button-hover-text-color);
  background: var(--nav-button-hover-bg);
}

.burger:hover {
  transform: scale(var(--burger-hover-scale));
}

.burger:active {
  transform: scale(var(--burger-active-scale));
}

.burger:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup input:checked+.burger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.popup input:checked+.burger span:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.popup input:checked+.burger span:nth-child(3) {
  transform: translateX(calc(var(--burger-diameter) * -1 - var(--burger-line-width)));
}

.popup input:checked~nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}
</style>

<input type="checkbox" class="ui-checkbox">
<style>
/* From Uiverse.io by Galahhad - Source: https://ant.design/components/checkbox - Tags: checkbox, click animation, antd */
/* checkbox settings 👇 */

.ui-checkbox {
  --primary-color: #1677ff;
  --secondary-color: #fff;
  --primary-hover-color: #4096ff;
  /* checkbox */
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

.ui-checkbox, 
.ui-checkbox *, 
.ui-checkbox *::before, 
.ui-checkbox *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ui-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.ui-checkbox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.ui-checkbox::before {
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}

/* actions */

.ui-checkbox:hover {
  border-color: var(--primary-color);
}

.ui-checkbox:checked {
  background: var(--primary-color);
  border-color: transparent;
}

.ui-checkbox:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}
</style>

<!-- From Uiverse.io by 3bdel3ziz-T  - Tags: simple, material design, icon, animation, radio, light&dark, creative, tailwindcss -->
<div
  class="flex flex-col justify-center items-center relative transition-all duration-[450ms] ease-in-out w-16"
>
  <article
    class="border border-solid border-gray-700 w-full ease-in-out duration-500 left-0 rounded-2xl inline-block shadow-lg shadow-black/15 bg-white"
  >
    <label
      for="dashboard"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="dashboard"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z"
        ></path>
      </svg>
    </label>
    <label
      for="profile"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input class="hidden peer/expand" type="radio" name="path" id="profile" />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"
        ></path>
      </svg>
    </label>
    <label
      for="messages"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="messages"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
        ></path>
        <path
          d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
        ></path>
      </svg>
    </label>
    <label
      for="help"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input class="hidden peer/expand" type="radio" name="path" id="help" />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM12 20c-4.411 0-8-3.589-8-8s3.567-8 7.953-8C16.391 4 20 7.589 20 12s-3.589 8-8 8z"
        ></path>
        <path d="M11 7h2v7h-2zm0 8h2v2h-2z"></path>
      </svg>
    </label>
    <label
      for="settings"
      class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl"
    >
      <input
        class="hidden peer/expand"
        type="radio"
        name="path"
        id="settings"
      />
      <svg
        class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z"
        ></path>
        <path
          d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z"
        ></path>
      </svg>
    </label>
  </article>
</div>


    

<div class="select">
  <div
    class="selected"
    data-default="All"
    data-one="option-1"
    data-two="option-2"
    data-three="option-3"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="1em"
      viewBox="0 0 512 512"
      class="arrow"
    >
      <path
        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
      ></path>
    </svg>
  </div>
  <div class="options">
    <div title="all">
      <input id="all" name="option" type="radio" checked="" />
      <label class="option" for="all" data-txt="All"></label>
    </div>
    <div title="option-1">
      <input id="option-1" name="option" type="radio" />
      <label class="option" for="option-1" data-txt="option-1"></label>
    </div>
    <div title="option-2">
      <input id="option-2" name="option" type="radio" />
      <label class="option" for="option-2" data-txt="option-2"></label>
    </div>
    <div title="option-3">
      <input id="option-3" name="option" type="radio" />
      <label class="option" for="option-3" data-txt="option-3"></label>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: simple, minimalist, input, dark, light, radio, custom, css */
.select {
  width: fit-content;
  cursor: pointer;
  position: relative;
  transition: 300ms;
  color: white;
  overflow: hidden;
}

.selected {
  background-color: #2a2f3b;
  padding: 5px;
  margin-bottom: 3px;
  border-radius: 5px;
  position: relative;
  z-index: 100000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arrow {
  position: relative;
  right: 0px;
  height: 10px;
  transform: rotate(-90deg);
  width: 25px;
  fill: white;
  z-index: 100000;
  transition: 300ms;
}

.options {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 5px;
  background-color: #2a2f3b;
  position: relative;
  top: -100px;
  opacity: 0;
  transition: 300ms;
}

.select:hover > .options {
  opacity: 1;
  top: 0;
}

.select:hover > .selected .arrow {
  transform: rotate(0deg);
}

.option {
  border-radius: 5px;
  padding: 5px;
  transition: 300ms;
  background-color: #2a2f3b;
  width: 150px;
  font-size: 15px;
}
.option:hover {
  background-color: #323741;
}

.options input[type="radio"] {
  display: none;
}

.options label {
  display: inline-block;
}
.options label::before {
  content: attr(data-txt);
}

.options input[type="radio"]:checked + label {
  display: none;
}

.options input[type="radio"]#all:checked + label {
  display: none;
}

.select:has(.options input[type="radio"]#all:checked) .selected::before {
  content: attr(data-default);
}
.select:has(.options input[type="radio"]#option-1:checked) .selected::before {
  content: attr(data-one);
}
.select:has(.options input[type="radio"]#option-2:checked) .selected::before {
  content: attr(data-two);
}
.select:has(.options input[type="radio"]#option-3:checked) .selected::before {
  content: attr(data-three);
}

</style>
    

<section>
  <label title="home" for="home" class="label">
    <input id="home" name="page" type="radio" checked="" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 21 20"
      height="20"
      width="21"
      class="icon home"
    >
      <path
        fill="inherit"
        d="M18.9999 6.01002L12.4499 0.770018C11.1699 -0.249982 9.16988 -0.259982 7.89988 0.760018L1.34988 6.01002C0.409885 6.76002 -0.160115 8.26002 0.0398848 9.44002L1.29988 16.98C1.58988 18.67 3.15988 20 4.86988 20H15.4699C17.1599 20 18.7599 18.64 19.0499 16.97L20.3099 9.43002C20.4899 8.26002 19.9199 6.76002 18.9999 6.01002ZM10.9199 16C10.9199 16.41 10.5799 16.75 10.1699 16.75C9.75988 16.75 9.41988 16.41 9.41988 16V13C9.41988 12.59 9.75988 12.25 10.1699 12.25C10.5799 12.25 10.9199 12.59 10.9199 13V16Z"
      ></path>
    </svg>
  </label>
  <label title="cart" for="cart" class="label">
    <input id="cart" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 18 20"
      height="20"
      width="18"
      class="icon cart"
    >
      <path
        fill="inherit"
        d="M16.8035 6.96427C16.1335 6.22427 15.1235 5.79427 13.7235 5.64427V4.88427C13.7235 3.51427 13.1435 2.19427 12.1235 1.27427C11.6202 0.812823 11.025 0.462927 10.3771 0.247511C9.72909 0.032095 9.04292 -0.0439787 8.3635 0.0242742C5.9735 0.254274 3.9635 2.56427 3.9635 5.06427V5.64427C2.5635 5.79427 1.5535 6.22427 0.883496 6.96427C-0.0865043 8.04427 -0.0565042 9.48427 0.0534958 10.4843L0.753496 16.0543C0.963496 18.0043 1.7535 20.0043 6.0535 20.0043H11.6335C15.9335 20.0043 16.7235 18.0043 16.9335 16.0643L17.6335 10.4743C17.7435 9.48427 17.7635 8.04427 16.8035 6.96427ZM8.5035 1.41427C8.98813 1.36559 9.47758 1.41913 9.94023 1.57143C10.4029 1.72372 10.8284 1.97138 11.1894 2.29841C11.5503 2.62544 11.8387 3.02456 12.0357 3.46998C12.2328 3.91539 12.3343 4.39721 12.3335 4.88427V5.58427H5.3535V5.06427C5.3535 3.28427 6.8235 1.57427 8.5035 1.41427ZM5.2635 11.1543H5.2535C4.7035 11.1543 4.2535 10.7043 4.2535 10.1543C4.2535 9.60427 4.7035 9.15427 5.2535 9.15427C5.8135 9.15427 6.2635 9.60427 6.2635 10.1543C6.2635 10.7043 5.8135 11.1543 5.2635 11.1543ZM12.2635 11.1543H12.2535C11.7035 11.1543 11.2535 10.7043 11.2535 10.1543C11.2535 9.60427 11.7035 9.15427 12.2535 9.15427C12.8135 9.15427 13.2635 9.60427 13.2635 10.1543C13.2635 10.7043 12.8135 11.1543 12.2635 11.1543Z"
      ></path>
    </svg>
  </label>
  <label title="favorite" for="favorite" class="label">
    <input id="favorite" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 20 18"
      height="18"
      width="20"
      class="icon favorite"
    >
      <path
        fill="inherit"
        d="M14.44 0C12.63 0 11.01 0.88 10 2.23C9.48413 1.53881 8.81426 0.977391 8.04353 0.590295C7.27281 0.203198 6.42247 0.00108555 5.56 0C2.49 0 0 2.5 0 5.59C0 6.78 0.19 7.88 0.52 8.9C2.1 13.9 6.97 16.89 9.38 17.71C9.72 17.83 10.28 17.83 10.62 17.71C13.03 16.89 17.9 13.9 19.48 8.9C19.81 7.88 20 6.78 20 5.59C20 2.5 17.51 0 14.44 0Z"
      ></path>
    </svg>
  </label>
  <label title="notifications" for="notifications" class="label">
    <input id="notifications" name="page" type="radio" />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="inherit"
      viewBox="0 0 16 20"
      height="20"
      width="16"
      class="icon history"
    >
      <path
        fill="inherit"
        d="M15.0294 12.4902L14.0294 10.8302C13.8194 10.4602 13.6294 9.76016 13.6294 9.35016V6.82016C13.6282 5.70419 13.3111 4.61137 12.7147 3.66813C12.1183 2.72489 11.267 1.96978 10.2594 1.49016C10.0022 1.0335 9.62709 0.654303 9.17324 0.392195C8.71939 0.130087 8.20347 -0.00530784 7.6794 0.000159243C6.5894 0.000159243 5.6094 0.590159 5.0894 1.52016C3.1394 2.49016 1.7894 4.50016 1.7894 6.82016V9.35016C1.7894 9.76016 1.5994 10.4602 1.3894 10.8202L0.379396 12.4902C-0.0206039 13.1602 -0.110604 13.9002 0.139396 14.5802C0.379396 15.2502 0.949396 15.7702 1.6894 16.0202C3.6294 16.6802 5.6694 17.0002 7.7094 17.0002C9.7494 17.0002 11.7894 16.6802 13.7294 16.0302C14.4294 15.8002 14.9694 15.2702 15.2294 14.5802C15.4894 13.8902 15.4194 13.1302 15.0294 12.4902ZM10.5194 18.0102C10.3091 18.5923 9.92467 19.0956 9.41835 19.4516C8.91203 19.8077 8.30837 19.9992 7.6894 20.0002C6.8994 20.0002 6.1194 19.6802 5.5694 19.1102C5.2494 18.8102 5.0094 18.4102 4.8694 18.0002C4.9994 18.0202 5.1294 18.0302 5.2694 18.0502C5.4994 18.0802 5.7394 18.1102 5.9794 18.1302C6.5494 18.1802 7.1294 18.2102 7.7094 18.2102C8.2794 18.2102 8.8494 18.1802 9.4094 18.1302C9.6194 18.1102 9.8294 18.1002 10.0294 18.0702L10.5194 18.0102Z"
      ></path>
    </svg>
  </label>
</section>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: hover, switch, radio, svg, custom, creative, transition, hover effect */
section {
  --col-orange: #d17842;
  --col-dark: #0c0f14;
  --col-darkGray: #52555a;
  --col-gray: #aeaeae;

  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--col-dark);
  border-radius: 30px;
}
.label {
  padding: 8px 18px;
  transition: all 200ms;
  display: inline-block;
}

.label input[type="radio"] {
  display: none;
}
.label > svg {
  transition: all 200ms;
  fill: var(--col-gray);
  width: 14px;
}
.label:hover:not(:has(input:checked)) > svg {
  fill: #d17842;
  opacity: 0.6;
}
.label::before {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  border-radius: 5px;
  position: relative;
  left: 50%;
  top: 20px;
  background: var(--col-orange);
  transition: all 200ms;
}
.label > svg {
  transition: 300ms;
  fill: var(--col-darkGray);
  margin-top: 0;
}
.label:has(input:checked) > svg {
  fill: var(--col-orange);
  scale: 1.2;
  margin-top: -5px;
}

.label:has(input:checked)::before {
  width: 100%;
  left: 0;
  top: 25px;
}

</style>
    

<div class="container">
  <label for="dislike">
    <input type="radio" name="evaluation" id="dislike" />
    <svg
      class="icon dislike"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path
        d="M20 3H6.693A2.01 2.01 0 0 0 4.82 4.298l-2.757 7.351A1 1 0 0 0 2 12v2c0 1.103.897 2 2 2h5.612L8.49 19.367a2.004 2.004 0 0 0 .274 1.802c.376.52.982.831 1.624.831H12c.297 0 .578-.132.769-.36l4.7-5.64H20c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm-8.469 17h-1.145l1.562-4.684A1 1 0 0 0 11 14H4v-1.819L6.693 5H16v9.638L11.531 20zM18 14V5h2l.001 9H18z"
      ></path>
    </svg>
  </label>
  <div class="count">
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
    <div class="number">
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </div>
  <label for="like">
    <input type="radio" name="evaluation" id="like" checked="" />
    <svg
      class="icon like"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <path
        d="M20 8h-5.612l1.123-3.367c.202-.608.1-1.282-.275-1.802S14.253 2 13.612 2H12c-.297 0-.578.132-.769.36L6.531 8H4c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h13.307a2.01 2.01 0 0 0 1.873-1.298l2.757-7.351A1 1 0 0 0 22 12v-2c0-1.103-.897-2-2-2zM4 10h2v9H4v-9zm16 1.819L17.307 19H8V9.362L12.468 4h1.146l-1.562 4.683A.998.998 0 0 0 13 10h7v1.819z"
      ></path>
    </svg>
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: red, blue, social, smooth, radio, custom, click effect, click animation */
.container {
  --col-gray: #3f3f3f;
  --col-white: #fff;
  --col-like: #2196f3;
  --col-dislike: #ff3232;
  --transition: 350ms;
  background-color: var(--col-gray);
  width: 130px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px;
  user-select: none;
  /*you can easlly change the number by using this variabels*/
  --zero: translateY(calc(50% - 11px));
  --one: translateY(calc(40% - 11px));
  --two: translateY(calc(30% - 11px));
  --three: translateY(calc(20% - 11px));
  --four: translateY(calc(10% - 11px));
  --five: translateY(calc(0% - 11px));
  --six: translateY(calc(-10% - 11px));
  --seven: translateY(calc(-20% - 11px));
  --eight: translateY(calc(-30% - 11px));
  --nine: translateY(calc(-40% - 11px));
  --ten: translateY(calc(-50% - 11px));
}
.container:has(#like:checked) .count {
  border-left-color: var(--col-like);
  border-right-color: transparent;
}
.container:has(#like:checked) .count .number:first-child {
  /*change first number from here*/
  /*when click on like*/
  transform: var(--nine);
}
.container:has(#like:checked) .count .number:nth-child(2) {
  /*change second number from here*/
  /*when click on like*/
  transform: var(--five);
}
.container:has(#like:checked) .count .number:last-child {
  /*change third number from here*/
  /*when click on like*/
  transform: var(--three);
}
.container:has(#dislike:checked) > .count {
  border-right-color: var(--col-dislike);
  border-left-color: transparent;
}
.container:has(#dislike:checked) > .count .number:first-child {
  /*change first number from here*/
  /*when click on dislike*/
  transform: var(--zero);
}
.container:has(#dislike:checked) > .count .number:nth-child(2) {
  /*change second number from here*/
  /*when click on dislike*/
  transform: var(--zero);
}
.container:has(#dislike:checked) > .count .number:last-child {
  /*change third number from here*/
  /*when click on dislike*/
  transform: var(--nine);
}
.container label input {
  display: none;
}
.container #like:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-like);
}
.container #dislike:checked + svg {
  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
  fill: var(--col-dislike);
}
.container .icon {
  cursor: pointer;
  fill: var(--col-white);
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .icon.like {
  margin-left: 9px;
}
.container .icon.dislike {
  margin-right: 9px;
}
.container .count {
  transition: var(--transition);
  flex: 1;
  border-left: 1px solid var(--col-white);
  border-right: 1px solid var(--col-white);
  position: relative;
  height: 24px;
  overflow: hidden;
  margin: auto;
  color: white;
  font-size: 16px;
  font-family: sans-serif;
  display: flex;
  align-items: center;

  justify-content: center;
  gap: 0.5px;
  flex-direction: row;
}
.container .count .number {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(50% - 8px));
  transition: 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.container .count .number:first-child {
  transition-delay: 200ms;
}
.container .count .number:nth-child(2) {
  transition-delay: 150ms;
}
.container .count .number:last-child {
  transition-delay: 50ms;
}

@keyframes evaluation-animation {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-10deg);
  }
}

</style>
    

<div class="body">
  <div class="tabs">
    <input
      checked=""
      value="HTML"
      name="fav_language"
      id="html"
      type="radio"
      class="input"
    />
    <label for="html" class="label">HTML</label>
    <input
      value="CSS"
      name="fav_language"
      id="css"
      type="radio"
      class="input"
    />
    <label for="css" class="label">CSS</label>
    <input
      value="JavaScript"
      name="fav_language"
      id="javascript"
      type="radio"
      class="input"
    />
    <label for="javascript" class="label">JavaScript</label>
  </div>
</div>

<style>
/* From Uiverse.io by Admin12121  - Tags: simple, material design, checkbox, radio */
.body {
  --radius: 8px;
  --border: 4px;
  --height: 48px;
  --speed: 0.25s;
  display: grid;
  place-items: center;
  align-content: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
    Helvetica, Arial, sans-serif, system-ui;
}

.tabs {
  height: var(--height);
  display: grid;
  grid-auto-flow: column;
  background: hsl(0 0% 0%);
  border-radius: var(--radius);
  grid-auto-columns: 1fr;
  position: relative;
  border: var(--border) solid hsl(0 0% 0%);
}

.tabs {
  --ease: linear(
    0,
    0.1641 3.52%,
    0.311 7.18%,
    0.4413 10.99%,
    0.5553 14.96%,
    0.6539 19.12%,
    0.738 23.5%,
    0.8086 28.15%,
    0.8662 33.12%,
    0.9078 37.92%,
    0.9405 43.12%,
    0.965 48.84%,
    0.9821 55.28%,
    0.992 61.97%,
    0.9976 70.09%,
    1
  );
}

.tabs > .input,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}
.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}
.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}
.tabs:has(:checked:nth-of-type(4)) {
  --active: 3;
}

.tabs :checked + .label {
  --highlight: 1;
}

.tabs:has(.input:nth-of-type(2)) {
  --count: 2;
}
.tabs:has(.input:nth-of-type(3)) {
  --count: 3;
}
.tabs:has(.input:nth-of-type(4)) {
  --count: 4;
}

.tabs .label {
  padding: 0 clamp(10px, 10px + 10px, 20px);
  cursor: pointer;
  text-align: center;
  height: 100%;
  display: grid;
  border-radius: calc(var(--radius) - var(--border));
  place-items: center;
  color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
  transition: background, color;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease, ease);
}

.input:not(:checked) + .label:hover {
  --highlight: 0.35;
  background: hsl(0 0% 20%);
}

.tabs::after {
  pointer-events: none;
  content: "";
  width: calc(100% / var(--count));
  height: 100%;
  background: hsl(0 0% 100%);
  position: absolute;
  border-radius: calc(var(--radius) - var(--border));
  mix-blend-mode: difference;
  translate: calc(var(--active, 0) * 100%) 0;
  transition: translate, outline-color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease, ease);
  outline: 2px solid transparent;
}

.tabs:has(:focus-visible)::after {
  outline-color: red;
}

</style>
    

<div class="radio-input">
  <label class="label">
    <input type="radio" name="radio" checked="">
    <span class="check"></span>
  </label>
  <label class="label">
    <input type="radio" name="radio">
    <span class="check"></span>
  </label>
      
  <label class="label">
    <input type="radio" name="radio">
    <span class="check"></span>
  </label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: dark, shadow, radio, neumorphism */
.radio-input .label input {
  display: none;
}

.radio-input {
  display: flex;
  gap: 20px;
}

.radio-input .label {
  display: flex;
}

.radio-input .label .check {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  border: 3px solid transparent;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
   -1px -1px 4px rgba(255, 255, 255, 0.5);
}

.radio-input .label input:checked + .check {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),
   -1px -1px 4px rgba(255, 255, 255, 0.5),
   inset 3px 3px 6px rgba(0, 0, 0, 0.5),
   inset -1px -1px 4px rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
</style>

  <label>
    <input checked="" name="example" class="option-input radio circlegg" type="radio">
  </label>
  <label>
    <input name="example" class="option-input radio circlegg" type="radio">
  </label>
  <label>
    <input name="example" class="option-input radio circlegg" type="radio">
  </label>

<style>
/* From Uiverse.io by Arqui9897 - Tags: radio */
.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  z-index: 1000;
}

.option-input:hover {
  background: #fa9115;
}

.option-input:checked {
  background: #faa91b;
}

.option-input:checked::before {
  width: 80px;
  height: 80px;
  display: flex;
  font-weight: bold;
  position: absolute;
  align-items: center;
  justify-content: center;
}

.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

.option-input.radio {
  border-radius: 50%;
}

.option-input.radio::after {
  border-radius: 50%;
}

@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }

  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.circlegg {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent, transparent 40%, yellow),
    linear-gradient(#040404, #0b0707);
  animation: rotate 1.5s linear infinite;
}

.circlegg:before,
.circlegg:after {
  content: " ";
  position: absolute;
  inset: 4px;
  background: linear-gradient(#181818, #1f1c1c);
  border-radius: inherit;
}

.circlegg:before {
  background: linear-gradient(45deg, transparent, transparent 40%, rgb(206, 91, 49));
  filter: blur(25px);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

</style>

<div class="radio-input">
  <input class="value-radio" name="value-radio" id="option-1" type="radio">
  <label class="value-radio-label" for="option-1">Option A</label>

  <input class="value-radio" name="value-radio" id="option-2" type="radio">
  <label class="value-radio-label" for="option-2">Option B</label>
  
  <input class="value-radio" name="value-radio" id="option-3" type="radio">
  <label class="value-radio-label" for="option-3">Option C</label>

</div>
<style>
/* From Uiverse.io by ChristosMourgelas - Tags: radio */
.radio-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.value-radio {
  display: none;
}

.value-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid #4d4d4d;
  border-radius: 20px;
  color: #ccc;
  background-color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

.value-radio:checked + .value-radio-label {
  border-color: #00b4ff;
  background-color: #00b4ff;
  color: #fff;
}

.value-radio-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #4d4d4d;
  transition: all 1s;
}

.value-radio:checked + .value-radio-label::before {
  border-color: #0175a6;
  background-color: #ffffff;
}
</style>

<!-- From Uiverse.io by Cybercom682  - Tags: shadow, radio, futuristic -->
<div class="flex flex-col space-y-4 p-5">
  <label class="relative flex items-center cursor-pointer">
    <input
      checked=""
      class="sr-only peer"
      name="futuristic-radio"
      type="radio"
    />
    <div
      class="w-6 h-6 bg-transparent border-2 border-red-500 rounded-full peer-checked:bg-red-500 peer-checked:border-red-500 peer-hover:shadow-lg peer-hover:shadow-red-500/50 peer-checked:shadow-lg peer-checked:shadow-red-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Hard</span>
  </label>
  <label class="relative flex items-center cursor-pointer">
    <input class="sr-only peer" name="futuristic-radio" type="radio" />
    <div
      class="w-6 h-6 bg-transparent border-2 border-yellow-500 rounded-full peer-checked:bg-yellow-500 peer-checked:border-yellow-500 peer-hover:shadow-lg peer-hover:shadow-yellow-500/50 peer-checked:shadow-lg peer-checked:shadow-yellow-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Normal</span>
  </label>
  <label class="relative flex items-center cursor-pointer">
    <input class="sr-only peer" name="futuristic-radio" type="radio" />
    <div
      class="w-6 h-6 bg-transparent border-2 border-green-500 rounded-full peer-checked:bg-green-500 peer-checked:border-green-500 peer-hover:shadow-lg peer-hover:shadow-green-500/50 peer-checked:shadow-lg peer-checked:shadow-green-500/50 transition duration-300 ease-in-out"
    ></div>
    <span class="ml-2 text-white">Easy</span>
  </label>
</div>


    

<div class="theme-popup">
    <input type="radio" name="theme" id="default" checked="">
    <input type="radio" name="theme" id="light">
    <input type="radio" name="theme" id="dark">
    <input type="checkbox" id="checkbox">
  <label for="checkbox" class="theme-popup__button">
    <span class="theme-popup__icons">
      <svg class="default" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path>
      </svg>
      <svg class="sun" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_78_63)">
          <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path>
        </g>
        <defs>
          <clipPath>
            <rect width="16" height="16" fill="currentColor"></rect>
          </clipPath>
        </defs>
      </svg>
      <svg class="moon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_78_60)">
          <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path>
        </g>
        <defs>
          <clipPath>
            <rect width="14" height="14" fill="currentColor"></rect>
          </clipPath>
        </defs>
      </svg>
    </span>
    Theme
  </label>
  <div class="theme-popup__list-container">
    <ul class="theme-popup__list">
      <li>
        <label for="default">
          <span class="theme-popup__icons">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>
            OS Default
          </span>
        </label>
      </li>
      <li>
        <label for="light">
          <span class="theme-popup__icons">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_78_63)">
                <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path>
              </g>
              <defs>
                <clipPath>
                  <rect width="16" height="16" fill="currentColor"></rect>
                </clipPath>
              </defs>
            </svg>
          </span>
          <span>
            Light
          </span>
        </label>
      </li>
      <li>
        <label for="dark">
          <span class="theme-popup__icons">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_78_60)">
                <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path>
              </g>
              <defs>
                <clipPath>
                  <rect width="14" height="14" fill="currentColor"></rect>
                </clipPath>
              </defs>
            </svg>
          </span>
          <span>
            Night
          </span>
        </label>
      </li>
    </ul>
  </div>
</div>
<style>
/* From Uiverse.io by Galahhad - Tags: theme, theme-switch, radio, dropdown */
/* radio settings 👇 */

.theme-popup {
  /* total */
  --total_text_color: #e0e0e0;
  --total_font_family: Menlo, Roboto Mono, monospace;
  /* button */
  --btn_bg: #3A3A3A;
  --btn_padding: 0.5em;
  --btn_height: 2em;
  --btn_border_radius: 0.3125em;
  --btn_outline_width: 0.0625em;
  --btn_outline_color: #A0A0A0;
  --btn_outline_offset: 0.0625em;
  --btn_gap: 0.3125em;
  /* list */
  --list_padding: 0.5em;
  --list_bg: var(--btn_bg);
  --list_border_radius: var(--btn_border_radius);
  --list_gap: 0.1875em;
  --list_btn_hover_bg: #5A5656;
  --list_btn_active: #b9b9b970;
  --list_btn_border_radius: 0.25em;
  --list_btn_padding: 0.35em 1em;
  --list_btn_gap: 0.4375em;
  --list_btn_outline_width: 0.0625em;
  --list_btn_outline_color: rgb(212, 210, 210);
  --list_offset: 0.35em;
  --list_btn_font_size: 14px;
  --list_position_left: 0;
  --list_position_right: unset;
  /* 👆 if you want to change sides just switch one property */
  /* from properties to "unset" and the other to 0 */
}

.theme-popup__button .theme-popup__icons svg,
#light,
#dark, 
#default, 
#checkbox,
.theme-popup__list-container {
  display: none;
}

.theme-popup {
  color: var(--total_text_color);
  font-family: var(--total_font_family);
  position: relative;
  user-select: none;
}

.theme-popup__list-container {
  position: absolute;
  left: var(--list_position_left);
  right: var(--list_position_right);
  top: calc(var(--btn_height) + var(--list_offset));
}

.theme-popup__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.theme-popup__button {
  line-height: var(--btn_height);
  background-color: var(--btn_bg);
  padding: 0 var(--btn_padding);
  display: inline-flex;
  align-items: center;
  column-gap: var(--btn_gap);
  border-radius: var(--btn_border_radius);
  border: none;
  color: inherit;
  font-family: inherit;
  outline: none;
  font-weight: bold;
}

.theme-popup__list {
  margin: 0;
  list-style-type: none;
  padding: var(--list_padding);
  border-radius: var(--list_border_radius);
  background-color: var(--list_bg);
  display: flex;
  flex-direction: column;
  row-gap: var(--list_gap);
}

.theme-popup__list label {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: var(--list_btn_gap);
  padding: var(--list_btn_padding);
  border-radius: var(--list_btn_border_radius);
  white-space: nowrap;
}

.theme-popup__list label span {
  font-size: var(--list_btn_font_size);
}

/* actions */

#checkbox:checked~.theme-popup__button {
  outline: var(--btn_outline_width) solid var(--btn_outline_color);
  outline-offset: var(--btn_outline_offset);
}

#checkbox:checked~.theme-popup__list-container {
  display: block;
}

.theme-popup__list label:hover,
.theme-popup__button:hover,
#checkbox:checked~.theme-popup__button {
  background-color: var(--list_btn_hover_bg);
}

#default:checked~.theme-popup__list-container label[for="default"],
#light:checked~.theme-popup__list-container label[for="light"],
#dark:checked~.theme-popup__list-container label[for="dark"] {
  background-color: var(--list_btn_active);
  outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color);
}

#default:checked~label svg.default,
#light:checked~label svg.sun,
#dark:checked~label svg.moon {
  display: block;
}
</style>

<div class="radio-input">
 <input type="radio" id="value-1" name="value-radio" value="value-1">
  <div class="circle">
   </div> 
 <input checked="" type="radio" id="value-2" name="value-radio" value="value-2">
  <div class="circle">
  </div> 
 <input type="radio" id="value-3" name="value-radio" value="value-3">
  <div class="circle">
  </div>
</div>  




<style>
/* From Uiverse.io by JaydipPrajapati1910 - Tags: yellow, radio, radio-buttons */
.radio-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-input input {
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  border-radius: 50%;
  transition: .4s ease-in-out;
}

.radio-input input:hover {
  scale: 1.2;
  cursor: pointer;
  box-shadow: none;
}

.radio-input .circle {
  position: relative;
  top: 0.01em;
  left: -1.1em;
  width: 0.6em;
  height: 0.6em;
  background-color: yellow;
  scale: 0;
  border-radius: 10px;
  transition: .4s ease-in-out;
}

.radio-input input:checked {
  box-shadow: none;
  border: 1px solid yellow;
}

.radio-input input:checked + .circle {
  transform: rotate(360deg);
  scale: 1;
}


</style>

<div class="radio-container">
  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option1" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Male</span>
    </label>
  </div>

  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option2" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Female</span>
    </label>
  </div>

  <div class="radio-wrapper">
    <label class="radio-button">
      <input id="option3" name="radio-group" type="radio">
      <span class="radio-checkmark"></span>
      <span class="radio-label">Other</span>
    </label>
  </div>
</div>

<style>
/* From Uiverse.io by JkHuger - Tags: radio, male, female, non binary */
.radio-container {
  margin: 0 auto;
  max-width: 300px;
  color: white;
}

.radio-wrapper {
  margin-bottom: 20px;
}

.radio-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.radio-button:hover {
  transform: translateY(-2px);
}

.radio-button input[type="radio"] {
  display: none;
}

.radio-checkmark {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #333;
  border-radius: 50%;
}

.radio-checkmark:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  transition: all 0.2s ease-in-out;
}

.radio-button input[type="radio"]:checked ~ .radio-checkmark:before {
  transform: translate(-50%, -50%) scale(1);
}

.radio-label {
  font-size: 16px;
  font-weight: 600;
}

</style>

<div class="rating">
  <form class="rating-form">
    <label for="super-happy" class="lb">
	<input type="radio" name="rating" class="super-happy" id="super-happy" value="super-happy">
	<svg class="svg" viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
	</label>
    <label for="neutral" class="lb">
	<input type="radio" name="rating" class="neutral" id="neutral" value="neutral">
	<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5A1.5,1.5 0 0,1 15.5,11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M9,14H15A1,1 0 0,1 16,15A1,1 0 0,1 15,16H9A1,1 0 0,1 8,15A1,1 0 0,1 9,14Z"></path></svg>
	</label>
    <label for="super-sad" class="lb">
	<input type="radio" name="rating" class="super-sad" id="super-sad" value="super-sad">
	<svg class="svg" viewBox="0 0 24 24"><path d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.18,7.76L15.12,8.82L14.06,7.76L13,8.82L14.06,9.88L13,10.94L14.06,12L15.12,10.94L16.18,12L17.24,10.94L16.18,9.88L17.24,8.82L16.18,7.76M7.82,12L8.88,10.94L9.94,12L11,10.94L9.94,9.88L11,8.82L9.94,7.76L8.88,8.82L7.82,7.76L6.76,8.82L7.82,9.88L6.76,10.94L7.82,12M12,14C9.67,14 7.69,15.46 6.89,17.5H17.11C16.31,15.46 14.33,14 12,14Z"></path></svg>
	</label></form></div>
<style>
/* From Uiverse.io by JkHuger - Tags: select, option, emotion */
.rating {
  cursor: pointer;
}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  background-color: rgb(255, 255, 255);
  padding: 0.8rem;
  width: 33rem;
}

.rating-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.rating {
  background-color: rgba(0, 0, 16, 0.8);
  padding: 0.4rem 0.4rem 0.1rem 0.4rem;
  border-radius: 2.2rem;
}

.rating-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.svg {
  fill: rgb(242, 242, 242);
  height: 3.6rem;
  width: 3.6rem;
  margin: 0.2rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rating-form-2 svg {
  height: 3rem;
  width: 3rem;
  margin: 0.5rem;
}

#radios label {
  position: relative;
}

.super-happy, [type="radio"] {
  position: absolute;
  opacity: 0;
}

.input ,[type="radio"] + svg {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.super-happy[class="super-happy"]:hover + svg,
.super-happy[class="super-happy"]:checked + svg,
.super-happy[class="super-happy"]:focus + svg {
  fill: rgb(0, 204, 79);
  transition: 1.5s;
}

.neutral[class="neutral"]:hover + svg,
.neutral[class="neutral"]:checked + svg,
.neutral[class="neutral"]:focus + svg {
  fill: rgb(232, 214, 0);
  transition: 1.5s;
}

.super-sad[class="super-sad"]:hover + svg,
.super-sad[class="super-sad"]:checked + svg,
.super-sad[class="super-sad"]:focus + svg {
  fill: rgb(239, 42, 16);
  transition: 1.5s;
}



</style>

<div class="radio-input">
  <div class="glass">
    <div class="glass-inner">
    </div>
  </div>
  <div class="selector">
    <div class="choice">
      <div>
        <input class="choice-circle" checked="true" value="one" name="number-selector" id="one" type="radio">
        <div class="ball"></div>
      </div>
      <label for="one" class="choice-name">1</label>
    </div>
    <div class="choice">
      <div>
        <input class="choice-circle" value="two" name="number-selector" id="two" type="radio">
        <div class="ball"></div>
      </div>
      <label class="choice-name">2</label>
    </div>
    <div class="choice">
      <div>
        <input class="choice-circle" value="three" name="number-selector" id="three" type="radio">
        <div class="ball"></div>
      </div>
      <label for="three" class="choice-name">3</label>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by LilaRest - Tags:  */
.radio-input {
  display: flex;
  height: 210px;
  align-items: center;
}

.glass {
  z-index: 2;
  height: 110%;
  width: 95px;
  margin-right: 25px;
  padding: 8px;
  background-color: rgba(190, 189, 189, 0.5);
  border-radius: 35px;
  box-shadow: rgba(50, 50, 93, 0.2) 0px 25px 50px -10px,
   rgba(0, 0, 0, 0.25) 0px 10px 30px -15px,
    rgba(10, 37, 64, 0.26) 0px -2px 6px 0px inset;
  backdrop-filter: blur(8px);
}

.glass-inner {
  width: 100%;
  height: 100%;
  border-color: rgba(245, 245, 245, 0.45);
  border-width: 9px;
  border-style: solid;
  border-radius: 30px
}

.selector {
  display: flex;
  flex-direction: column;
}

.choice {
  margin: 10px 0 10px 0;
  display: flex;
  align-items: center;
}

.choice > div {
  position: relative;
  width: 41px;
  height: 41px;
  margin-right: 15px;
  z-index: 0;
}

.choice-circle {
  appearance: none;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  border-width: 9px;
  border-style: solid;
  border-color: rgba(245, 245, 245, 0.45);
  cursor: pointer;
  box-shadow: 0px 0px 20px -13px gray,
  0px 0px 20px -14px gray inset;
}

.ball {
  z-index: 1;
  position: absolute;
  inset: 0px;
  transform: translateX(-95px);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
   rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
     rgba(0, 0, 0, 0.06) 0px 2px 1px, 
     rgba(0, 0, 0, 0.09) 0px 4px 2px, 
     rgba(0, 0, 0, 0.09) 0px 8px 4px, 
     rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px,
       0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 100%;
  transition: transform 800ms cubic-bezier(1,-0.4,0,1.4);
  background-color: rgb(232, 232, 232, 1);
}

.choice-circle:checked + .ball {
  transform: translateX(0px);
}

.choice-name {
  color: rgb(177, 176, 176);
  font-size: 35px;
  font-weight: 900;
  font-family: monospace;
  cursor: pointer;
}
</style>

<div class="radio-input">
  <div class="glass">
    <div class="glass-inner">
    </div>
  </div>
  <div class="selector">
    <div class="choice">
      <div>
        <input type="radio" id="one" name="number-selector" value="one" checked="true" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name" for="one">1</label>
    </div>
    <div class="choice">
      <div>
        <input type="radio" id="two" name="number-selector" value="two" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name">2</label>
    </div>
    <div class="choice">
      <div>
        <input type="radio" id="three" name="number-selector" value="three" class="choice-circle">
        <div class="ball"></div>
      </div>
      <label class="choice-name" for="three">3</label>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by LilaRest - Tags: neumorphism, skeuomorphism, glassmorphism, animation, minimalist, ball, radio, futuristic */
.radio-input {
  display: flex;
  height: 210px;
  align-items: center;
}

.glass {
  z-index: 2;
  height: 110%;
  width: 95px;
  margin-right: 25px;
  padding: 8px;
  background-color: rgba(190, 189, 189, 0.5);
  border-radius: 35px;
  box-shadow: rgba(50, 50, 93, 0.2) 0px 25px 50px -10px,
   rgba(0, 0, 0, 0.25) 0px 10px 30px -15px,
    rgba(10, 37, 64, 0.26) 0px -2px 6px 0px inset;
  backdrop-filter: blur(8px);
}

.glass-inner {
  width: 100%;
  height: 100%;
  border-color: rgba(245, 245, 245, 0.45);
  border-width: 9px;
  border-style: solid;
  border-radius: 30px
}

.selector {
  display: flex;
  flex-direction: column;
}

.choice {
  margin: 10px 0 10px 0;
  display: flex;
  align-items: center;
}

.choice > div {
  position: relative;
  width: 41px;
  height: 41px;
  margin-right: 15px;
  z-index: 0;
}

.choice-circle {
  appearance: none;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  border-width: 9px;
  border-style: solid;
  border-color: rgba(245, 245, 245, 0.45);
  cursor: pointer;
  box-shadow: 0px 0px 20px -13px gray,
  0px 0px 20px -14px gray inset;
}

.ball {
  z-index: 1;
  position: absolute;
  inset: 0px;
  transform: translateX(-95px);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
   rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
     rgba(0, 0, 0, 0.06) 0px 2px 1px, 
     rgba(0, 0, 0, 0.09) 0px 4px 2px, 
     rgba(0, 0, 0, 0.09) 0px 8px 4px, 
     rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px,
       0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 100%;
  transition: transform 800ms cubic-bezier(1,-0.4,0,1.4);
  background-color: rgb(232, 232, 232, 1);
}

.choice-circle:checked + .ball {
  transform: translateX(0px);
}

.choice-name {
  color: rgb(177, 176, 176);
  font-size: 35px;
  font-weight: 900;
  font-family: monospace;
  cursor: pointer;
}
</style>

 <form action="" class="container">
        <input class="input-btn" type="radio" id="valueIs-1" name="valueIs-radio" checked="" value="valueIs-1">
        <label class="neon-btn" for="valueIs-1">
            <span class="span"></span>
            <span class="txt">OPTION 1</span>
        </label>

        <input class="input-btn" type="radio" id="valueIs-2" name="valueIs-radio" value="valueIs-2">
        <label class="neon-btn" for="valueIs-2">
            <span class="span"></span>
            <span class="txt">OPTION 2</span>
        </label>
    </form>
<style>
/* From Uiverse.io by MijailVillegas - Tags: cyberpunk, neon, radio, futuristic, animated */
.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.2em;
  display: grid;
  gap: 2em;
  place-content: center;
  width: 400px;
}

.container input[type=radio] {
  display: none;
}

.input-btn:is(:checked) + .neon-btn .span {
  inset: 2px;
  background-color: #4090b5;
  background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);
  box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);
}

.input-btn:is(:checked) + .neon-btn .txt {
  text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  color: rgb(255, 255, 255);
  animation: colorchange 0.3s ease;
}

.input-btn:is(:checked) + .neon-btn::before {
  animation-duration: 0.6s;
}

.input-btn:is(:checked) + .neon-btn::after {
  animation-duration: 0.6s;
}

.neon-btn {
  width: 300px;
  height: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em 5em;
  text-align: right;
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: all 2s ease-in-out;
  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
}

.neon-btn .span {
  display: flex;
  -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);
  position: absolute;
  inset: 1px;
  background-color: #212121;
  z-index: 1;
}

.neon-btn .txt {
  text-align: right;
  position: relative;
  z-index: 2;
  color: aliceblue;
  font-size: 1em;
  transition: all ease-in-out 2s linear;
  text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;
}

.neon-btn::before {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  box-shadow: -17px -19px 20px #9e30a9;
  background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);
  animation: rotate 4s linear infinite -2s;
}

.neon-btn::after {
  content: "";
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  box-shadow: -17px -19px 10px #4090b5;
  background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes colorchange {
  0% {
    text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);
  }

  50% {
    text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  }

  to {
    text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);
  }
}

@keyframes backgroundchange {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #4090b5;
  }

  to {
    background-color: transparent;
  }
}
</style>

<div class="radio-input">
  <label class="label">
    <input
      type="radio"
      id="value-1"
      checked=""
      name="value-radio"
      value="value-1"
    />
    <p class="text">Designer</p>
  </label>
  <label class="label">
    <input type="radio" id="value-2" name="value-radio" value="value-2" />
    <p class="text">Student</p>
  </label>
  <label class="label">
    <input type="radio" id="value-3" name="value-radio" value="value-3" />
    <p class="text">Teacher</p>
  </label>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, black, hover, input, radio */
.radio-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.radio-input label {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0px 20px;
  width: 220px;
  cursor: pointer;
  height: 50px;
  position: relative;
}

.radio-input label::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 45px;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 10px;
  border: 2px solid transparent;
}
.radio-input label:hover::before {
  transition: all 0.2s ease;
  background-color: #2a2e3c;
}

.radio-input .label:has(input:checked)::before {
  background-color: #2d3750;
  border-color: #435dd8;
  height: 50px;
}
.radio-input .label .text {
  color: #fff;
}

.radio-input .label input[type="radio"] {
  background-color: #202030;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radio-input .label input[type="radio"]:checked {
  background-color: #435dd8;
  -webkit-animation: puls 0.7s forwards;
  animation: pulse 0.7s forwards;
}

.radio-input .label input[type="radio"]:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  background-color: #fff;
  transform: scale(0);
}

.radio-input .label input[type="radio"]:checked::before {
  transform: scale(1);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

</style>
    

<div class="radioContainer">

    <input class="radioButton" type="radio" id="value-1" name="value-radio" value="value-1" checked="">
    <label class="container" for="value-1">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>

    <input class="radioButton" type="radio" id="value-2" name="value-radio" value="value-2">
    <label class="container" for="value-2">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>

    <input class="radioButton" type="radio" id="value-3" name="value-radio" value="value-3">
    <label class="container" for="value-3">
      <div class="border"></div>
      <div class="border2"></div>
      <div class="circle"></div>
    </label>


</div>
<style>
/* From Uiverse.io by Navarog21 - Tags:  */
.radioContainer {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 220px;
}

.radioButton {
  display: none;
}

.radioContainer .container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.8s;
  cursor: pointer;
  width: 65px;
  height: 65px;
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 5px inset white;
}

.border {
  position: absolute;
  background-color: #212121;
  width: 100%;
  height: 100%;
  transform: scale(0.7) rotate(30deg);
  transition: 0.3s;
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

.border2 {
  position: absolute;
  background-color: #212121;
  width: 100%;
  height: 100%;
  transform: scale(0.45);
  transition: 0.2s;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.radioContainer input[type="radio"]:checked + .container {
  filter: hue-rotate(330deg);
  animation: 2s linear checked;
}

.radioContainer input[type="radio"]:checked + .container .circle {
  transform: scale(0.8);
}

.radioContainer input[type="radio"]:checked + .container .border {
  animation: 4s linear infinite reverse rotateBorder;
}

.radioContainer input[type="radio"]:checked + .container .border2 {
  animation: 2s linear reverse rotateBorder2;
}

.circle {
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  border-radius: 100%;
  width: 22%;
  height: 22%;
  transition: 0.25s;
  z-index: 2;
  transform: scale(0);
}

.radioContainer .container:hover .circle {
  transform: scale(0.8);
  box-shadow: 0 20px 20px #00c6fb;
}

@keyframes checked {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(0deg) scale(1.07);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotateBorder {
  0% {
    transform: scale(0.7) rotate(0deg);
  }

  50% {
    transform: scale(0.7) rotate(0deg);
  }

  100% {
    transform: scale(0.7)rotate(360deg);
  }
}

@keyframes rotateBorder2 {
  0% {
    transform: scale(0.51) rotate(30deg);
  }

  50% {
    transform: scale(0.51) rotate(0deg);
  }

  100% {
    transform: scale(0.51) rotate(360deg);
  }
}

</style>

<div class="radio-buttons">
  <label>
    <input type="radio" name="option" value="1" checked="">
    <span class="option">Option 1</span>
  </label>
  <label>
    <input type="radio" name="option" value="2">
    <span class="option">Option 2</span>
  </label>
  <label>
    <input type="radio" name="option" value="3">
    <span class="option">Option 3</span>
  </label>
</div>

<style>
/* From Uiverse.io by NlghtM4re - Tags: radio */
.radio-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(164, 215, 246);
  border-radius: 15px;
  box-shadow: rgb(71, 175, 239) 0px 5px 29px 5px;
}

.radio-buttons label {
  position: relative;
  cursor: pointer;
}

.radio-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.option {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  color: black;
  border-radius: 14px;
  padding: 10px;
}

.option:hover {
  background-color: rgb(137, 207, 251);
}

.radio-buttons input[type="radio"]:checked + .option {
  background-color: rgb(71, 175, 239);
  box-shadow: rgb(11, 70, 107) 0px 5px 29px 5px;
}
</style>

<div class="radio-input">
    <label class="radio-component">
        <input value="value-1" name="RadioV" class="radiostyle" id="value-1" type="radio">
      
      <span class="RadioBtn">
        <div class="radioTxt1"> Sun &nbsp; </div>
         <span class="crater Krt2"></span>
              
    </span></label>
    <label class="radio-component">
        <input value="value-2" name="RadioV" class="radiostyle" id="value-2" type="radio">
          
      
        <span class="RadioBtn2">
          <div class="radioTxt2">Moon</div>
              <span class="crater Krt1"></span>
              <span class="crater Krt2"></span>
              <span class="crater Krt3"></span>
          </span>
      
    </label>
    <label class="radio-component">
        <input value="value-3" name="RadioV" class="radiostyle" id="value-3" type="radio">
      
          <span class="RadioBtn3">
            <div class="radioTxt3">Dark</div>
             
              <span class="crater Krt3"></span>
          </span>
            
    </label>
  </div>
<style>
/* From Uiverse.io by Peary74 - Tags: radio */
.radio-component {
  display: flex;
  padding: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.radiostyle {
  display: none;
}

.radioTxt1 {
  padding: 10px 40px;
  color: #fd9800;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radioTxt2 {
  padding: 10px 40px;
  color: #7e7e7e;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radioTxt3 {
  padding: 10px 40px;
  color: #181818;
  font-size: 20px;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.radio-component .RadioBtn:hover {
  background: #ffdf6a;
  border-radius: 100px;
}

.radio-component .RadioBtn2:hover {
  background: #cacaca;
  border-radius: 100px;
}

.radio-component .RadioBtn3:hover {
  background: #313239;
  border-radius: 100px;
}

.radiostyle:checked~ .RadioBtn {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #ffd401;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.radiostyle:checked~ .RadioBtn2 {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #e8e8e8;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.radiostyle:checked~ .RadioBtn3 {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: #000;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(255, 255, 255, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.RadioBtn .crater {
  position: absolute;
  background-color: #ffbb00;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.RadioBtn2 .crater {
  position: absolute;
  background-color: #b4b4b4;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.RadioBtn3 .crater {
  position: absolute;
  background-color: #2e2f33;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.radio-component .Krt1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.radio-component .Krt2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.radio-component .Krt3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
</style>

<div>
  <label class="switch" for="switch">
    <input id="switch" type="checkbox" class="circle" />
    <svg
      viewBox="0 0 384 512"
      xmlns="http://www.w3.org/2000/svg"
      class="moon svg"
    >
      !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License
      - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
      <path
        d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
      ></path>
    </svg>
    <div class="sun svg">
      <span class="dot"></span>
    </div>
  </label>
</div>

<style>
/* From Uiverse.io by 3bdel3ziz-T  - Tags: material design, icon, theme-switch, svg, hover effect, click animation, cool checkbox */
/* The switch container */
.switch {
  --transition: 300ms;
  --transition500: 500ms;
  --color-dark: #0c0f14;
  --color-darkGray: #21262e;
  --color-gray: #52555a;
  --color-offwhite: #cecece;
  --shadow-color: var(--color-dark);
  position: relative;
  display: flex;
  align-items: center;
  width: 60px;
  height: fit-content;
  background-color: var(--color-dark);
  border-radius: 30px;
  padding: 4px;
  transition: var(--transition500);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}

/* Svg styles */
.switch .svg {
  transition: var(--transition);
  position: absolute;
  left: 5px;
}
.switch .moon {
  width: 18px;
  fill: var(--color-gray);
  opacity: 1;
}

.switch .sun {
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: calc(100% - 21.5px);
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 0.8;
  opacity: 0;
}

.switch .sun .dot {
  positon: relative;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-dark);
  background: white;
  z-index: 1;
  box-shadow: 11px 0px 0px var(--shadow-color),
    10.3px 0px 0px var(--shadow-color), -11px 0px 0px var(--shadow-color),
    -10.3px 0px 0px var(--shadow-color), 0px -11px 0px var(--shadow-color),
    0px -10.3px 0px var(--shadow-color), 0px 11px 0px var(--shadow-color),
    0px 10.3px 0px var(--shadow-color), 8px 8px 0px var(--shadow-color),
    7.3px 7.3px 0px var(--shadow-color), 8px -8px 0px var(--shadow-color),
    7.3px -7.3px 0px var(--shadow-color), -8px -8px 0px var(--shadow-color),
    -7.3px -7.3px 0px var(--shadow-color), -8px 8px 0px var(--shadow-color),
    -7.3px 7.3px 0px var(--shadow-color);
}

.switch .sun .dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-dark);
}

/*checkbox styles */
.switch .circle {
  appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: 0;
  background-color: var(--color-darkGray);
  border: 1px solid var(--color-darkGray);
  transition: var(--transition500);
  box-shadow: 1px 1px 20px 3px var(--color-darkGray);
}

.switch:has(.circle:checked) {
  background: var(--color-offwhite);
}

.switch .circle:hover {
  margin-left: 3px;
}
.switch .circle:checked:hover {
  margin-left: -3px;
}

.switch .circle:checked {
  left: calc(100% - 24px);
  background: white;
  border-color: white;
  box-shadow: 1px 1px 30px 12px white;
}

.switch:has(.circle:checked) > .sun {
  opacity: 1;
}

.switch:has(.circle:checked) > .moon {
  opacity: 0;
}

</style>
    

<div class="toggle-switch">
  <input id="toggle-switch" class="toggle-switch-checkbox" type="checkbox">
  <label for="toggle-switch" class="toggle-switch-label">
    <span class="toggle-switch-inner"></span>
    <span class="toggle-switch-switch"></span>
  </label>
  <span class="toggle-switch-text"></span>
</div>

<style>
/* From Uiverse.io by AIVIIID - Tags: switch */
.toggle-switch {
  position: relative;
  width: 90px;
  height: 34px;
  margin: 20px;
}

.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  border-radius: 34px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.toggle-switch-label:before,
.toggle-switch-label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.toggle-switch-label:before {
  left: 10px;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.toggle-switch-label:after {
  left: 0;
  width: 46px;
  height: 34px;
  background-color: #fff;
  border-radius: 34px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.toggle-switch-checkbox:checked + .toggle-switch-label:before {
  transform: translateX(46px);
}

.toggle-switch-checkbox:checked + .toggle-switch-label {
  background-color: #000000;
}

.toggle-switch-checkbox:checked + .toggle-switch-label:after {
  transform: scale(0);
}

.toggle-switch-text {
  position: absolute;
  top: 5px;
  left: 110px;
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px rgba(253, 251, 251, 0.2);
  transition: all 0.4s ease;
}

.toggle-switch-checkbox:checked + .toggle-switch-label + .toggle-switch-text {
  color: rgb(255, 255, 255);
}

</style>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
  <div class="slider-card">
    <div class="slider-card-face slider-card-front"></div>
    <div class="slider-card-face slider-card-back"></div>
  </div>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch, flip */
.switch {
  --circle-dim: 1.4em;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5aeae;
  transition: .4s;
  border-radius: 30px;
}

.slider-card {
  position: absolute;
  content: "";
  height: var(--circle-dim);
  width: var(--circle-dim);
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
  pointer-events: none;
}

.slider-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  perspective: 1000px;
  border-radius: 50%;
  transition: .4s transform;
}

.slider-card-front {
  background-color: #DC3535;
}

.slider-card-back {
  background-color: #379237;
  transform: rotateY(180deg);
}

input:checked ~ .slider-card .slider-card-back {
  transform: rotateY(0);
}

input:checked ~ .slider-card .slider-card-front {
  transform: rotateY(-180deg);
}

input:checked ~ .slider-card {
  transform: translateX(1.5em);
}

input:checked ~ .slider {
  background-color: #9ed99c;
}
</style>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition: .3s cubic-bezier(0,2.18,.64,.69);
}

input:checked + .slider {
  background-color: #3bd826;
}

input:focus + .slider {
  box-shadow: 0 0 1px #3bd826;
}

input:checked + .slider:before {
  transform: translateX(1.5em);
}
</style>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
  <span class="text on">On</span>
  <span class="text off">Off</span>
</label>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 5.2em;
  height: 2em;
  overflow: hidden;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  border: 1px solid #333;
  left: 0.4em;
  bottom: 0.2em;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(3em);
}

.switch .text {
  position: absolute;
  top: 50%;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-50%);
  transition: .4s;
}

.switch .text.on {
  left: .8rem;
  transform: translateX(-3rem) translateY(-50%);
}

.switch .text.off {
  color: #999;
  right: .8rem;
}

input:checked ~ .text.off {
  transform: translateX(3rem) translateY(-50%);
}

input:checked ~ .text.on {
  transform: translateX(0) translateY(-50%);
}
</style>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Adir-SL - Tags: switch */
/* The switch - the box around the slider */
.switch {
  --sizeVar: 2em;
  --color-primary: #dedede;
  --color-secondary: #aaaaaa;
  --color-primary-on: #1d9bf0;
  --color-secondary-on: #ffffff;
  position: absolute;
  width: calc(var(--sizeVar) * 2);
  height: var(--sizeVar);
  background-color: var(--color-primary);
  border-radius: var(--sizeVar);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease-out;
}

.switch::after {
  content: "";
  position: absolute;
  margin: calc(var(--sizeVar) / 10);
  height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
  width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
  background-color: var(--color-secondary);
  border-radius: var(--sizeVar);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.switch:has(input:checked)::after {
  transform: translateX(var(--sizeVar));
  background-color: var(--color-secondary-on);
}

.switch:has(input:checked) {
  background-color: var(--color-primary-on);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>

<label class="switch-button" for="switch">
  <div class="switch-outer">
    <input id="switch" type="checkbox">
    <div class="button">
      <span class="button-toggle"></span>
      <span class="button-indicator"></span>
    </div>
  </div>
</label>
<style>
/* From Uiverse.io by Admin12121 - Tags: switch, animated, click effect */
.switch-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  justify-content: center;
  margin: auto;
  height: 55px;
}

.switch-button .switch-outer {
  height: 100%;
  background: #252532;
  width: 115px;
  border-radius: 165px;
  -webkit-box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
  box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
  border: 1px solid #32303e;
  padding: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch-button .switch-outer input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
}

.switch-button .switch-outer .button-toggle {
  height: 42px;
  width: 42px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#3b3a4e),
    to(#272733)
  );
  background: -o-linear-gradient(#3b3a4e, #272733);
  background: linear-gradient(#3b3a4e, #272733);
  border-radius: 100%;
  -webkit-box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
  box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
  position: relative;
  z-index: 2;
  -webkit-transition: left 0.3s ease-in;
  -o-transition: left 0.3s ease-in;
  transition: left 0.3s ease-in;
  left: 0;
}

.switch-button
  .switch-outer
  input[type="checkbox"]:checked
  + .button
  .button-toggle {
  left: 58%;
}

.switch-button
  .switch-outer
  input[type="checkbox"]:checked
  + .button
  .button-indicator {
  -webkit-animation: indicator 1s forwards;
  animation: indicator 1s forwards;
}

.switch-button .switch-outer .button {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.switch-button .switch-outer .button-indicator {
  height: 25px;
  width: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  border: 3px solid #ef565f;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 10px;
  position: relative;
}

@-webkit-keyframes indicator {
  30% {
    opacity: 0;
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    border: 3px solid #60d480;
    left: -68%;
  }
}

@keyframes indicator {
  30% {
    opacity: 0;
  }

  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    border: 3px solid #60d480;
    left: -68%;
  }
}
</style>

<label class="switch">
  <input role="switch" type="checkbox" class="switch__input" />
  <span class="switch__bg"></span>
  <span class="switch__label">Power</span>
</label>

<style>
/* From Uiverse.io by Admin12121  - Tags: switch, toggle, toggle switch, 3d button */
.switch,
.switch__input {
  --hue: 223;
  --bg: hsl(var(--hue), 90%, 60%);
  --fg: hsl(var(--hue), 90%, 10%);
  --primary: hsl(var(--hue), 90%, 50%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.switch {
  display: block;
  filter: grayscale(0.9);
  margin: auto;
  transition: filter var(--trans-dur) var(--trans-timing);
  width: 6em;
  height: 2.75em;
}
.switch:has(:checked) {
  filter: grayscale(0);
}
.switch__input {
  cursor: pointer;
  outline: transparent;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.switch__bg {
  background: radial-gradient(
    7.75em 7.75em at 50% 4.0625em,
    hsla(var(--hue), 90%, 90%, 0) 29.9%,
    hsl(var(--hue), 90%, 90%) 30.1% 31.9%,
    hsl(0, 0%, 100%) 32.1% 35.2%,
    hsl(var(--hue), 50%, 80%) 35.4% 36%,
    hsl(var(--hue), 90%, 70%) 36.2% 41.8%,
    hsl(var(--hue), 90%, 65%) 42% 43.6%,
    hsl(var(--hue), 50%, 80%) 43.8% 44.4%,
    hsl(0, 0%, 100%) 44.6% 46.6%,
    hsl(var(--hue), 90%, 90%) 46.8% 49.3%,
    hsl(var(--hue), 90%, 98%) 49.5% 49.8%,
    hsla(var(--hue), 90%, 98%, 0) 49.9%
  );
  clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.switch:before,
.switch:after,
.switch__input:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.switch:before,
.switch:after {
  background: radial-gradient(
      60% 60% at 50% 50%,
      hsla(var(--hue), 50%, 80%, 0) 34%,
      hsl(var(--hue), 50%, 80%) 35% 40.5%,
      hsl(0, 0%, 100%) 41.5% 49%,
      hsla(0, 0%, 100%, 0) 50%
    ),
    linear-gradient(
        hsla(var(--hue), 90%, 65%, 0) 30%,
        hsl(var(--hue), 90%, 65%) 30% 40%,
        hsla(var(--hue), 90%, 65%, 0) 40%
      )
      50% 0 / 40% 100% no-repeat,
    radial-gradient(
      50% 50% at 50% 50%,
      hsl(var(--hue), 90%, 70%) 41%,
      hsla(var(--hue), 90%, 70%, 0) 42%
    ),
    radial-gradient(
      75% 75% at 50% 52.5%,
      hsl(0, 0%, 100%) 49.8%,
      hsla(0, 0%, 100%, 0) 50%
    ),
    radial-gradient(
      112% 112% at 50% 55%,
      hsl(var(--hue), 90%, 98%, 0) 46.8%,
      hsl(var(--hue), 90%, 98%) 47% 49.8%,
      hsla(var(--hue), 90%, 98%, 0) 50%
    ),
    radial-gradient(
      100% 100% at 50% 50%,
      hsl(var(--hue), 90%, 90%) 49.8%,
      hsla(var(--hue), 90%, 90%, 0) 50%
    );
  border-radius: 50%;
  top: auto;
  bottom: 0.0625em;
  width: 1.5625em;
  height: 1.5625em;
}
.switch:before {
  transform: rotate(-45deg);
}
.switch:after {
  right: 0;
  left: auto;
  transform: rotate(45deg);
}
.switch__input:before {
  background-color: hsl(0, 0%, 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0),
    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
  top: 3.5em;
  left: calc(50% - 0.625em);
  width: 1.25em;
  height: 1.25em;
  transform: rotate(-45deg) translateY(-3.125em) rotate(45deg);
  transition: background-color var(--trans-dur) var(--trans-timing),
    box-shadow 0.15s var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.switch__input:checked:before {
  background-color: hsl(var(--hue), 90%, 70%);
  transform: rotate(45deg) translateY(-3.125em) rotate(-45deg);
}
.switch__input:focus-visible:before {
  box-shadow: 0 0 0 0.5em hsla(var(--hue), 90%, 40%, 0.5),
    0 0.25em 0.5em 0.125em hsl(var(--hue), 90%, 50%);
}
.switch__label {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

</style>
    

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by Alaner-xs - Tags: switch */
/* The switch - the box around the slider */
.switch {
 font-size: 15px;
 position: relative;
 display: inline-block;
 width: 4.5em;
 height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
 background-color: transparent;
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: linear-gradient(120deg,#234567,#781223);
 transition: .4s;
 border-top-left-radius: 13px;
 border-bottom-right-radius: 13px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1.4em;
 width: 1.4em;
 border-top-left-radius: 11px;
 border-bottom-right-radius: 11px;
 left: 0.3em;
 bottom: 0.3em;
 background-color: #dde4eb;
 transition: .4s;
}

input:checked + .slider {
 background-color: transparent;
}

input:checked + .slider:before {
 transform: translateX(2.5em);
}
</style>

<label class="container">

    <input id="check" type="checkbox">
    <span></span>

    <label for="check" class="shadow"></label>
</label>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: checkbox */
input[type = "checkbox"] {
  visibility: hidden;
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

label.container {
  display: block;
  width: 60px;
  height: 30px;
  background: #d3d3d3;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  box-shadow: 9px 9px 29px #969696,
             -9px -9px 29px #ffffff;
}

label.shadow {
  width: 50px;
  height: 20px;
  position: absolute;
  border-radius: 50px;
  left: 5px;
  top: 5px;
  box-shadow: inset 3px 3px 10px #969696,
              inset -3px -3px 5px #ffffffbd;
  cursor: pointer;
}

.container span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffaa00;
  margin: 5px;
  border-radius: 50px;
  font-size: 20px;
  transition: all 0.3s ease-in;
  position: relative;
  left: 0;
  z-index: 1;
}

.container span::after {
  position: absolute;
  top: 6px;
  left: 4px;
  transition-delay: 5s;
}

input[type = "checkbox"]:checked ~ span {
  left: 29px;
  transition: 0.3s ease-in;
  background: #0a100d;
  transform: rotate(220deg);
}
</style>

  <input id="checkbox_toggle" type="checkbox" class="check">
<div class="checkbox">
  <label class="slide" for="checkbox_toggle">
    <label class="toggle" for="checkbox_toggle"></label>
    <label class="text" for="checkbox_toggle">Day</label>
    <label class="text" for="checkbox_toggle">Night</label>
  </label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: switch, animated */
.checkbox {
  width: 223px;
  height: 60px;
  background-color: #d0d0d0;
  border-radius: 30px;
  position: relative;
  color: black;
  overflow: hidden;
}

#checkbox_toggle {
  display: none;
}

.checkbox .toggle {
  width: 100px;
  height: 50px;
  position: absolute;
  border-radius: 30px;
  left: 5px;
  cursor: pointer;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  transition: 0.4s;
  box-shadow: 0px 0px 3px rgb(255, 255, 20), 0px 0px 5px rgb(255, 255, 20);
}

.checkbox .slide {
  width: 230px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

.checkbox .slide .text {
  font-size: 16px;
  font-weight: 700;
  z-index: 100;
  cursor: pointer;
}

.check:checked + .checkbox .slide .toggle {
  transform: translateX(113px);
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
  box-shadow: -0px -0px 10px #8983F7, -0px -0px 3px #8983F7;
}

.check:checked + .checkbox .slide {
  background-color: #0a1929;
  color: #fff;
}
</style>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #223243;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #223243;
  box-shadow: inset 2px -2px 0 1.8px #fff;
  transition: .4s;
  animation: anima1 0.3s linear;
}

@keyframes anima1 {
  0% {
    transform: translateX(1.5em);
  }

  80% {
    transform: translateX(-0.3em);
  }

  100% {
    transform: translateX(0em);
  }
}

.switch input:checked + .slider:before {
  background-color: yellow;
  box-shadow: none;
  transform: translateX(1.5em);
  animation: anima 0.3s linear;
}

@keyframes anima {
  0% {
    transform: translateX(0px)
  }

  80% {
    transform: translateX(1.6em)
  }

  100% {
    transform: translateX(1.4em)
  }
}
</style>

<label class="switch">
  <input class="checkbox" type="checkbox" />
  <span class="slider round"></span>
</label>

<style>
/* From Uiverse.io by AnthonyPreite  - Tags: minimalist, switch, theme-switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch .checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 1px 1px 5px 0 #d84f68 inset;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #d84f68;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: inset 1px 1px 2px 0px #ff7ca7;
}

.checkbox:checked + .slider {
  box-shadow: 1px 1px 5px 0 #2a9d8f inset;
}

.checkbox:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: #2a9d8f;
  box-shadow: inset -1px 1px 2px 0px #a3fff4;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

</style>
    

<label class="switch">
  <input type="checkbox" class="cb">
  <span class="toggle">
    <span class="left">OFF</span>  
    <span class="right">ON</span>  
  </span>
</label>
<style>
/* From Uiverse.io by BernardoCuevas - Source: Ricardo Tsang - Tags: 3d switch, damper, on&off */
.switch {
  font-size: 20px;
  position: relative;
  display: inline-block;
  width: 6em;
  height: 3em;
}

.switch .cb {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #3d3d3d;
  border-radius: .1em;
  transition: 10s;
  font-weight: 700;
  overflow: hidden;
  box-shadow: -.3em 0 0 0 #3d3d3d,-.3em .3em 0 0 #3d3d3d,.3em 0 0 0 #3d3d3d,.3em .3em 0 0 #3d3d3d,0 .3em 0 0 #3d3d3d;
}

.toggle > .left {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: #ffffffcc;
  color: #ff0000da;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: right;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.left::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center left;
  transform: rotateY(90deg);
}

.left::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.toggle > .right {
  position: absolute;
  display: flex;
  width: 50%;
  height: 88%;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(206, 206, 206);
  right: 1px;
  bottom: 0;
  align-items: center;
  justify-content: center;
  transform-origin: left;
  transform: rotateX(10deg) rotateY(-30deg);
  transform-style: preserve-3d;
  transition: all 150ms;
}

.right::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center right;
  transform: rotateY(-90deg);
}

.right::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(112, 112, 112);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.switch input:checked + .toggle > .left {
  transform: rotateX(10deg) rotateY(30deg);
  color: rgb(206, 206, 206);
}

.switch input:checked + .toggle > .right {
  transform: rotateX(10deg) rotateY(0deg);
  color: #33b833;
}
</style>

<div class="flipswitch">
    <input checked="" id="fs" class="flipswitch-cb" name="flipswitch" type="checkbox">
    <label for="fs" class="flipswitch-label">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, light switch, swith */
.flipswitch {
  position: relative;
  width: 80px;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #260999;
  border-radius: 41px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 38px;
  padding: 0;
  line-height: 38px;
  font-size: 25px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "✔";
  padding-left: 20px;
  background-color: #15009C;
  color: #FFFFFF;
}

.flipswitch-inner:after {
  content: "X";
  padding-right: 20px;
  background-color: #EBEBEB;
  color: #15009C;
  text-align: right;
}

.flipswitch-switch {
  width: 25px;
  margin: 6.5px;
  background: #FFFFFF;
  border: 1px solid #260999;
  border-radius: 41px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 41px;
  transition: all 0.3s ease-in 0s;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

</style>

<div class="checkbox-wrapper-35">
  <input value="private" name="switch" id="switch" type="checkbox" class="switch">
  <label for="switch">
    <span class="switch-x-text">This is </span>
    <span class="switch-x-toggletext">
      <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>Off</span>
      <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>On</span>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, switcher, light switch, vertical-switch, swith */
.checkbox-wrapper-35 .switch {
  display: none;
}

.checkbox-wrapper-35 .switch + label {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #78768d;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-35 .switch + label::before,
  .checkbox-wrapper-35 .switch + label::after {
  content: '';
  display: block;
}

.checkbox-wrapper-35 .switch + label::before {
  background-color: #05012c;
  border-radius: 500px;
  height: 15px;
  margin-right: 8px;
  -webkit-transition: background-color 0.125s ease-out;
  transition: background-color 0.125s ease-out;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label::after {
  background-color: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
  height: 13px;
  left: 1px;
  position: absolute;
  top: 1px;
  -webkit-transition: -webkit-transform 0.125s ease-out;
  transition: -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out;
  transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
  width: 13px;
}

.checkbox-wrapper-35 .switch + label .switch-x-text {
  display: block;
  margin-right: .3em;
}

.checkbox-wrapper-35 .switch + label .switch-x-toggletext {
  display: block;
  font-weight: bold;
  height: 15px;
  overflow: hidden;
  position: relative;
  width: 25px;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked,
  .checkbox-wrapper-35 .switch + label .switch-x-checked {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out;
  transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

.checkbox-wrapper-35 .switch + label .switch-x-unchecked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.checkbox-wrapper-35 .switch + label .switch-x-checked {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-35 .switch:checked + label::before {
  background-color: #ffb500;
}

.checkbox-wrapper-35 .switch:checked + label::after {
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

</style>

<div class="flipswitch">
    <input checked="" id="fs" class="flipswitch-cb" name="flipswitch" type="checkbox">
    <label for="fs" class="flipswitch-label">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

<style>
/* From Uiverse.io by Bodyhc - Tags: switch, click, buttons */
.flipswitch {
  position: relative;
  width: 100px;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 50px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 20px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.flipswitch-inner:before {
  content: "ON";
  padding-left: 18px;
  background-color: #437A99;
  color: #FFFFFF;
}

.flipswitch-inner:after {
  content: "OFF";
  padding-right: 18px;
  background-color: #FFFFFF;
  color: #437A99;
  text-align: right;
}

.flipswitch-switch {
  width: 35px;
  margin: -2.5px;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 67px;
  transition: all 0.3s ease-in 0s;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}

.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

</style>

<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<style>
/* From Uiverse.io by BurgiSimon  - Tags: simple, animation, red, green, switch, animated, css, toggle switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff3636;
  transition: 0.1s;
  transition-delay: 0.2s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: white;
  transition-delay: 0.2s;
  transition: 0.1s;
}

.switch input:checked + .slider {
  transition-delay: 0.2s;
  background-color: #00c763;
}

.switch input:focus + .slider {
  transition-delay: 0.2s;
  box-shadow: 0 0 1px #00c763;
}

.switch input:checked + .slider:before {
  transform: translateX(2.5em);
  transition-delay: 0.2s;
  transition-duration: 0.1s;
}

/* Animation Right */
@keyframes slideRight {
  0% {
    transform: translateX(0) translateY(0);
  }
  20% {
    transform: translateX(0.5em) translateY(-1.5em);
  }
  40% {
    transform: translateX(1em) translateY(-1.75em); /* Highest Point */
  }
  60% {
    transform: translateX(1.5em) translateY(-1.5em);
  }
  80% {
    transform: translateX(2em) translateY(-1.25em);
  }
  100% {
    transform: translateX(2.5em) translateY(0);
  }
}

/* Slide Animation Left */
@keyframes slideLeft {
  0% {
    transform: translateX(2.5em) translateY(0);
  }
  20% {
    transform: translateX(2em) translateY(-0.25em);
  }
  40% {
    transform: translateX(1.5em) translateY(-0.5em); /* Highest Point */
  }
  60% {
    transform: translateX(1em) translateY(-0.75em);
  }
  80% {
    transform: translateX(0.5em) translateY(-0.5em);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

.switch input:checked + .slider:before {
  animation: slideRight 0.15s forwards;
}

.switch input:not(:checked) + .slider:before {
  animation: slideLeft 0.15s forwards;
}

</style>
    

<div class="switch">
    <input type="checkbox">
    <div class="left"></div>
    <div class="right"></div>
    <div class="switcher"></div>
</div>
<style>
/* From Uiverse.io by Charly-T - Tags: switch */
.switch {
  --switch-width: 3.5em;
  --switch-height: calc(var(--switch-width) / 2);
  --left-ball-color: black;
  --right-ball-color: white;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: calc(var(--switch-height) / 2);
  background-color: var(--left-ball-color);
  position: relative;
  overflow: hidden;
}

.switch input[type="checkbox"] {
  width: 100%;
  position: absolute;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.switch .left {
  position: absolute;
  width: calc(var(--switch-width) / 3);
  height: calc(var(--switch-height) / 1.5);
  background-color: var(--left-ball-color);
  border-radius: 50%;
  left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  z-index: 2;
  pointer-events: none;
}

.switch .right {
  position: absolute;
  width: calc(var(--switch-width) / 3);
  height: calc(var(--switch-height) / 1.5);
  background-color: var(--right-ball-color);
  border-radius: 50%;
  right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
  z-index: 2;
  pointer-events: none;
}

.switch .switcher {
  position: absolute;
  width: calc(100% + var(--switch-width) / 3);
  height: 100%;
  background-color: var(--right-ball-color);
  z-index: 1;
  left: calc(-50% + var(--switch-width) / (3 * 2));
  pointer-events: none;
  transition: left 500ms ease;
  border-top-left-radius: calc(var(--switch-width) / 3);
  border-bottom-left-radius: calc(var(--switch-width) / 3);
}

.switch .switcher:before {
  position: absolute;
  content: '';
  width: calc(var(--switch-width) / 3);
  height: 100%;
  background-color: var(--left-ball-color);
  display: block;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  z-index: 2;
}

.switch .switcher:after {
  position: absolute;
  content: '';
  width: calc(var(--switch-width) / 3);
  height: 100%;
  background-color: var(--right-ball-color);
  display: block;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

.switch input:checked ~ .switcher {
  left: 100%;
}

.switch input:checked ~ .switcher:before {
  display: none;
}
</style>

<div>
  <label class="switch">
    <input type="checkbox" />
    <span>
      <em></em>
      <strong></strong>
    </span>
  </label>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: switch */
.switch {
  height: 24px;
  display: block;
  position: relative;
  cursor: pointer;
}
.switch input {
  display: none;
}
.switch input + span {
  padding-left: 50px;
  min-height: 24px;
  line-height: 24px;
  display: block;
  color: #99a3ba;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.switch input + span:before,
.switch input + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12px;
}
.switch input + span:before {
  top: 0;
  left: 0;
  width: 42px;
  height: 24px;
  background: #e4ecfa;
  transition: all 0.3s ease;
}
.switch input + span:after {
  width: 18px;
  height: 18px;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.1);
  transition: all 0.45s ease;
}
.switch input + span em {
  width: 8px;
  height: 7px;
  background: #99a3ba;
  position: absolute;
  left: 8px;
  bottom: 7px;
  border-radius: 2px;
  display: block;
  z-index: 1;
  transition: all 0.45s ease;
}
.switch input + span em:before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -1px;
}
.switch input + span em:after {
  content: "";
  display: block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #99a3ba;
  border-bottom: 0;
  width: 6px;
  height: 4px;
  left: 1px;
  bottom: 6px;
  position: absolute;
  z-index: 1;
  transform-origin: 0 100%;
  transition: all 0.45s ease;
  transform: rotate(-35deg) translate(0, 1px);
}
.switch input + span strong {
  font-weight: normal;
  position: relative;
  display: block;
  top: 1px;
}
.switch input + span strong:before,
.switch input + span strong:after {
  font-size: 14px;
  font-weight: 500;
  display: block;
  font-family: "Mukta Malar", Arial;
  -webkit-backface-visibility: hidden;
}
.switch input + span strong:before {
  content: "Unlocked";
  transition: all 0.3s ease 0.2s;
}
.switch input + span strong:after {
  content: "Locked";
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  color: #02923c;
  transition: all 0.3s ease;
  transform: translate(2px, 0);
}
.switch input:checked + span:before {
  background: #eae7e7;
}
.switch input:checked + span:after {
  background: #fff;
  transform: translate(18px, 0);
}
.switch input:checked + span em {
  transform: translate(18px, 0);
  background: #02923c;
}
.switch input:checked + span em:after {
  border-color: #02923c;
  transform: rotate(0deg) translate(0, 0);
}
.switch input:checked + span strong:before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translate(-2px, 0);
}
.switch input:checked + span strong:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: all 0.3s ease 0.2s;
}

.switch :before,
:after {
  box-sizing: border-box;
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">Hello</span>
  <span class="text">Let me Pop up</span>
</div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: simple, tooltip, button, color, btn, html, css, simple button */
.tooltip-container {
  color: #ffffff;
  --background: #00a36d;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 50px;
}

.tooltip {
  background-color: #00a36d;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 50px;
}

.tooltip::before {
  background-color: #00a36d;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

<!-- From Uiverse.io by Cobp  - Tags: tooltip, dark, hover effect, html, tailwind -->
<div class="bg-zinc-800 rounded-md">
  <div
    class="flex items-center justify-center p-2 cursor-pointer rounded-md text-neutral-500 hover:text-neutral-100 hover:bg-neutral-500 font-medium relative z-[9999999999] data-[tooltip]:after:content-[attr(data-tooltip)] data-[tooltip]:after:mt-2 data-[tooltip]:after:text-sm data-[tooltip]:after:invisible data-[tooltip]:after:scale-50 data-[tooltip]:after:origin-top data-[tooltip]:after:opacity-0 hover:data-[tooltip]:after:visible hover:data-[tooltip]:after:opacity-100 hover:data-[tooltip]:after:scale-100 data-[tooltip]:after:transition-all data-[tooltip]:after:absolute data-[tooltip]:after:bg-white data-[tooltip]:after:top-[calc(100%+4px)] data-[tooltip]:after:left-1/2 data-[tooltip]:after:-translate-x-1/2 data-[tooltip]:after:-z-[1] data-[tooltip]:after:px-2.5 data-[tooltip]:after:py-1 data-[tooltip]:after:min-h-fit data-[tooltip]:after:min-w-fit data-[tooltip]:after:rounded-md data-[tooltip]:after:drop-shadow data-[tooltip]:before:mt-2 data-[tooltip]:before:drop-shadow data-[tooltip]:after:text-center data-[tooltip]:after:text-zinc-800 data-[tooltip]:after:whitespace-nowrap data-[tooltip]:after:text-[10px] data-[tooltip]:before:invisible data-[tooltip]:before:opacity-0 hover:data-[tooltip]:before:visible hover:data-[tooltip]:before:opacity-100 data-[tooltip]:before:transition-all data-[tooltip]:before:bg-white data-[tooltip]:before:[clip-path:polygon(50%_0,0_100%,100%_100%)] data-[tooltip]:before:absolute data-[tooltip]:before:top-full data-[tooltip]:before:left-1/2 data-[tooltip]:before:-translate-x-1/2 data-[tooltip]:before:z-0 data-[tooltip]:before:w-3 data-[tooltip]:before:h-[4px]"
    data-tooltip="HTML"
  >
    <svg
      role="img"
      viewBox="0 0 24 24"
      class="w-6 h-6 fill-current stroke-current stroke-0"
    >
      <path
        d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"
      ></path>
    </svg>
  </div>
</div>


    

<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Dyls00  - Tags: tooltip, smooth, cube, colorful, custom */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: #ee6d22;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 15px;
  font-size: 25px;
  padding: 0.7em 1.8em;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 15px;
  font-size: 50px;
  margin-top: 90%;
  background: black;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: 1.8em;
  left: 50%;
  transform: translate(-50%) rotate(180deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  color: white;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

<!-- From Uiverse.io by EcheverriaJesus  - Tags: tooltip, icon, animation, hover, github, tailwind -->
<section class="flex justify-center items-center">
  <button
    class="group flex justify-center p-2 rounded-md drop-shadow-xl bg-gradient-to-r from-gray-800 to-black text-white font-semibold hover:translate-y-3 hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]"
    href="/"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 15 15"
      class="w-5"
    >
      <path
        clip-rule="evenodd"
        fill-rule="evenodd"
        fill="currentColor"
        d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
      ></path>
    </svg>
    <span
      class="absolute opacity-0 group-hover:opacity-100 group-hover:text-gray-700 group-hover:text-sm group-hover:-translate-y-10 duration-700"
    >
      GitHub
    </span>
  </button>
</section>


    

<!-- From Uiverse.io by EcheverriaJesus  - Tags: simple, tooltip, hover, tailwind, cool -->
<section class="relative flex justify-center items-center">
  <div
    class="group flex justify-center transition-all rounded-full bg-gray-200 p-1"
  >
    <svg viewBox="0 0 320 512" class="w-4 h-4">
      <path
        d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"
      ></path>
    </svg>
    <span
      class="absolute opacity-0 group-hover:opacity-100 group-hover:-translate-y-7 duration-700 text-sm"
      >Information</span
    >
  </div>
</section>


    

<div class="tooltip">
  Hover me
  <div class="tooltiptext">Hi there !</div>
</div>

<style>
/* From Uiverse.io by G4b413l  - Tags: tooltip, button, button hover effect  */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: #282828;
  color: #f1f1f1;
  padding: 1em 3em;
  border-radius: 1em;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #28282817;
  color: #282828;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #28282817 transparent transparent transparent;
  transform: translateX(-50%);
}

</style>
    

<div class="Social-Btn">
  <span class="svgContainer">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1 .9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2 .6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6 .4 19.5 .6 29.5 .6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8 .9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"
      ></path>
    </svg>
  </span>
  <span class="BG">Help?</span>
</div>

<style>
/* From Uiverse.io by Invacui  - Tags: glassmorphism, tooltip, hover */
.Social-Btn {
  width: 4.5em;
  height: 2.5em;
  align-items: baseline;
  justify-content: center;
  border: none;

  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
  fill: white !important;
  position: relative;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
  color: white;
  background: rgba(83, 69, 69, 0.562);
}

.svgContainer > svg {
  width: 1.5rem;
}

.BG {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 2s;

  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: transparent;
  filter: blur(4px);
  z-index: 4;
}
.BG::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: white;
  opacity: -1;
  z-index: -10;
  transition: 5s all;
}
.Social-Btn:hover .BG::before {
  opacity: 1;
}
.Social-Btn:hover .BG {
  transform: translateY(-130%);
  transform-origin: bottom;
  background: white;
  color: black;
  filter: blur(0px);
}

.Social-Btn:hover .svgContainer {
  z-index: 20;
  background-color: rgba(156, 156, 156, 0.466);
  filter: blur(0px);
  fill: black;
}

</style>
    

<div class="tooltip-container">
  <div class="tooltip">
    LET'S CREATE!
    <span class="tooltip-item">1 - Explore</span>
    <span class="tooltip-item">2 - Have fun!</span>
  </div>
  <button class="btn">uiverse</button>
</div>

<style>
/* From Uiverse.io by Javierrocadev  - Tags: tooltip, gradient, dark, hover effect, hover button */
.tooltip-container {
  --background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  position: relative;
  color: aliceblue;

  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 16px;
}

.tooltip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100px;
  height: 120px;
  z-index: -1;
  top: 0;
  left: 50%;
  background-color: #212121;
  color: antiquewhite;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: 12px;
  overflow: hidden;
}

.tooltip-item {
  z-index: 5;
  background-color: #171717;
  border-radius: 4px;
  padding: 4px;
  font-weight: bolder;
  font-size: 6px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.5em;
  width: 0.5em;
  top: 0.8em;
  left: 85%;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--background);
  animation: tooltipBeforeAnimation 4s infinite alternate;
}

.tooltip::after {
  position: absolute;
  content: "";
  height: 3.6em;
  width: 3.6em;
  bottom: -0.8em;
  border-radius: 999px;
  filter: blur(8px);
  right: -5%;
  background: var(--background);
  animation: tooltipAnimation 5s infinite alternate;
}

.btn {
  background: var(--background);
  border: none;
  color: aliceblue;
  cursor: pointer;
  background-size: 100%;
  transition: all 0.2s;
  font-size: 12px;
  padding: 0.7em 1.8em;
  border-radius: 16px;
  font-weight: 700;
}
.btn:hover {
  background-size: 150%;
  background-position-x: right;
}

@keyframes tooltipAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.8);
  }
}
@keyframes tooltipBeforeAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.tooltip-container:hover .tooltip {
  transform: scale(2);
}

.tooltip-container:hover .tooltip {
  top: -210%;
  left: 43%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by JhaveLang  - Tags: simple, tooltip, animation */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: linear-gradient(45deg, #22d3ee, #1f9df5);
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom;
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.tooltip-container:hover {
  transform: scale(0.9);
}

</style>
    

<div class="tooltip-container">
  <div class="tooltip">
    <div class="text">Save Trees</div>

    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="leaf leaf3"></div>
    <div class="leaf leaf4"></div>
  </div>
  <div class="leaf icon"></div>
</div>

<style>
/* From Uiverse.io by Lakshay-art  - Tags: simple, tooltip, animation, green, shadow, realistic, creative, savetrees */
/* This is an example, feel free to delete this code */
.tooltip-container {
  /* --background: #22d3ee; */
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  margin-bottom: -100px;
}

.bg {
  position: absolute;
  left: -30px;
  top: 0px;
  z-index: -2;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  width: 180px;
  height: 100px;
  transform: translateX(-50%);
  padding: 0.5em 1em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCACOARwDAREAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAQFBgEDBwL/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAgEDBP/aAAwDAQACEAMQAAAAonLzyEprcbIg6MSq8ntm40pixTNySW5LHpQABmBsbqNelTAAANCGRAiCugXdFnnWZaNyVJ0rZf2rkOyEI08Hjdye8xgtKruS4GzdYPbcBk6xIVPAFbZRiOYGDIyLEoRhgBJmxWunsmBqVhbgitV4TzGS04BTdny/VsmRE4qTbdokzlJVk7C2KshIldOeptJ0RSZBESVtnR1T9Jo9FWllkyYwFX3OXCWmCyZs0VZlrLg3JCNhipojy1nRh1WChlPLkWwAE8RVVUsjsytrAFBXk18miIK8mILWrntF5lol8RJ1PSJV2wJ6zOolq2gwcrGS9io4RpCjWL/2qm5kdznobQFAJwcQJIvBJG49UqhzwgMnebsBubfOi45qPNM6ClkOXwCrGskSaPZgepzsr+MY0FzLkc2J3W+V82vIslkhiDJei1K9O12Z7z1tihio81WTKy5ynqKtoGDBkBk9CknOiyXXvURznnBXZXsut0jKlZMwNEES6rEMUzTYzjczO7nT66Zsc1fmeeyqqenqaNJz9NnLOtgdI0TYDJZuzxNI826sb6NjVObF4kLEpzYa50e9KQzj10cI5c7ErqnR5xRebnJ08hhAZOcpBlt1LkoPLNYEhSxVSHM70xjoJ0DcAFebDW+gFebXh3oj4c3TQonGGtropKAAHFk6jJgyPG6cxVdWbtJQZHapnsMAAAvzah3oMLyWk/0IycpU+MrktSOlgAwHIdmPJoQFTySzev1UlWJcy46SlU/2ZwABEczQDvQY8SjuZzowQso6ZCf6IyScgMFuWTMJK50qJdm+y3t9DWlQw2S+1I9gAAQ3NC85xoPYGDYbBUMBN9WiUXApubO2UnKrJg1D7QGBnWSUs8a4qU7AAAxKsc58YwaSX6NHNHGAM4f6EsZlrxJ0numrFY5ZgD0bTQGPdJzpskerK8ysbJ9HqgDQGaJQ3GYws17H0jueaZFADcWPorfNqJWmKRkDGDNNw6MmnG6kv00DS/MlGv8ARuoA0BmuSPM90eNxeUDOaJAABJU1C0m6ISyZNxs1uHLbzTzeqSfWgDXKO5G+hqwDQGapJckj3GAzk1/maprE4JGDcedeCY2pWlP5z6DAGsjZJ0letABKK5N/Q9YBoDNUkuaStGSjxPJ1AB6xgwAYsHR62lcf/8QAQxAAAgECAgYGBwUGBQUBAAAAAQIDAAQFERASITFBUQYTICIycRQjUmGBkaEkM0Ji0RVDU4KxwURykqLhNDVUc/Bj/9oACAEBAAE/AVcq2pJsI51G0iSB4iQw3EVd4pLd2ywOigg948/0psBufRUmTJyVzKcRVvd3Ni+SkjLxI1WN9HfRZrsceJdIQmhGONSXFvDskljT3Mwp8asE/fZ+Smj0hsh/FP8ALQx+yPtj+Wo8VsZfDcp/NspWDAFSCDx59vUOVEa2w00DAZjb29wzO6psVs4Nhk1zyTbUnSH+FB8Wb+1ft++VtdCieS1a9LLRoB6Trxy8QqZisbis5pc1+/8AxEbvjWyNAq79FpiNzZ7I37nsHdUuJWN+mV3CYpeEibcqtLlrS5WVeG8cxQx/Dub63LV21J0kgH3Vu589lS9Ibt/AqR/U1NiF3P47h8uQOVZ1rAca6xeda6n8Vb6imlgbWikZDzBq26Q3EeydRKvyNWmJ2t5sjkyf2G2HSqZ79lBQOw0avvFNbn8Jzoqy7xpvMYht+5F6yT6Cri+uLo+skOr7I3dlpOWhcOumtxMsRKH51lkciNulu5MG4V1y++uv5LSdfOcoo2c8kXOosCxSf/DOoPtkLVlgD3M0sM0whmjPg1cyffQ6Jxcbp/8ATlT9E0Pgu2+KZ1L0Wu0+5mjf/aansr6y++gcLz3j50sw47KB5GrPHbm3Gq/r0HM7fnVxj13N93lEvu21HjOIR+G5b4gGrfpPMv8A1EKuvNdhqzv7a+TOCQE8VOwjRcYnZ2pIluEBHAbf6UmN4c51fScv8wIqOWOZNaN1deanPRcNBDGZJiEUcTWJYubgmO21kh5ne2hI3lcJGpZjwFW3R64k++YRD5mosAsk8evJ5t+lLhVioyFsn9au5cJtZzEbZWI9mgCxAG0nlVlg00rq841I/ZO80Ng2bBU1rBcfexK3v40+BWzbUZ1+OdXOCLBA8vpOxRn3l/vVpZrfXcUDSamufFvqHopYJ42ml+P6VDg+HQeC0i82Gt/WgoUZAAD3aMVsZHK3tpsuYv8AeOVWGIxXqZZ6kw8UZ39i+wGzvO8F6mU/iTZ9KvsNusMfv7UPhcbjSzBtjVvqyxNYU6i6t0ng4ZjvL5UcJsL9C+G3Gq38Jv8A7OpYLvDLlddWikB7rDj8aixe5xTqrFNWGR/HKOWXCrPCbSyGxNd+LuMzU2EWM/itkB5p3f6UejnVP1lndyxPS9Ibq0MkFwiTOhK6+ertFXd7PfSa8z58hwHlosMDmucnm9VH9TVtawWqasMYXmeJ0EgDNjkKxPHPFDaeRk/SorK8uF6yKF3UnfzrDJ7LrOrtbeXW4uwGz459i5uorWPXlbLkKtsPuMbcT3WtDZjwpxasRg/ZeMsIxsRg6eW+opFmiSRD3XAI7N9g9teMZNsU3tpRhxmw8D+lRD5/rVliMV2jaw6qRPvEc5atXePww92BetPtblpukV2dyQr8P+aHpWLXahmMjHidyirvovA8f2Z+rcD4Grqxu8Ob1yELwYeE/GlmB37PfSsQQykgjcRwpsVu3t2glcSxn21zy+NI7IwZWIKnMGrXpHbG1+05rMN4Vc9ap+lH/j23xf8AQVcY3f3GYM+oOUeyuOfGkRpZFRBmzHIedYdg0drlJN6yX6LpJyBPAVi2LNduYYjqwA/6qw7B9fKa5GXKP9aACqANg4AbKtraK1i1Il2c+JrdU1/awZ68y58htNHErm77ljbn/wBjjdVvhYD9fdv183v3Cra5TUWNjkffXSqx6yJL1BtTuv5c66PYmup6FMcsvuyePu7WeqCScgKxa6S8xF5YvBsUHn76wXCkxHXeZ21E2ZLvNLgGHr+6ZvNzSWsNqNWGMIp5aAgkzDAFeINX3ReyuczD6h/y7vl+lXeBYhY7dTrU9qPb9KE4/EKEiHjW8aIopJ3CRIztyUZmrDotPLk943VJ7A2t/wAVfYJA+GdTaRBJE7yH83vNYdfC8h73dnTY6neNOP3pihW2TxSeLyrBrAP9qkHdHgH99P7KnHgxGYDkc/1r9il/vryR/wD7zqHCLSHbqa7Di9ABRkAAOWmKbJTFKNaJhkQaxTo9LCxmsl663PAeJaW7xGLuCa4XhkWNa2Izfiu3/wBRrrLu1cHWmibhnmKw7pJl6u92/wD6Df8AEU2K2Cx6/pcRHINmflWKY29/nFF3IOXFqwXBNX7Vdp3vwR/rX/Y8WL/4K43/AJWoEEAg5jnzphmKVCaAyq+xW3se63flO6Nd9LBiuJ964l9EgP7tdjGocAw0DU9GV+bNvqfophTcJov8j/rWJdGltbPr7N3fU8SNt2fCsH9B9PC36ayNsUncp99Q28NuurDEka8lXLTieDekS+l2j9Td/R/Ov2vc2TdXiNoyt7S8aixqxk/fap5MMqnkOJYoSufrH1V8qjRYo1jQZKoyHbjiL791TqF1chognaJua8RSOJF1lOzRNEkitHKgZDwI2ViHRxs9ey3fw24eRpcExFjl6Pq+8sBWGYDFaESz5SzDdyWlQtVxBHcwtFKuanfX2/BMxqm5svqtQY9YTD73q25OKfGLBF1jdJ8NtS4rc4g5gwyI++ZuFWGERWfrH9dcHaZG/toiHezqbxCotqZVj+D+gz9fCv2d/wDaeVYBjoyWzu22jZG5/oexfSCQ9VkCo31jSWyWw7iiZj3SBlViZYJBdrCXjjPeqCeO5jDxNmNDTRIcmlQH3tUeO3K+NEf6VaY3Yyff60TfMfShKJ19RkU5jjSQAeL5aLg5uBy0wzNC2Y3cqR1kUMp2VKua56ETW8q1F5aHj25ikiOebVPhFhcktLaoSeI2H6VHgOFxnNbRfiSf600aRKqRoqLyUZCo11jWovLRNvFQ8angjuYXilXWRxkRWLYTLhk/tQMe4/8AY++sH6SdQqwXnej/AAycR+tQ3ENymvDIsi81NXM3VRbPEd1Xd/DaqTI+bncg3mi0+KXoz8TfJRUECW8CxJ4VFXGFKXMlrIbeQ+zuNeg4o/de8AT3MaXA7fL1ju78Tu0wXM1s+vDKyH8pq06TOvduotf8yb/lUWK2tyvqJAW5E5GjmTmdDyJGus7BR76R1kQOjBgdxFW8xhf8p305BiJB2EaIvD8e3NwqHedM3CovFodEnDwzKHjbgaxHoq6kvYnXX+E2/wCdSRXFlJk6SQuOeyjdXB2GeU+bmrfD7q6PdjOqfxtsH/NWNhHZR5L3nPibsyp1Urx556rEaCMt+lL66j8M7/OjiV4wyNw9W0E2IXIUszcWZtuQqONYo1jQZKoyGi3mJQxfLRDuPbl8PxqHefLTKO5UZykFHYtJtkFO4jQs24VK5lck8aEaDcqj4VKgWziOW0nf2r7Zf3H/ALG0XUP2K1uBuYarfCraA3M3VKQHIOWfE8qIIbVIyI2EctFph895tVco+LndVnZ2NvAIkzRuJO816DntSTMcKlgaIbWU+RpWKsCKNx7K1bk8eI7S3ZRikw3cRTSxundcVDvOlhmpFDeKlPd86iXIEmrqbrH1V8I0mMz2cYXeNtXEXUlRx1dvYzrFYJI76VijBGOw5aETrujZHGMk/X9CaikMUqSDepzrFMNa4Zbm2XNmy1hz99WWCKmT3Peb2BuFABRkoyA5aGuZCMgdVeQrfv0Qx5nWO4VH4x2r2LdIPjpzrWbma1m5mtY8z86MkmzNmr0iXV1dfZ2LKXYYz5ir45zAchpSNpDkozpLSNVybaalMdvF1YVWc786fD7R99unwGVRW8UEXVRpkh4b6SytY/DBH55Z9oDM5AbahsydsmwcqkUK2zdQ3jtEZjI1cQmF/wAp3VHFrbTsWpHU91QMudAFjkBmajstmcp+AqSaNO7Cg/zUSScydIORzrqxOuvH4vxLQJR89zCncyOWO86IVgVNeUgngKXLU2DIU11EjZFq46QMzlnlTRMvvHu0jIEZjMcqt1jl/cavnSqq+FQPLRMNx0A5qO1KoaM5ipw2oNXdxrLaBVvAIU2+LjU0jXEnUx55VKqq5VduXHsxyGJwwrVjuUDEb+NSLqSMvI6LSEH1r+EVcXZfupsXn2MieFCKQ7o2+VRx3C7Cnd99Mg/EtdRHyqONFcZDsS+DRGe4O1J4DS+IVqJra2qM6lVmiKocjUcJhgOrtfKmikXxIe1aS6j6h8LVdD7S1Imu4Ucanl1vVx+BfrpByOf9a65uGqP5RXpUw/F9BQvZRvCn4Ul8n41Ip5EkUarZ6F8Q7DDNToh3EdqTwGk8Y8+y9o3WHvKF86Ftbhci4J561G0iPgkp7SVNuxh7qy0SSGQgnllSPqBuZGVbzkKhstmcvypYkUZBRSnXUHmM+zuqOc56rbaHDtQ+LtSfdmk8Y89E14Ijq6uZqS7m5geVGV23ux+PYDEcTWeZ29i1hVEEh3t9KkvVT8JNftD8lf/EACgQAQACAQMEAgMAAwEBAAAAAAEAESExQVFhcYGhEJEgscHR8PHhMP/aAAgBAQABPxBcSqmlI8MdYdoqEBAjqtDuhVT2nt42fUR3NhIPNjpPeax1OSd6gXoX2mzV3gi0rxVTJuC6J8F3HvWybT2AftmvpOq/tVxirnFv3qaHZg2djPvz+NW1vELV4JojpL0043iI046P5KJQDKuKjDRf9Tp7uax2f4mfcr1uH+TbdRzO/wCfqJcAaNrZv3e0W0kFZ1lq3fWU60bN+HHiVOwoRoa7NXs3LbW1J7Jsz5VTpbRMT3mfpctDxz7Mepb3VrQfRRLcuescJNcXHRrDYHuwTQj5udWCoiJzZ/cw/Uoit/xd/Fz98JrNMRc1TiUyHn4ou6L+CNzkgbQHDhjmc8fG3HeOpGY/9t3oRy7wYvqTb4ca9t5T/p/7CtMndmra9Vmj3SnI5riKwAaiUzT4rvDWJGLdIqsAd4anmFC9DAxNxekW/UomaXWcMlk/lx/pmjzt/oky326ekma/2XpZ7uLwReojnqWO8wP0BUe0JI3GhsndIGHSntEZRmgn+9YykRl/eR/iZvRxNeoVzO4GDwX/ALqgQlt2UPkxGk5IH+spX/YnWgcHe4OkrXrrGA9gLXxvKd4//Mwfc0x1aD9JeYOor2wT1logkuAAu/qVj/L3OAINBQGKIemL1GHnWPvR4B7zKFh9KdNspS0oFNhdVyxW+8VPoCT6XWX3ZhQYKAUHwFh4JuqCAMRFBNaN/EvnXXMxsEaREKSk5JZbMUBeuhhPF9ZPRpyPRlJgduP/ACFZGesC6JA8nLeGlHVfWcPZHSySmuzcfcDYunDpwNFpupjOpil7cE18Gxa+dFwvb37Kh2fo1is4pl59dHB9G37mrWrwb/5hL37e2bd2UvCcncd5tFVRLVaA/kEFc7M6QxfDvbsSSkfvQL1ObNdfitt4nGNjKvAQfF7k2/F+K3QFOrmzMsWJfRJdy/lGjNMS8WRtQ876tfRYqpuQcm3a4st03RPfKw9O0NfdJoyEl1TjTtA6h4jl4tN8K+xFEXWnRMrNFo9jtAYhQEuo1X5gPiAdE/sNKJrzgVjPDNc7DwCQXT+0z4uKrS9V5lAwSWrTQXD6329o3es7/AIIBa8HLEU+Wru9OnEUthp0l/g6TFHlIoHaDqg1VKcrvFBagcsPFdq1HcLT6jDwrSP4/faBU6gu+1pp9QtQ8DoTvFv8zuWzsHWDNm7xwXamdefc3rTv+CcqJW6o3zBmAbHUx/gSmw5aBHOrtU17rf5WMz5muXzrPBL50UGx7kRv+f5/5iNpYvHrrqPqpWCjqaTRD2l9Q2hz/ItWafcA2jpuvhToukIWfX1R5G5QDwOQwtazxXwxKZlpjoeZWDUrmd6dGOvw4217Hsg89z/qiZ1QX609Q6caAoJbrvzL29QRBjMUOsWxoc8VbclPUGfURNh6vozL21213vf9iVNOAPCFz6pT+lbChL67PldiDQbqQ0HcOq7ES3EpFtc1AKIWDTyh1bkQzgIRoz/YRc67Wna+PMqF6O0HDvp1gdbRKomndIj+rEJ/Kiq7lDTcjo2siidGjkfTNxuUrdcazrvzvEHaJew30qhP00r9RafDA9nvvC6r6jUUDkA0NdpSIAOD8O+nEC9LfGnwxYo78x/CsfihXbqbdoMY9GpMIm0vSbd5eIZ5tame8x4Yfb5CD7c+4j7FjV4aqpQ68/7vBfHobjsnCQvHz9fi6mTtt6eyz3EzPRr+guCnmh6B0vT2xsZQ5RF1ym92X0iutRMEA0XSUsZBcM0qP4fL2O0fXavoyRofrn4D3OGCksWXIeFs1zdbVKnlkGllZ8N+SHFf7OiQ8/WYj4uK/wBzGBmqZfZj1DVYa5fsi/sgzPaMJ5SkXdbIAABRxAsNGfkat2yt5nYPU6xNYYbMPTER4xuqBmA9WABQARdyO0oQqtma1GhW80Z9Lv8A6TDo3QoeCCquDWAOD9QAKADpBm6R6YBRxHHTrdMy4f8AYTSkV+6Z29FNkMvuza7wGaaI/sPgZUC3U2OsJtRQez068wlnAzqrqvVmRrSXPAaRb1+uJ4C/uGO9Lf0v55Ou0X0eSV5D2+90MzgxpA8OXwV1jVYq5aqZvf6jIf3YQdTNix8zkGkZYgsDzN2a8bfkMOPDyfIw9sx0zkhWsswiJWQP+orROiwkOurFF9xxfclmEdv8iC69SjadH+CWW3Ka9Dp86aY7fCqWXPNNfFrBGh8bMrZltjbZowkDhoLT3HnoD9Qnxdg8pzKGAB0PhCd4uKy4z+ZaP4EufRlh6xCLsS7DvNKY33YD96KdjiI2pyAlIXEZyKS/xHkH2r8c3VjZSD9Et1QOgC/tTFSlWDK6y9ekYFE7EduWPx1nU3enSIKFNSY+4SbraGokQ6BLeY8Mbsx+KKNNOhLmCqq9pFdvNhpKrmlY+ewFx0zySqpuikkXJ0ilqDXV3+VACjLoVNEyho3bf4Ycy4wF6DZzpHGv+JvQB8WYFBadzojLoN2OWn8Mvqax7Dl7QwAlBhR4g1Rtxz0gApFGGKq1by5no3ZVBXujpncr8rQbZg9NpXZfg3D7n/Sn/SleC7aHUwtMsXaS8aH71/AtyLt35IAVOF+7nebbQ+vk8eYTV3WUnHmBPM9vP4aj0DlWtr11mdM8ivtzHP1X4aRAQrQNY+X6pue8IACgAR03Wa/iC6CVFFamcS+MzfMDpjwywyhNAgGF30K7sYo63Fvi4qQr8oQqxEuLFIc/1IGyTfaJHesmnwCaerXfvDUnRdVVR5mkVUuXd+augO7H7TgY01w8Pw0urLL8wJa03yHywWgeBUr4DQO8uHIfjtCgk1zFgLtgSyAytA6suFFlp2jwUdXnrEbphwU1/Fo8jnqStFBo1HiCA3gHp8LoBlL0Uid/JufhPg0Ce0p7F73hoh6mSKP2ks/9sqRMygKorj4Yb6x+Luhh/Ne8RYKno1D0Juw1A6VHeLNHlDH5Z1pK7MYXmn1/mM2y6vjlggxFRW6fr4oQDW0Vt+L/AIIaAn+3E0od7yiKEeTSVtdnwqTr+FT+F7H5rR/Lp/I5EXaIe2VFGCc0RFJe4eLplwAG7/kUNIj1xDDcNsECTepYAzR0uAgFq0BrLAycH+sC0Z0lA43EULaxx8V8C5CjAgIdq7fO0o9MSmuIqZyTb/4Dqmdla0RVlHp/zD76Qwy/jQy7MXalXd/DMJiE2Qtsx2J0e8//xAAeEQACAgMBAQEBAAAAAAAAAAAAAQIREBIgMEBQYP/aAAgBAgEBPwD8JF/iX/GsjAaF8d4r1iyS+RIURofrsUUV6xGOInWEMfqhMor1iMTscRCw/dCZLEYmoyjU1NSUSMTXEiOGhOhMk/gTJYiy8VmyTIsvEiOE7HEbE/euIdyRFFCRJEcRG8sXohoeYdKQ2RZYmSZHCJPKJZXlZYkNEOpc11REnlRK8aKEhoj3LKEuUJcLF5ssssZE1NREhC5RLFCXgkSWEN8ampqajI8SELlEhCRXgpDeb4s2NjYZHh4jyiREiy8N4ortRK7ZHh4jyiQhPN4svlCxZ//EABsRAAIDAAMAAAAAAAAAAAAAAAABERJQAmCA/9oACAEDAQE/AMJci+HHf4y2LDQxMWHUksWwoII8T//Z");
  border-radius: 30px;
  background-size: cover;
  box-shadow: inset 0px 8px 9px #182218, 5px 8px 0px #314328;
  filter: drop-shadow(60px 60px 6px #18221888);
  border: 10px solid #3f5641ee;
  z-index: -1;
  animation: float 2s infinite;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  bottom: -22px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #e9f6f4;
  border: 10px solid #3f5641ee;
  border-left: none;
  border-top: none;
  border-radius: 5px;
  box-shadow: 10px 4px 0px #314328;
}

.tooltip-container:hover .tooltip {
  top: -120px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.leaf1 {
  top: -30px;
  left: -60px;
}
.leaf2 {
  top: -30px;
  left: -60px;
}
.leaf3 {
  top: -30px;
  left: -60px;
}
.leaf4 {
  top: -30px;
  left: -60px;
}
.tooltip-container:hover .leaf1 {
  rotate: z 20deg;
}
/* .tooltip-container:hover .leaf2{
rotate: z 20deg;
} */
.tooltip-container:hover .leaf3 {
  rotate: z -20deg;
}
.tooltip-container:hover .leaf4 {
  rotate: z 40deg;
}

.leaf {
  width: 60px;
  height: 40px;
  position: absolute;
  transform-origin: 100% 100%;
  transition: rotate 0.5s 0.2s linear;
  /* border: px solid #314328; */
  border-radius: 0 100%;
  background-image: linear-gradient(to right, #b4c7b3, #314328);
}
.icon {
  /* box-shadow: 60px 60px 6px #18221888,120px 60px 6px #18221888; */
  transform: translateX(-50%);
  filter: drop-shadow(60px 60px 6px #18221888);
}
.text {
  z-index: 2;
  font-size: 22px;
  color: #3f5641;
  font-weight: bolder;
  margin: auto;
  width: fit-content;
  padding-top: 25px;
  filter: drop-shadow(0px 0px 3px #fff);
}
@keyframes float {
  0% {
    top: -120px;
  }
  50% {
    top: -125px;
  }
  100% {
    top: -120px;
  }
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">Hey There!</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by MRez321  - Tags: tooltip, hover, transition */
.tooltip-container {
  --background: #7579e7;
  background: var(--background);
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  border-radius: 10px;
  width: 8em;

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

.tooltip {
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 5px;
  width: 7em;
  text-align: center;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.text {
  position: relative;
  padding: 0.7em 1.8em;
  overflow: hidden;
}

.text::before {
  content: "(^_^)/";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: inherit;
  background-color: var(--background);
  transition: 0.3s;
}

.tooltip-container:hover .text::before {
  top: 0;
}

</style>
    

<div class="tooltip-container">
  <div class="tooltip">
    <p>This is a test</p>
    <button>Got It</button>
    <div class="line"></div>
  </div>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by MohamedAboSeada  - Tags: simple, tooltip, animation, minimalist, hover, rounded, cube, modern */
.tooltip-container {
  position: relative;
  height: 50px;
  display: flex;
  background-color: darkgray;
  border-radius: 5px;
  box-shadow: 0 3px 0 rgb(0 0 0 / 80%);
  width: 200px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.tooltip {
  position: absolute;
  top: -110px;
  left: 50%;
  opacity: 0;
  transition: 300ms ease;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  display: flex;
  gap: 10px 0;
  cursor: auto;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  font-style: oblique;
  flex-direction: column;
  padding: 10px;
  width: 200px;
  animation: opacity;
  transform: translateX(-50%);
}
.tooltip button {
  outline: none;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
  align-self: flex-end;
  cursor: pointer;
}
.line {
  position: absolute;
  width: 3px;
  height: 25px;
  background-color: #000;
  top: 100%;
  left: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
}
.line::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}
.tooltip-container:hover > .tooltip {
  opacity: 1;
}
.tooltip-container:hover > .tooltip > .line {
  animation: HeightUP 400ms ease;
}
@keyframes HeightUP {
  0% {
    height: 0;
  }
  100% {
    height: 25px;
  }
}
@keyframes opcaityUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

</style>
    

<div class="tooltip-container">
  <div class="button-content">
    <span class="text">Share</span>
    <svg
      class="share-icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
    >
      <path
        d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
      ></path>
    </svg>
  </div>
  <div class="tooltip-content">
    <div class="social-icons">
      <a href="#" class="social-icon twitter">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
          ></path>
        </svg>
      </a>
      <a href="#" class="social-icon facebook">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
          ></path>
        </svg>
      </a>
      <a href="#" class="social-icon linkedin">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
          ></path>
        </svg>
      </a>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Mohammad-Rahme-576  - Tags: tooltip */
/* Container Styles */
.tooltip-container {
  position: relative;
  display: inline-block;
  font-family: "Arial", sans-serif;
  overflow: visible;
}

/* Button Styles */
.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s ease,
    box-shadow 0.4s ease;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.button-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(110, 142, 251, 0.4),
    rgba(167, 119, 227, 0.4)
  );
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.button-content::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: scale(0);
  transition: transform 0.6s ease-out;
  z-index: -1;
}

.button-content:hover::before {
  opacity: 1;
}

.button-content:hover::after {
  transform: scale(1);
}

.button-content:hover {
  background: linear-gradient(135deg, #a777e3, #6e8efb);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px) scale(1.03);
}

.button-content:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.text {
  font-size: 18px;
  font-weight: 600;
  margin-right: 12px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: letter-spacing 0.3s ease;
}

.button-content:hover .text {
  letter-spacing: 1px;
}

.share-icon {
  fill: white;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    fill 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.button-content:hover .share-icon {
  transform: rotate(180deg) scale(1.1);
  fill: #ffffff;
}

/* Tooltip Styles */
.tooltip-content {
  position: absolute;
  top: 102%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: white;
  border-radius: 15px;
  padding: 22px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    visibility 0.5s ease;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* Social Icons Styles */
.social-icons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f0f0f0;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    background 0.3s ease,
    box-shadow 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon:hover::before {
  opacity: 1;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  fill: #333;
  transition:
    transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    fill 0.3s ease;
  z-index: 1;
}

.social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.social-icon:active {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.social-icon:hover svg {
  transform: scale(1.2);
  fill: white;
}

.social-icon.twitter:hover {
  background: linear-gradient(135deg, #1da1f2, #1a91da);
}

.social-icon.facebook:hover {
  background: linear-gradient(135deg, #1877f2, #165ed0);
}

.social-icon.linkedin:hover {
  background: linear-gradient(135deg, #0077b5, #005e94);
}

/* Animation for Pulse Effect */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(110, 142, 251, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);
  }
}

.button-content {
  animation: pulse 3s infinite;
}

/* Hover Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.button-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: inherit;
  transform: scale(0);
  opacity: 0;
}

.button-content:active::before {
  animation: ripple 0.6s linear;
}

/* Tooltip Arrow */
.tooltip-content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));
}

/* Accessibility */
.button-content:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(110, 142, 251, 0.5),
    0 8px 15px rgba(0, 0, 0, 0.1);
}

.button-content:focus:not(:focus-visible) {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .button-content {
    padding: 12px 24px;
    border-radius: 40px;
  }

  .text {
    font-size: 16px;
  }

  .tooltip-content {
    width: 240px;
    padding: 18px;
  }

  .social-icon {
    width: 44px;
    height: 44px;
  }

  .social-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .button-content {
    padding: 10px 20px;
  }

  .text {
    font-size: 14px;
  }

  .tooltip-content {
    width: 200px;
    padding: 15px;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }

  .social-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .tooltip-content {
    background: rgba(30, 30, 30, 0.9);
    color: white;
  }

  .tooltip-content::before {
    border-color: transparent transparent rgba(30, 30, 30, 0.9) transparent;
  }

  .social-icon {
    background: #2a2a2a;
  }

  .social-icon svg {
    fill: #e0e0e0;
  }
}

/* Print Styles */
@media print {
  .tooltip-container {
    display: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .button-content,
  .share-icon,
  .social-icon,
  .tooltip-content {
    transition: none;
  }

  .button-content {
    animation: none;
  }
}

/* Custom Scrollbar for Tooltip Content */
.tooltip-content::-webkit-scrollbar {
  width: 6px;
}

.tooltip-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tooltip-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="80"
      zoomAndPan="magnify"
      viewBox="0 0 60 44.999999"
      height="60"
      preserveAspectRatio="xMidYMid meet"
      version="1.0"
    >
      <defs>
        <clipPath id="e2947948d6">
          <path
            d="M 2.25 6.75 L 57.75 6.75 C 58.992188 6.75 60 7.757812 60 9 L 60 42.75 C 60 43.992188 58.992188 45 57.75 45 L 2.25 45 C 1.007812 45 0 43.992188 0 42.75 L 0 9 C 0 7.757812 1.007812 6.75 2.25 6.75 Z M 2.25 6.75"
            clip-rule="nonzero"
          ></path>
        </clipPath>
      </defs>
      <g clip-path="url(#e2947948d6)">
        <path
          fill="#ff914d"
          d="M 0 6.75 L 60.0625 6.75 L 60.0625 45 L 0 45 Z M 0 6.75"
          fill-opacity="1"
          fill-rule="nonzero"
        ></path>
        <text x="15" y="30" fill="white" style="font-size:12px">hello</text>
      </g>
      <path
        fill="#ff914d"
        d="M 38.988281 12.292969 C 38.988281 11.898438 38.820312 11.449219 38.496094 10.988281 L 31.664062 0.996094 C 31.226562 0.351562 30.625 0 29.992188 0 C 29.363281 0 28.757812 0.351562 28.324219 0.996094 L 21.488281 10.972656 C 21.167969 11.4375 21.011719 11.898438 21.011719 12.292969 C 21.011719 13.035156 21.613281 13.5 22.613281 13.5 L 37.386719 13.5 C 38.386719 13.5 38.988281 13.035156 38.988281 12.292969 Z M 38.988281 12.292969"
        fill-opacity="1"
        fill-rule="nonzero"
      ></path>
    </svg>
  </span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Pipo-13  - Tags: simple, tooltip, svg */
.tooltip-container {
  --background: #d87639;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 0.2rem;
}

.tooltip {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%) rotateX(90deg);
  padding: 0.6em;
  opacity: 0.6;
  transition: all 0.5s ease;
  background: transparent;
  height: 0px;
  cursor: default;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  background: none;
  transform: translateX(-50%) rotateX(0deg);
}

</style>
    

<ul class="example-2">
  <li class="icon-content">
    <a
      data-social="spotify"
      aria-label="Spotify"
      href="https://www.spotify.com/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M50,4C24.7,4,4,24.7,4,50s20.6,46,46,46s46-20.6,46-46S75.4,4,50,4z M71.6,71.5c0,0,0,0.1-0.1,0.1c-0.8,1.2-2,1.8-3.2,1.8  c-0.7,0-1.4-0.2-2-0.6c-10.2-6.3-23.3-7.7-38.8-4.1c-2.1,0.6-4-0.9-4.5-2.7c-0.6-2.3,0.9-4.1,2.7-4.6c17.7-4,32.6-2.3,44.4,5  c0.9,0.4,1.5,1,1.8,1.9C72.2,69.3,72.1,70.5,71.6,71.5z M76.9,59.3L76.9,59.3c-0.8,1.1-1.9,1.9-3.2,2.1c-0.2,0-0.5,0.1-0.7,0.1  c-0.8,0-1.6-0.3-2.3-0.7c-12-7.3-30.1-9.4-43.9-5c-2.5,0.6-5-0.7-5.6-3c-0.6-2.5,0.7-4.9,3-5.5c16.5-5,37.2-2.5,51.4,6.2  c0.8,0.4,1.5,1.3,1.8,2.5C77.9,57,77.6,58.3,76.9,59.3z M83.2,45.6c-1,1.4-2.7,2.1-4.4,2.1c-0.9,0-1.9-0.2-2.7-0.7c0,0,0,0,0,0  c-13.9-8.3-37.8-9.3-51.4-5.1c-2.7,0.8-5.5-0.7-6.4-3.3c-0.8-2.7,0.7-5.6,3.3-6.4c16.2-4.8,43-3.8,59.8,6.2  C83.8,39.6,84.7,42.9,83.2,45.6C83.3,45.5,83.3,45.5,83.2,45.6z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Spotify</div>
  </li>
  <li class="icon-content">
    <a
      data-social="pinterest"
      aria-label="Pinterest"
      href="https://www.pinterest.com/"
    >
      <div class="filled"></div>
      <svg xml:space="preserve" viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M83,17.8C74.5,8.9,63.4,4.3,50,4.1C37.7,4.2,26.8,8.6,17.9,17.3C8.9,26,4.3,37,4.1,50c0,0,0,0,0,0c0,9.1,2.5,17.4,7.4,24.9  c4.9,7.4,11.6,13.2,20.1,17.1c0.3,0.1,0.7,0.1,1-0.1c0.3-0.2,0.5-0.5,0.5-0.8l0-4.9c0.1-2.1,0.7-5.3,1.7-9.5c1-4,1.7-6.7,1.9-7.6  c0.7-3,1.7-7.2,3-12.6c0.1-0.2,0-0.5-0.1-0.7c-0.4-0.8-1-2.6-1.5-6.6c0.1-2.7,0.8-5.2,2.1-7.3c1.2-2,3.1-3.1,5.7-3.5  c2,0.1,4.7,0.8,5.1,5.9c-0.1,1.8-0.8,4.5-1.9,8.1c-1.2,3.8-1.9,6.3-2.1,7.6c-0.7,2.5-0.2,4.8,1.5,6.8c1.6,1.9,3.8,2.9,6.5,3.1  c4.3-0.1,8.1-2.6,11.2-7.5c1.7-3,2.9-6.3,3.5-9.7c0.7-3.4,0.7-7.1,0-10.8c-0.7-3.8-2.2-7.1-4.5-9.8c0,0-0.1-0.1-0.1-0.1  c-4.3-3.7-9.5-5.3-15.6-5c-6,0.4-11.3,2.6-15.9,6.6c-2.9,3.2-4.8,7.1-5.7,11.6c-0.9,4.6,0,9.1,2.6,13.3c0.3,0.5,0.5,0.8,0.6,1  c0,0.3,0,1-0.5,2.8c-0.5,1.8-0.9,2.2-0.9,2.2c0,0-0.1,0-0.1,0.1c0,0-0.2,0-0.4-0.1c-2.2-1-3.9-2.4-5.2-4.2c-1.3-1.9-2.1-4-2.5-6.3  c-0.3-2.5-0.4-5-0.3-7.5c0.2-2.5,0.7-5.1,1.4-7.7c3-6.9,8.5-11.9,16.3-14.8c7.8-2.9,16-3.2,24.3-0.8c6.5,2.8,11,7.4,13.6,13.7  c2.5,6.4,2.8,13.4,0.8,20.8c-2.2,7.1-6.4,12.4-12.1,15.7c-5.6,2.8-10.8,3-15.7,0.7c-1.8-1.1-3.1-2.3-3.9-3.5c-0.2-0.3-0.6-0.5-1-0.5  c-0.4,0.1-0.7,0.3-0.8,0.7c-0.7,2.7-1.3,4.7-1.6,6.2c-1.4,5.4-2.6,9.2-3.4,11c-0.8,1.6-1.6,3.1-2.4,4.3c-0.2,0.3-0.2,0.6-0.1,0.9  s0.3,0.5,0.6,0.6c4.3,1.3,8.7,2,13,2c12.4-0.1,23.2-4.6,32.1-13.4C91.1,73.9,95.8,62.9,96,50C95.9,37.5,91.5,26.7,83,17.8z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Pinterest</div>
  </li>
  <li class="icon-content">
    <a
      data-social="dribbble"
      aria-label="Dribbble"
      href="https://dribbble.com/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M83.5,18.5C74.9,9.3,62.8,4,50.2,4c-6.1,0-12,1.1-17.6,3.4C15.2,14.5,4,31.3,4,50c0,13.9,6.2,26.9,17,35.7  C29.2,92.3,39.4,96,50,96c6.6,0,13.2-1.5,19.2-4.2c12.5-5.7,21.7-16.6,25.2-29.8C95.5,57.9,96,53.8,96,50  C96,38.3,91.6,27.1,83.5,18.5z M75,22.3c-0.7,0.9-1.4,1.8-2.1,2.6c-1.4,1.6-2.8,3-4.4,4.3c-0.3,0.3-0.6,0.6-1,0.8  c-1,0.9-2.1,1.7-3.2,2.5l-0.3,0.2c-1.1,0.7-2.2,1.5-3.5,2.2c-0.4,0.3-0.9,0.5-1.4,0.8c-0.8,0.5-1.7,0.9-2.7,1.4  c-0.6,0.3-1.2,0.5-1.8,0.8L54.3,38c-0.1,0-0.2,0.1-0.3,0.1c0,0,0,0,0,0c-1.3-2.6-2.4-4.9-3.5-7l-0.3-0.5c-1.1-2-2.2-4-3.3-6  l-0.7-1.3c-1.1-1.9-2.2-3.7-3.2-5.4l-0.7-1.1c-0.7-1.2-1.4-2.3-2.2-3.5c3.2-0.8,6.5-1.3,9.8-1.3c9.4,0,18.4,3.5,25.4,9.8  C75.3,21.9,75.2,22.1,75,22.3z M46.4,40.6c-1.4,0.4-2.9,0.8-4.4,1.1c-0.3,0-0.7,0.1-0.9,0.2c-6,1-12.5,1.4-19.4,1.1  c-0.3,0-0.6,0-0.9,0c-0.3,0-0.5,0-0.7,0c-2.5-0.2-4.9-0.4-7.2-0.7c2.3-11.2,9.6-20.9,19.8-26.1c2.1,3.3,4.2,6.7,6.3,10.3l0.4,0.7  c0.9,1.6,1.9,3.4,3.2,5.8l0.6,1.2C44.4,36.6,45.4,38.6,46.4,40.6z M24.4,51.1c2.2,0.1,4.2,0,6.2-0.1l0.7,0c0.4,0,0.9,0,1.3,0  c2.8-0.2,5.5-0.5,8.5-1c0.5-0.1,1-0.2,1.6-0.3l0.5-0.1c2.2-0.4,4.2-0.9,6.1-1.4c0.1,0,0.3-0.1,0.4-0.1l0.5,1.1  c1.2,2.8,2.3,5.5,3.3,8.1c0,0,0,0,0,0c-0.2,0.1-0.5,0.2-0.7,0.2c-2,0.6-4,1.4-5.9,2.2c-0.6,0.3-1.3,0.5-1.9,0.8  c-1.4,0.6-2.7,1.3-4.1,2.1l-0.3,0.2c-0.2,0.1-0.5,0.2-0.6,0.4c-1.5,0.9-3.1,1.9-4.7,3c-0.2,0.1-0.4,0.3-0.6,0.4  c-0.2,0.1-0.4,0.3-0.6,0.5c-1,0.7-2,1.5-3,2.3c-0.4,0.3-0.7,0.6-1.1,0.9l-0.3,0.3c-0.7,0.6-1.5,1.3-2.2,1.9l-0.2,0.2  c-0.4,0.4-0.7,0.7-1.1,1.1l-0.2,0.2c-0.6,0.6-1.3,1.3-2,2l-0.4,0.4c-0.2,0.2-0.4,0.4-0.5,0.6C16.1,69.9,12,60.2,12,50.3  c0,0,0.1,0,0.1,0c0.4,0,0.7,0,1.1,0.1c3.5,0.4,6.9,0.6,10.3,0.7C23.8,51,24.1,51.1,24.4,51.1z M29.5,81.9c0.2-0.2,0.3-0.4,0.5-0.5  c1-1.1,2-2.1,3-3c1.9-1.8,3.8-3.3,5.7-4.8c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.2,0.5-0.4,0.8-0.6c1.1-0.8,2.2-1.5,3.4-2.2  c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2c1.4-0.8,2.9-1.6,4.5-2.3c0.3-0.1,0.6-0.2,0.8-0.4l0.6-0.3  c1.1-0.5,2.2-0.9,3.5-1.4c0.5-0.2,1.1-0.4,1.7-0.6l0.2-0.1c0.4-0.1,0.7-0.2,1.1-0.3c0,0,0,0,0,0c1.1,3.2,2.3,6.4,3.3,9.8l0.1,0.4  c1.1,3.6,2,7.3,2.9,10.8C51.7,89.8,39.3,88.3,29.5,81.9C29.4,81.9,29.4,81.9,29.5,81.9z M65.6,62.9c0.7-0.1,1.3-0.2,2-0.2  c2-0.2,4-0.2,5.9-0.2c0.2,0,0.4,0,0.6,0l0.2,0c2.2,0.1,4.6,0.3,6.9,0.6c0.4,0.1,0.9,0.1,1.3,0.2l0.6,0.1c0.7,0.1,1.5,0.3,2.2,0.4  c-3,7.6-8.3,14-15.2,18.3c-0.8-3.1-1.7-6.2-2.6-9.2l-0.1-0.4c-0.9-3-1.9-6.1-3.1-9.5C64.8,63.1,65.2,63,65.6,62.9z M81.6,55.2  C80,55,78.4,54.9,77,54.8l-0.9-0.1c-0.9-0.1-1.9-0.1-2.8-0.2c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.6,0c-2,0-3.9,0.1-5.9,0.3  c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2,0-0.3,0c-1.3,0.1-2.6,0.3-3.9,0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.5-0.3-0.7  c-1.1-2.9-2.3-5.7-3.2-7.8l-0.3-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c0,0,0,0,0.1,0c0.2-0.1,0.5-0.2,0.7-0.3c0.6-0.2,1.2-0.5,1.8-0.8  c1.2-0.5,2.4-1.2,3.6-1.8c0.1-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.5-0.2,0.7-0.4c1.5-0.9,2.9-1.8,4.2-2.7l0.3-0.2  c0.2-0.1,0.4-0.3,0.6-0.4c0.9-0.6,1.9-1.4,2.8-2.2c1.5-1.2,2.9-2.5,4.3-4c0.8-0.8,1.5-1.6,2.2-2.4l0.4-0.5c0.5-0.5,0.9-1.1,1.3-1.6  C85.5,34.3,88,42.1,88,50c0,2-0.2,4.1-0.5,6.1c-0.3,0-0.6-0.1-0.8-0.1c-0.4-0.1-0.7-0.1-1.1-0.2l-1.1-0.2  C83.5,55.5,82.5,55.3,81.6,55.2z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Dribbble</div>
  </li>
  <li class="icon-content">
    <a
      data-social="telegram"
      aria-label="Telegram"
      href="https://telegram.org/"
    >
      <div class="filled"></div>
      <svg viewBox="0 0 100 100" version="1.1">
        <path
          fill="currentColor"
          d="M95,9.9c-1.3-1.1-3.4-1.2-7-0.1c0,0,0,0,0,0c-2.5,0.8-24.7,9.2-44.3,17.3c-17.6,7.3-31.9,13.7-33.6,14.5  c-1.9,0.6-6,2.4-6.2,5.2c-0.1,1.8,1.4,3.4,4.3,4.7c3.1,1.6,16.8,6.2,19.7,7.1c1,3.4,6.9,23.3,7.2,24.5c0.4,1.8,1.6,2.8,2.2,3.2  c0.1,0.1,0.3,0.3,0.5,0.4c0.3,0.2,0.7,0.3,1.2,0.3c0.7,0,1.5-0.3,2.2-0.8c3.7-3,10.1-9.7,11.9-11.6c7.9,6.2,16.5,13.1,17.3,13.9  c0,0,0.1,0.1,0.1,0.1c1.9,1.6,3.9,2.5,5.7,2.5c0.6,0,1.2-0.1,1.8-0.3c2.1-0.7,3.6-2.7,4.1-5.4c0-0.1,0.1-0.5,0.3-1.2  c3.4-14.8,6.1-27.8,8.3-38.7c2.1-10.7,3.8-21.2,4.8-26.8c0.2-1.4,0.4-2.5,0.5-3.2C96.3,13.5,96.5,11.2,95,9.9z M30,58.3l47.7-31.6  c0.1-0.1,0.3-0.2,0.4-0.3c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2-0.1c-0.1,0.1-0.2,0.4-0.4,0.6L66,38.1  c-8.4,7.7-19.4,17.8-26.7,24.4c0,0,0,0,0,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1-0.1,0.2c0,0,0,0.1,0,0.1  c0,0,0,0,0,0.1c-0.5,5.6-1.4,15.2-1.8,19.5c0,0,0,0,0-0.1C36.8,81.4,31.2,62.3,30,58.3z"
        ></path>
      </svg>
    </a>
    <div class="tooltip">Telegram</div>
  </li>
</ul>

<style>
/* From Uiverse.io by PriyanshuGupta28  - Tags: tooltip, animation, minimalist, spotify, hover effect, telegram, pintrest */
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}
.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
  background-color: #1db954;
}
.example-2 .icon-content a[data-social="pinterest"] .filled,
.example-2 .icon-content a[data-social="pinterest"] ~ .tooltip {
  background-color: #bd081c;
}
.example-2 .icon-content a[data-social="dribbble"] .filled,
.example-2 .icon-content a[data-social="dribbble"] ~ .tooltip {
  background-color: #ea4c89;
}
.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
  background-color: #0088cc;
}

</style>
    

<main>
  <ul class="example-1">
    <li class="icon-content">
      <a
        class="link"
        data-social="spotify"
        aria-label="Spotify"
        href="https://www.spotify.com/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M50,4C24.7,4,4,24.7,4,50s20.6,46,46,46s46-20.6,46-46S75.4,4,50,4z M71.6,71.5c0,0,0,0.1-0.1,0.1c-0.8,1.2-2,1.8-3.2,1.8  c-0.7,0-1.4-0.2-2-0.6c-10.2-6.3-23.3-7.7-38.8-4.1c-2.1,0.6-4-0.9-4.5-2.7c-0.6-2.3,0.9-4.1,2.7-4.6c17.7-4,32.6-2.3,44.4,5  c0.9,0.4,1.5,1,1.8,1.9C72.2,69.3,72.1,70.5,71.6,71.5z M76.9,59.3L76.9,59.3c-0.8,1.1-1.9,1.9-3.2,2.1c-0.2,0-0.5,0.1-0.7,0.1  c-0.8,0-1.6-0.3-2.3-0.7c-12-7.3-30.1-9.4-43.9-5c-2.5,0.6-5-0.7-5.6-3c-0.6-2.5,0.7-4.9,3-5.5c16.5-5,37.2-2.5,51.4,6.2  c0.8,0.4,1.5,1.3,1.8,2.5C77.9,57,77.6,58.3,76.9,59.3z M83.2,45.6c-1,1.4-2.7,2.1-4.4,2.1c-0.9,0-1.9-0.2-2.7-0.7c0,0,0,0,0,0  c-13.9-8.3-37.8-9.3-51.4-5.1c-2.7,0.8-5.5-0.7-6.4-3.3c-0.8-2.7,0.7-5.6,3.3-6.4c16.2-4.8,43-3.8,59.8,6.2  C83.8,39.6,84.7,42.9,83.2,45.6C83.3,45.5,83.3,45.5,83.2,45.6z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Spotify</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="pinterest"
        aria-label="Pinterest"
        href="https://www.pinterest.com/"
      >
        <svg xml:space="preserve" viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M83,17.8C74.5,8.9,63.4,4.3,50,4.1C37.7,4.2,26.8,8.6,17.9,17.3C8.9,26,4.3,37,4.1,50c0,0,0,0,0,0c0,9.1,2.5,17.4,7.4,24.9  c4.9,7.4,11.6,13.2,20.1,17.1c0.3,0.1,0.7,0.1,1-0.1c0.3-0.2,0.5-0.5,0.5-0.8l0-4.9c0.1-2.1,0.7-5.3,1.7-9.5c1-4,1.7-6.7,1.9-7.6  c0.7-3,1.7-7.2,3-12.6c0.1-0.2,0-0.5-0.1-0.7c-0.4-0.8-1-2.6-1.5-6.6c0.1-2.7,0.8-5.2,2.1-7.3c1.2-2,3.1-3.1,5.7-3.5  c2,0.1,4.7,0.8,5.1,5.9c-0.1,1.8-0.8,4.5-1.9,8.1c-1.2,3.8-1.9,6.3-2.1,7.6c-0.7,2.5-0.2,4.8,1.5,6.8c1.6,1.9,3.8,2.9,6.5,3.1  c4.3-0.1,8.1-2.6,11.2-7.5c1.7-3,2.9-6.3,3.5-9.7c0.7-3.4,0.7-7.1,0-10.8c-0.7-3.8-2.2-7.1-4.5-9.8c0,0-0.1-0.1-0.1-0.1  c-4.3-3.7-9.5-5.3-15.6-5c-6,0.4-11.3,2.6-15.9,6.6c-2.9,3.2-4.8,7.1-5.7,11.6c-0.9,4.6,0,9.1,2.6,13.3c0.3,0.5,0.5,0.8,0.6,1  c0,0.3,0,1-0.5,2.8c-0.5,1.8-0.9,2.2-0.9,2.2c0,0-0.1,0-0.1,0.1c0,0-0.2,0-0.4-0.1c-2.2-1-3.9-2.4-5.2-4.2c-1.3-1.9-2.1-4-2.5-6.3  c-0.3-2.5-0.4-5-0.3-7.5c0.2-2.5,0.7-5.1,1.4-7.7c3-6.9,8.5-11.9,16.3-14.8c7.8-2.9,16-3.2,24.3-0.8c6.5,2.8,11,7.4,13.6,13.7  c2.5,6.4,2.8,13.4,0.8,20.8c-2.2,7.1-6.4,12.4-12.1,15.7c-5.6,2.8-10.8,3-15.7,0.7c-1.8-1.1-3.1-2.3-3.9-3.5c-0.2-0.3-0.6-0.5-1-0.5  c-0.4,0.1-0.7,0.3-0.8,0.7c-0.7,2.7-1.3,4.7-1.6,6.2c-1.4,5.4-2.6,9.2-3.4,11c-0.8,1.6-1.6,3.1-2.4,4.3c-0.2,0.3-0.2,0.6-0.1,0.9  s0.3,0.5,0.6,0.6c4.3,1.3,8.7,2,13,2c12.4-0.1,23.2-4.6,32.1-13.4C91.1,73.9,95.8,62.9,96,50C95.9,37.5,91.5,26.7,83,17.8z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Pinterest</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="dribbble"
        aria-label="Dribbble"
        href="https://dribbble.com/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M83.5,18.5C74.9,9.3,62.8,4,50.2,4c-6.1,0-12,1.1-17.6,3.4C15.2,14.5,4,31.3,4,50c0,13.9,6.2,26.9,17,35.7  C29.2,92.3,39.4,96,50,96c6.6,0,13.2-1.5,19.2-4.2c12.5-5.7,21.7-16.6,25.2-29.8C95.5,57.9,96,53.8,96,50  C96,38.3,91.6,27.1,83.5,18.5z M75,22.3c-0.7,0.9-1.4,1.8-2.1,2.6c-1.4,1.6-2.8,3-4.4,4.3c-0.3,0.3-0.6,0.6-1,0.8  c-1,0.9-2.1,1.7-3.2,2.5l-0.3,0.2c-1.1,0.7-2.2,1.5-3.5,2.2c-0.4,0.3-0.9,0.5-1.4,0.8c-0.8,0.5-1.7,0.9-2.7,1.4  c-0.6,0.3-1.2,0.5-1.8,0.8L54.3,38c-0.1,0-0.2,0.1-0.3,0.1c0,0,0,0,0,0c-1.3-2.6-2.4-4.9-3.5-7l-0.3-0.5c-1.1-2-2.2-4-3.3-6  l-0.7-1.3c-1.1-1.9-2.2-3.7-3.2-5.4l-0.7-1.1c-0.7-1.2-1.4-2.3-2.2-3.5c3.2-0.8,6.5-1.3,9.8-1.3c9.4,0,18.4,3.5,25.4,9.8  C75.3,21.9,75.2,22.1,75,22.3z M46.4,40.6c-1.4,0.4-2.9,0.8-4.4,1.1c-0.3,0-0.7,0.1-0.9,0.2c-6,1-12.5,1.4-19.4,1.1  c-0.3,0-0.6,0-0.9,0c-0.3,0-0.5,0-0.7,0c-2.5-0.2-4.9-0.4-7.2-0.7c2.3-11.2,9.6-20.9,19.8-26.1c2.1,3.3,4.2,6.7,6.3,10.3l0.4,0.7  c0.9,1.6,1.9,3.4,3.2,5.8l0.6,1.2C44.4,36.6,45.4,38.6,46.4,40.6z M24.4,51.1c2.2,0.1,4.2,0,6.2-0.1l0.7,0c0.4,0,0.9,0,1.3,0  c2.8-0.2,5.5-0.5,8.5-1c0.5-0.1,1-0.2,1.6-0.3l0.5-0.1c2.2-0.4,4.2-0.9,6.1-1.4c0.1,0,0.3-0.1,0.4-0.1l0.5,1.1  c1.2,2.8,2.3,5.5,3.3,8.1c0,0,0,0,0,0c-0.2,0.1-0.5,0.2-0.7,0.2c-2,0.6-4,1.4-5.9,2.2c-0.6,0.3-1.3,0.5-1.9,0.8  c-1.4,0.6-2.7,1.3-4.1,2.1l-0.3,0.2c-0.2,0.1-0.5,0.2-0.6,0.4c-1.5,0.9-3.1,1.9-4.7,3c-0.2,0.1-0.4,0.3-0.6,0.4  c-0.2,0.1-0.4,0.3-0.6,0.5c-1,0.7-2,1.5-3,2.3c-0.4,0.3-0.7,0.6-1.1,0.9l-0.3,0.3c-0.7,0.6-1.5,1.3-2.2,1.9l-0.2,0.2  c-0.4,0.4-0.7,0.7-1.1,1.1l-0.2,0.2c-0.6,0.6-1.3,1.3-2,2l-0.4,0.4c-0.2,0.2-0.4,0.4-0.5,0.6C16.1,69.9,12,60.2,12,50.3  c0,0,0.1,0,0.1,0c0.4,0,0.7,0,1.1,0.1c3.5,0.4,6.9,0.6,10.3,0.7C23.8,51,24.1,51.1,24.4,51.1z M29.5,81.9c0.2-0.2,0.3-0.4,0.5-0.5  c1-1.1,2-2.1,3-3c1.9-1.8,3.8-3.3,5.7-4.8c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.2,0.5-0.4,0.8-0.6c1.1-0.8,2.2-1.5,3.4-2.2  c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2c1.4-0.8,2.9-1.6,4.5-2.3c0.3-0.1,0.6-0.2,0.8-0.4l0.6-0.3  c1.1-0.5,2.2-0.9,3.5-1.4c0.5-0.2,1.1-0.4,1.7-0.6l0.2-0.1c0.4-0.1,0.7-0.2,1.1-0.3c0,0,0,0,0,0c1.1,3.2,2.3,6.4,3.3,9.8l0.1,0.4  c1.1,3.6,2,7.3,2.9,10.8C51.7,89.8,39.3,88.3,29.5,81.9C29.4,81.9,29.4,81.9,29.5,81.9z M65.6,62.9c0.7-0.1,1.3-0.2,2-0.2  c2-0.2,4-0.2,5.9-0.2c0.2,0,0.4,0,0.6,0l0.2,0c2.2,0.1,4.6,0.3,6.9,0.6c0.4,0.1,0.9,0.1,1.3,0.2l0.6,0.1c0.7,0.1,1.5,0.3,2.2,0.4  c-3,7.6-8.3,14-15.2,18.3c-0.8-3.1-1.7-6.2-2.6-9.2l-0.1-0.4c-0.9-3-1.9-6.1-3.1-9.5C64.8,63.1,65.2,63,65.6,62.9z M81.6,55.2  C80,55,78.4,54.9,77,54.8l-0.9-0.1c-0.9-0.1-1.9-0.1-2.8-0.2c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.6,0c-2,0-3.9,0.1-5.9,0.3  c-0.2,0-0.3,0-0.5,0.1c-0.1,0-0.2,0-0.3,0c-1.3,0.1-2.6,0.3-3.9,0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.5-0.3-0.7  c-1.1-2.9-2.3-5.7-3.2-7.8l-0.3-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c0,0,0,0,0.1,0c0.2-0.1,0.5-0.2,0.7-0.3c0.6-0.2,1.2-0.5,1.8-0.8  c1.2-0.5,2.4-1.2,3.6-1.8c0.1-0.1,0.3-0.2,0.5-0.2c0.2-0.1,0.5-0.2,0.7-0.4c1.5-0.9,2.9-1.8,4.2-2.7l0.3-0.2  c0.2-0.1,0.4-0.3,0.6-0.4c0.9-0.6,1.9-1.4,2.8-2.2c1.5-1.2,2.9-2.5,4.3-4c0.8-0.8,1.5-1.6,2.2-2.4l0.4-0.5c0.5-0.5,0.9-1.1,1.3-1.6  C85.5,34.3,88,42.1,88,50c0,2-0.2,4.1-0.5,6.1c-0.3,0-0.6-0.1-0.8-0.1c-0.4-0.1-0.7-0.1-1.1-0.2l-1.1-0.2  C83.5,55.5,82.5,55.3,81.6,55.2z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Dribbble</div>
    </li>
    <li class="icon-content">
      <a
        class="link"
        data-social="telegram"
        aria-label="Telegram"
        href="https://telegram.org/"
      >
        <svg viewBox="0 0 100 100" version="1.1">
          <path
            fill="currentColor"
            d="M95,9.9c-1.3-1.1-3.4-1.2-7-0.1c0,0,0,0,0,0c-2.5,0.8-24.7,9.2-44.3,17.3c-17.6,7.3-31.9,13.7-33.6,14.5  c-1.9,0.6-6,2.4-6.2,5.2c-0.1,1.8,1.4,3.4,4.3,4.7c3.1,1.6,16.8,6.2,19.7,7.1c1,3.4,6.9,23.3,7.2,24.5c0.4,1.8,1.6,2.8,2.2,3.2  c0.1,0.1,0.3,0.3,0.5,0.4c0.3,0.2,0.7,0.3,1.2,0.3c0.7,0,1.5-0.3,2.2-0.8c3.7-3,10.1-9.7,11.9-11.6c7.9,6.2,16.5,13.1,17.3,13.9  c0,0,0.1,0.1,0.1,0.1c1.9,1.6,3.9,2.5,5.7,2.5c0.6,0,1.2-0.1,1.8-0.3c2.1-0.7,3.6-2.7,4.1-5.4c0-0.1,0.1-0.5,0.3-1.2  c3.4-14.8,6.1-27.8,8.3-38.7c2.1-10.7,3.8-21.2,4.8-26.8c0.2-1.4,0.4-2.5,0.5-3.2C96.3,13.5,96.5,11.2,95,9.9z M30,58.3l47.7-31.6  c0.1-0.1,0.3-0.2,0.4-0.3c0,0,0,0,0,0c0.1,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2-0.1c-0.1,0.1-0.2,0.4-0.4,0.6L66,38.1  c-8.4,7.7-19.4,17.8-26.7,24.4c0,0,0,0,0,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0.1,0,0.1-0.1,0.2c0,0,0,0.1,0,0.1  c0,0,0,0,0,0.1c-0.5,5.6-1.4,15.2-1.8,19.5c0,0,0,0,0-0.1C36.8,81.4,31.2,62.3,30,58.3z"
          ></path>
        </svg>
      </a>
      <div class="tooltip">Telegram</div>
    </li>
  </ul>
</main>

<style>
/* From Uiverse.io by PriyanshuGupta28  - Tags: tooltip, 3d tooltip, cool tooltip */
ul {
  list-style: none;
}

.example-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-1 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-1 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-1 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-1 .icon-content .link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-1 .icon-content .link:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-1 .icon-content .link svg {
  width: 30px;
  height: 30px;
}
.example-1 .icon-content .link[data-social="spotify"]:hover {
  color: #1db954;
}
.example-1 .icon-content .link[data-social="pinterest"]:hover {
  color: #bd081c;
}
.example-1 .icon-content .link[data-social="dribbble"]:hover {
  color: #ea4c89;
}
.example-1 .icon-content .link[data-social="telegram"]:hover {
  color: #0088cc;
}

</style>
    

<div class="container">
  <span class="hover-me">Hover me !</span>
  <div class="tooltip">
    <p>Heyy👋</p>
  </div>
</div>

<style>
/* From Uiverse.io by Quezaquo  - Tags: simple, tooltip, transition */
.container {
  font-size: 18px;
  color: #333;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.hover-me {
  position: relative;
  z-index: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #333;
}

.tooltip {
  width: 100%;
  height: 10px;
  background: #ffffff;
  padding: 0.25em;
  text-align: center;
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: center top;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  transition: opacity 0.3s ease-in-out;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 80%;
  transform: translateX(-50%);
  border-width: 8px 7px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}

.tooltip p {
  margin: 0;
  color: #333;
  font-weight: 600;
}

.container:hover .tooltip {
  top: -10px;
  opacity: 1;
  visibility: visible;
  animation: goPopup 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.container:hover .tooltip p {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes goPopup {
  0% {
    transform: translateY(0) scaleY(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) scaleY(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%) scaleY(1);
    border-radius: 8px;
    opacity: 1;
    height: 40px;
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

</style>
    

<div class="tooltip">
  <span>Hover me</span>
  <div class="tooltip-text">
    Ceci est un tooltip moderne et animé avec des bulles autour.
  </div>
  <div class="tooltip-bubble"></div>
  <div class="tooltip-bubble"></div>
  <div class="tooltip-bubble"></div>
</div>

<style>
/* From Uiverse.io by Sacha-PDV  - Tags: simple, tooltip, circle */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -60px);
}
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3498db transparent transparent transparent;
}
.tooltip:hover .tooltip-bubble {
  display: block;
}
.tooltip-bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  display: none;
}
.tooltip-bubble:nth-child(3) {
  bottom: 170px;
  left: 43%;
}
.tooltip-bubble:nth-child(4) {
  bottom: 170px;
  left: 90%;
}
.tooltip-bubble:nth-child(5) {
  bottom: 170px;
  left: -10%;
}
.tooltip span {
  display: inline-block;
  padding: 5px 10px;
  background: #3498db;
  color: #fff;
  border-radius: 4px;
  transition: background 0.3s;
}
.tooltip:hover span {
  background: #ff6b6b;
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">
    <span>
      <svg
        class="tooltip-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <defs>
          <linearGradient y2="1" x2="0" id="gradient">
            <stop stop-color="#96a1e8" offset="0%"></stop>
            <stop stop-color="#5061be" offset="100%"></stop>
          </linearGradient>
        </defs>
        <path
          d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
          fill="url(#gradient)"
        ></path>
      </svg>
    </span>
    <span class="tooltip-lines">
      <span class="tooltip-line-1"></span>
      <span class="tooltip-line-2"></span>
    </span>
  </span>
  <span class="text">
    <span class="tooltip-lines">
      <span class="tooltip-line-1"></span>
      <span class="tooltip-line-2"></span>
    </span>
  </span>
</div>

<style>
/* From Uiverse.io by SelfMadeSystem  - Tags: tooltip, 3d, border */
/* This is very original.
I'm also too lazy to figure out how to add the arrow
without excessive SVG. I know I'm not going to win, so
why not just try to emulate the thing in the image */
.tooltip-container {
  --background: #fefbff;
  --inner-shadow: #9faef9;
  --inner-outline: #34217d;
  --inner-outline-bottom: #fafcfe;
  --inner-outline-middle: #8880d5;
  --inner-outline-outer-top: #fefcff;
  --inner-outline-outer-bottom-1: #29107b;
  --inner-outline-outer-bottom-2: #5b42c4;
  --inner-outline-outer-bottom-3: #200265;
  --line-1: #8676c9;
  --line-2: #5c69ca;
  position: relative;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  border-radius: 5px;
  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
    0px 2px 0px 0px var(--inner-outline-bottom),
    0px -2px 0px 0px var(--inner-outline),
    -2px -2px 0px 0px var(--inner-outline),
    2px -2px 0px 0px var(--inner-outline),
    0px 0px 0px 6px var(--inner-outline-middle),
    0px -2px 0px 7px var(--inner-outline-outer-top),
    0px 4px 0px 7px var(--inner-outline-outer-bottom-1);
}

.tooltip-icon {
  display: inline-block;
  vertical-align: top;
  width: 1.5em;
}

.tooltip-icon path {
  stroke-width: 2px;
  stroke: var(--inner-outline);
  stroke-linejoin: round;
}

.tooltip-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.tooltip-line-1 {
  height: 0.2em;
  width: 4em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-1);
}

.tooltip-line-2 {
  height: 0.2em;
  width: 3em;
  border-radius: 10em;
  display: inline-block;
  background: var(--line-2);
}

.tooltip {
  position: absolute;
  display: flex;
  gap: 0.4em;
  align-items: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6em 0.8em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: var(--background);
  border-radius: 0.7em;

  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
    0px 2px 0px 0px var(--inner-outline-bottom),
    0px -2px 0px 0px var(--inner-outline),
    -2px -2px 0px 0px var(--inner-outline),
    2px -2px 0px 0px var(--inner-outline),
    0px 0px 0px 6px var(--inner-outline-middle),
    0px -2px 0px 7px var(--inner-outline-outer-top),
    0px 4px 0px 7px var(--inner-outline-outer-bottom-1),
    0px 7px 0px 7px var(--inner-outline-outer-bottom-2),
    0px 10px 0px 7px var(--inner-outline-outer-bottom-3);
}

/* .tooltip::before {
  content: "";
  position: absolute;
  height: 1em;
  width: 1em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) translateY(2px) rotate(45deg);
  background: var(--background);
  border-radius: 0.2em;
} */

.tooltip-container:hover .tooltip {
  top: -4.5em;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

</style>
    

<div class="tooltip-container">
  <span class="tooltip">Uiverse.io</span>
  <span class="text">Tooltip</span>
</div>

<style>
/* From Uiverse.io by Siyu1017  - Tags: tooltip */
.tooltip-container {
  position: relative;
  transition: all 0.2s;
  font-size: 17px;
  padding: 1rem 0;
  width: fit-content;
  box-sizing: border-box;
  --bg: linear-gradient(135deg, #a940fd, #5b46e8);
  --color: #fff;
  --tooltip-bg: #303030;
  --tooltip-color: #fff;
  --margin: 0.5rem;
}

.text {
  z-index: 9;
  background: var(--bg);
  color: var(--color);
  padding: 0.7em 1.8em;
  border-radius: 0.75rem;
  height: fit-content;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.15);
}

.tooltip {
  position: absolute;
  top: calc(-1 * var(--margin));
  left: 50%;
  transform: translateX(-50%) translateY(0%) scale(0);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: 0.5rem;
  z-index: 99999;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--tooltip-bg);
  border-bottom-right-radius: 0.175rem;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-100%) scale(1);
}

</style>
    

<div class="orwellian-container">
  <div class="orwellian-loader">
    <div class="eye">
      <div class="pupil"></div>
      <div class="eyelid"></div>
    </div>
    <div class="spotlight"></div>
    <div class="text">BIG BROTHER IS LOADING</div>
    <div class="scan-lines"></div>
    <div class="tv-effect"></div>
  </div>
</div>

<style>
/* From Uiverse.io by 0xnihilism  - Tags: loading, loader, animated, light&dark, brutalism, orwellian */
.orwellian-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
}
.orwellian-container .orwellian-loader {
  width: 280px;
  height: 280px;
  background-color: #000;
  border: 10px solid #333;
  position: relative;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.orwellian-container .eye {
  width: 160px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -60%);
  animation: pulse 2s infinite;
  overflow: hidden;
  z-index: 10;
}

.orwellian-container .pupil {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: look-diagonal 4s infinite ease-in-out;
}

.orwellian-container .pupil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgb(255, 0, 0) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.orwellian-container .eyelid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  animation: blink 4s infinite;
}

.orwellian-container .spotlight {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 47px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), transparent);
  filter: blur(8px);
  transform-origin: top;
  animation: spotlight-sweep-diagonal 4s infinite ease-in-out;
}

.orwellian-container .text {
  position: absolute;
  bottom: 20px;
  left: 10px;
  right: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #f8d17c;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: glitch 1s infinite;
  z-index: 20;
}

.orwellian-container .scan-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 50%
  );
  background-size: 100% 4px;
  animation: scan 10s linear infinite;
  z-index: 30;
  opacity: 0.3;
  pointer-events: none;
}

.orwellian-container .tv-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  background-size: 100% 2px, 3px 100%;
  animation: tv-flicker 0.15s infinite;
  z-index: 35;
  pointer-events: none;
  opacity: 0.5;
}

.orwellian-container .orwellian-loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 40;
}

.orwellian-container .orwellian-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(0, 0, 0, 0.5) 90%
  );
  z-index: 35;
  pointer-events: none;
}

@keyframes look-diagonal {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-40%) rotate(-15deg);
  }
  75% {
    transform: translateX(-60%) rotate(15deg);
  }
}

@keyframes spotlight-sweep-diagonal {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
  25% {
    transform: translateX(-40%) rotate(-15deg);
  }
  75% {
    transform: translateX(-60%) rotate(15deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -60%) scale(1);
  }
  50% {
    transform: translate(-50%, -60%) scale(1.05);
  }
}

@keyframes glitch {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(-2px, 2px);
    opacity: 0.75;
  }
  50% {
    transform: translate(2px, -2px);
    opacity: 0.5;
  }
  75% {
    transform: translate(-2px, -2px);
    opacity: 0.75;
  }
}

@keyframes blink {
  0%,
  90%,
  100% {
    height: 0;
  }
  95% {
    height: 100%;
  }
}

@keyframes scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes tv-flicker {
  0% {
    opacity: 0.27049;
  }
  5% {
    opacity: 0.34801;
  }
  10% {
    opacity: 0.23175;
  }
  15% {
    opacity: 0.40923;
  }
  20% {
    opacity: 0.29481;
  }
  25% {
    opacity: 0.38584;
  }
  30% {
    opacity: 0.24928;
  }
  35% {
    opacity: 0.32451;
  }
  40% {
    opacity: 0.37031;
  }
  45% {
    opacity: 0.26941;
  }
  50% {
    opacity: 0.35755;
  }
  55% {
    opacity: 0.29288;
  }
  60% {
    opacity: 0.31821;
  }
  65% {
    opacity: 0.39726;
  }
  70% {
    opacity: 0.25294;
  }
  75% {
    opacity: 0.36898;
  }
  80% {
    opacity: 0.28995;
  }
  85% {
    opacity: 0.3398;
  }
  90% {
    opacity: 0.38703;
  }
  95% {
    opacity: 0.24619;
  }
  100% {
    opacity: 0.35762;
  }
}

/* Additional styles to ensure full coverage */
.orwellian-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px; /* Ensures a minimum height for the container */
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .orwellian-container .orwellian-loader {
    width: 240px;
    height: 240px;
  }

  .orwellian-container .eye {
    width: 140px;
    height: 50px;
  }

  .orwellian-container .pupil {
    width: 40px;
    height: 40px;
  }

  .orwellian-container .spotlight {
    width: 40px;
    height: 160px;
  }

  .orwellian-container .text {
    font-size: 16px;
  }
}

/* Accessibility improvements */
.orwellian-container .text {
  user-select: none; /* Prevents text selection */
}

.orwellian-container .orwellian-loader:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.orwellian-container .orwellian-loader {
  animation: subtle-rotate 6s infinite ease-in-out;
}

/* Enhance TV effect */
.orwellian-container .tv-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 80%
    ),
    repeating-radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 4px
    );
  background-size: 100% 100%, 3px 3px;
  pointer-events: none;
}

/* Improve text readability */
.orwellian-container .text {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Enhance spotlight effect */
.orwellian-container .spotlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at top,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  filter: blur(5px);
}

/* Add a pulsating glow to the eye */
@keyframes eye-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  }
}

.orwellian-container .eye {
  animation: pulse 2s infinite, eye-glow 4s infinite;
}

</style>
    

<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<style>
/* From Uiverse.io by A-nshuman  - Tags: animation, loading, loader, creative, loading animation */
.blocks {
  border: 2px solid #2b83e2;
  max-width: 158px;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
  display: flex;
  flex-wrap: wrap;
}
.blocks .block {
  display: flex;
  flex: 1;
  border-radius: 4px;
  background: #2b83e2;
  width: 75px;
  height: 75px;
  animation: blockLoading 1s infinite;
}
.blocks .block:nth-child(1) {
  animation-delay: 0ms;
}
.blocks .block:nth-child(2) {
  animation-delay: 200ms;
}
.blocks .block:nth-child(3) {
  animation-delay: 400ms;
}
.blocks .block:nth-child(4) {
  animation-delay: 600ms;
}
@keyframes blockLoading {
  0%,
  100% {
    flex: 1;
  }
  50% {
    flex: 4;
  }
}

</style>
    

<div class="spinner"></div>

<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader */
.spinner {
  position: relative;
  width: 35.2px;
  height: 35.2px;
}

.spinner::before,
.spinner::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  animation: spinner-b4c8mmhg 0.5s backwards, spinner-49opz7hg 1.25s 0.5s infinite ease;
  border: 8.8px solid #000000;
  border-radius: 50%;
  box-shadow: 0 -52.8px 0 -8.8px #000000;
  position: absolute;
}

.spinner::after {
  animation-delay: 0s, 1.25s;
}

@keyframes spinner-b4c8mmhg {
  from {
    box-shadow: 0 0 0 -8.8px #000000;
  }
}

@keyframes spinner-49opz7hg {
  to {
    transform: rotate(360deg);
  }
}
</style>

<div class="spinner"></div>

<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader */
.spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4.5px solid #0000;
  border-radius: 50%;
  border-color: #dbdcef #0000;
  animation: spinner-e04l1k 1s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 2.2px;
  border: inherit;
  border-radius: 50%;
}

.spinner::before {
  border-color: #474bff #0000;
  animation: inherit;
  animation-duration: 0.5s;
  animation-direction: reverse;
}

.spinner::after {
  margin: 8.9px;
}

@keyframes spinner-e04l1k {
  100% {
    transform: rotate(1turn);
  }
}
</style>

<div class="spinner">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader, accept, account */
.spinner {
  position: relative;
  width: 33.6px;
  height: 33.6px;
  perspective: 67.2px;
}

.spinner div {
  width: 100%;
  height: 100%;
  background: #474bff;
  position: absolute;
  left: 50%;
  transform-origin: left;
  animation: spinner-16s03x 2s infinite;
}

.spinner div:nth-child(1) {
  animation-delay: 0.15s;
}

.spinner div:nth-child(2) {
  animation-delay: 0.3s;
}

.spinner div:nth-child(3) {
  animation-delay: 0.45s;
}

.spinner div:nth-child(4) {
  animation-delay: 0.6s;
}

.spinner div:nth-child(5) {
  animation-delay: 0.75s;
}

@keyframes spinner-16s03x {
  0% {
    transform: rotateY(0deg);
  }

  50%, 80% {
    transform: rotateY(-180deg);
  }

  90%, 100% {
    opacity: 0;
    transform: rotateY(-180deg);
  }
}
</style>

<div class="spinner">
  <div></div>   
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
  <div></div>    
</div>


<style>
/* From Uiverse.io by AHMED-MIT - Tags: about me, css, 2FA */
.spinner {
  position: absolute;
  width: 9px;
  height: 9px;
}

.spinner div {
  position: absolute;
  width: 50%;
  height: 150%;
  background: #474bff;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
  --delay: 0.1;
  --rotation: 36;
  --translation: 150;
}

.spinner div:nth-child(2) {
  --delay: 0.2;
  --rotation: 72;
  --translation: 150;
}

.spinner div:nth-child(3) {
  --delay: 0.3;
  --rotation: 108;
  --translation: 150;
}

.spinner div:nth-child(4) {
  --delay: 0.4;
  --rotation: 144;
  --translation: 150;
}

.spinner div:nth-child(5) {
  --delay: 0.5;
  --rotation: 180;
  --translation: 150;
}

.spinner div:nth-child(6) {
  --delay: 0.6;
  --rotation: 216;
  --translation: 150;
}

.spinner div:nth-child(7) {
  --delay: 0.7;
  --rotation: 252;
  --translation: 150;
}

.spinner div:nth-child(8) {
  --delay: 0.8;
  --rotation: 288;
  --translation: 150;
}

.spinner div:nth-child(9) {
  --delay: 0.9;
  --rotation: 324;
  --translation: 150;
}

.spinner div:nth-child(10) {
  --delay: 1;
  --rotation: 360;
  --translation: 150;
}

@keyframes spinner-fzua35 {
  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}

</style>

<div class="spinner"></div>
<style>
/* From Uiverse.io by AHMED-MIT - Tags: loader, about me, accept call */
.spinner {
  --d: 24.6px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  color: #474bff;
  box-shadow: calc(1*var(--d))      calc(0*var(--d))     0 0,
          calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1.1px,
          calc(0*var(--d))      calc(1*var(--d))     0 2.2px,
          calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px,
          calc(-1*var(--d))     calc(0*var(--d))     0 4.5px,
          calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px,
          calc(0*var(--d))      calc(-1*var(--d))    0 6.7px;
  animation: spinner-a90wxe 1s infinite steps(8);
}

@keyframes spinner-a90wxe {
  100% {
    transform: rotate(1turn);
  }
}
</style>

<div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 3rem;
  width: var(--dim);
  height: var(--dim);
  position: relative;
  animation: spin988 2s linear infinite;
}

.loader .circle {
  --color: #333;
  --dim: 1.2rem;
  width: var(--dim);
  height: var(--dim);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
}

.loader .circle:nth-child(1) {
  top: 0;
  left: 0;
}

.loader .circle:nth-child(2) {
  top: 0;
  right: 0;
}

.loader .circle:nth-child(3) {
  bottom: 0;
  left: 0;
}

.loader .circle:nth-child(4) {
  bottom: 0;
  right: 0;
}

@keyframes spin988 {
  0% {
    transform: scale(1) rotate(0);
  }

  20%, 25% {
    transform: scale(1.3) rotate(90deg);
  }

  45%, 50% {
    transform: scale(1) rotate(180deg);
  }

  70%, 75% {
    transform: scale(1.3) rotate(270deg);
  }

  95%, 100% {
    transform: scale(1) rotate(360deg);
  }
}
</style>

<div class="loader"></div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 5rem;
  width: var(--dim);
  height: var(--dim);
  border: 7px solid #2596be;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin_51 1.5s infinite linear;
}

@keyframes spin_51 {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}
</style>

<div class="loader">
  <svg class="loader-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.94 47.94" style="enable-background:new 0 0 47.94 47.94;" xml:space="preserve">
<path style="fill:#fff;" d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757
	c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042
	c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685
	c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528
	c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956
	C22.602,0.567,25.338,0.567,26.285,2.486z"></path>
</svg>
</div>
<style>
/* From Uiverse.io by AbanoubMagdy1 - Tags: loader */
.loader {
  --dim: 6rem;
  background-color: #ED8A19;
  width: var(--dim);
  height: var(--dim);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: spin_412 5s infinite;
}

.loader .loader-svg {
  transform: translateY(-2px) scale(.7);
}

@keyframes spin_412 {
  0% {
    transform: rotate(0) scale(1);
  }

  50% {
    transform: rotate(720deg) scale(1.3);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}
</style>

<div class="loader-container">
  <div class="loader"></div>
  <div class="loader-text">Loading...</div>
</div>

<style>
/* From Uiverse.io by Abrar-Hussain1  - Tags: animation, loading, loader, spinner, modern, circle, animated, circle loader */
.loader-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader {
  width: 70px;
  height: 70px;
  position: relative;
}

.loader:before {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 6px solid #007bff;
  position: absolute;
  top: 0;
  left: 0;
  animation: pulse 1s ease-in-out infinite;
}

.loader:after {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: #007bff;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 2s linear infinite;
}

.loader-text {
  font-size: 24px;
  margin-top: 20px;
  color: #007bff;
  font-family: Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content {
  display: none;
}

.loaded .loader-container {
  display: none;
}

.loaded .content {
  display: block;
}

</style>
    

<div class="loader">
  <div class="box box0">
    <div></div>
  </div>
  <div class="box box1">
    <div></div>
  </div>
  <div class="box box2">
    <div></div>
  </div>
  <div class="box box3">
    <div></div>
  </div>
  <div class="box box4">
    <div></div>
  </div>
  <div class="box box5">
    <div></div>
  </div>
  <div class="box box6">
    <div></div>
  </div>
  <div class="box box7">
    <div></div>
  </div>
  <div class="ground">
    <div></div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: 3d, loader, effect loader, loading animation */
.loader {
  --duration: 3s;
  --primary: rgba(39, 94, 254, 1);
  --primary-light: #2f71ff;
  --primary-rgba: rgba(39, 94, 254, 0);
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
}

@media (max-width: 480px) {
  .loader {
    zoom: 0.44;
  }
}

.loader:before, .loader:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
/* change the back groung color on switching from light to dark mood */
  background: #e8e8e8;
  transform: translateZ(200px) rotate(var(--r));
  -webkit-animation: mask var(--duration) linear forwards infinite;
  animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}

.loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

.loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: var(--primary);
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
  -webkit-animation: ground var(--duration) linear forwards infinite;
  animation: ground var(--duration) linear forwards infinite;
}

.loader .ground div:before, .loader .ground div:after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
  animation: ground-shine var(--duration) linear forwards infinite;
}

.loader .ground div:after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}

.loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  -webkit-animation: var(--duration) linear forwards infinite;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}

.loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: var(--duration) ease forwards infinite;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}

.loader .box div:before, .loader .box div:after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}

.loader .box div:after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}

.loader .box.box0 {
  --x: -220px;
  --y: -120px;
  left: 58px;
  top: 108px;
}

.loader .box.box1 {
  --x: -260px;
  --y: 120px;
  left: 25px;
  top: 120px;
}

.loader .box.box2 {
  --x: 120px;
  --y: -190px;
  left: 58px;
  top: 64px;
}

.loader .box.box3 {
  --x: 280px;
  --y: -40px;
  left: 91px;
  top: 120px;
}

.loader .box.box4 {
  --x: 60px;
  --y: 200px;
  left: 58px;
  top: 132px;
}

.loader .box.box5 {
  --x: -220px;
  --y: -120px;
  left: 25px;
  top: 76px;
}

.loader .box.box6 {
  --x: -260px;
  --y: 120px;
  left: 91px;
  top: 76px;
}

.loader .box.box7 {
  --x: -240px;
  --y: 200px;
  left: 58px;
  top: 87px;
}

.loader .box0 {
  -webkit-animation-name: box-move0;
  animation-name: box-move0;
}

.loader .box0 div {
  -webkit-animation-name: box-scale0;
  animation-name: box-scale0;
}

.loader .box1 {
  -webkit-animation-name: box-move1;
  animation-name: box-move1;
}

.loader .box1 div {
  -webkit-animation-name: box-scale1;
  animation-name: box-scale1;
}

.loader .box2 {
  -webkit-animation-name: box-move2;
  animation-name: box-move2;
}

.loader .box2 div {
  -webkit-animation-name: box-scale2;
  animation-name: box-scale2;
}

.loader .box3 {
  -webkit-animation-name: box-move3;
  animation-name: box-move3;
}

.loader .box3 div {
  -webkit-animation-name: box-scale3;
  animation-name: box-scale3;
}

.loader .box4 {
  -webkit-animation-name: box-move4;
  animation-name: box-move4;
}

.loader .box4 div {
  -webkit-animation-name: box-scale4;
  animation-name: box-scale4;
}

.loader .box5 {
  -webkit-animation-name: box-move5;
  animation-name: box-move5;
}

.loader .box5 div {
  -webkit-animation-name: box-scale5;
  animation-name: box-scale5;
}

.loader .box6 {
  -webkit-animation-name: box-move6;
  animation-name: box-move6;
}

.loader .box6 div {
  -webkit-animation-name: box-scale6;
  animation-name: box-scale6;
}

.loader .box7 {
  -webkit-animation-name: box-move7;
  animation-name: box-move7;
}

.loader .box7 div {
  -webkit-animation-name: box-scale7;
  animation-name: box-scale7;
}

@-webkit-keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%, 100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@-webkit-keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

@keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

</style>

<div class="con">
  <div class="side left"></div>
  <div class="side right"></div>
  <div class="side rightAbove"></div>
  <div class="side bottom"></div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animated, effect loader */
.con {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: 60px 50px;
  -webkit-animation: spin 3s infinite;
  animation: spin 3s infinite;
}

.side {
  width: 110px;
  height: 30px;
  background: white;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.side:before, .side:after {
  content: "";
  display: block;
  position: absolute;
}

.side:before {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #fff;
  border-top: 35px solid #111;
  left: 0;
}

.side:after {
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 20px solid #111;
  border-bottom: 35px solid transparent;
  right: 0;
}

.left {
  left: 0px;
  transform: rotate(120deg);
  z-index: 2;
}

.right, .rightAbove {
  transform: rotate(-120deg);
  right: -30px;
  top: 50px;
}

.rightAbove {
  clip: rect(0px 90px 30px 0);
  z-index: 4;
}

.under {
  z-index: 1;
}

.bottom {
  left: -24px;
  bottom: 30px;
  z-index: 3;
}

@-webkit-keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

@keyframes spin {
  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(720deg);
  }
}
</style>

<div class="fire">
  <div class="fire-left">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-center">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-right">
    <div class="main-fire"></div>
    <div class="particle-fire"></div>
  </div>
  <div class="fire-bottom">
    <div class="main-fire"></div>
  </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animal, trending */
@keyframes scaleUpDown {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
  }

  50%, 90% {
    transform: scaleY(1.1);
  }

  75% {
    transform: scaleY(0.95);
  }

  80% {
    transform: scaleX(0.95);
  }
}

@keyframes shake {
  0%, 100% {
    transform: skewX(0) scale(1);
  }

  50% {
    transform: skewX(5deg) scale(0.9);
  }
}

@keyframes particleUp {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
  }
}

@keyframes glow {
  0%, 100% {
    background-color: #ef5a00;
  }

  50% {
    background-color: #ff7800;
  }
}

.fire {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
}

.fire-center {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: scaleUpDown 3s ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-center .main-fire {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-center .particle-fire {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 10px;
  height: 10px;
  background-color: #ef5a00;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right {
  height: 100%;
  width: 100%;
  position: absolute;
  animation: shake 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right .main-fire {
  position: absolute;
  top: 15%;
  right: -25%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-right .particle-fire {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: shake 3s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left .main-fire {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #d43322);
}

.fire-left .particle-fire {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 10%;
  height: 10%;
  background-color: #ef5a00;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 3s infinite ease-out 0;
  animation-fill-mode: both;
}

.fire-bottom .main-fire {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 75%;
  height: 75%;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(10px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
</style>

<div class="scene">
  <div class="forest">
    <div class="tree tree1">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
    </div>

    <div class="tree tree2">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree3">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree4">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree5">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree6">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>

    <div class="tree tree7">
      <div class="branch branch-top"></div>
      <div class="branch branch-middle"></div>
      <div class="branch branch-bottom"></div>
    </div>
  </div>
  
  <div class="tent">
      <div class="roof"></div>
      <div class="roof-border-left">
        <div class="roof-border roof-border1"></div>
        <div class="roof-border roof-border2"></div>
        <div class="roof-border roof-border3"></div>
      </div>
      <div class="entrance">
        <div class="door left-door">
          <div class="left-door-inner"></div>
        </div>
        <div class="door right-door">
          <div class="right-door-inner"></div>
        </div>
      </div>
    </div>

  <div class="floor">
      <div class="ground ground1"></div>
      <div class="ground ground2"></div>
    </div>
  
  <div class="fireplace">
    <div class="support"></div>
    <div class="support"></div>
    <div class="bar"></div>
    <div class="hanger"></div>
    <div class="smoke"></div>
    <div class="pan"></div>
    <div class="fire">
      <div class="line line1">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
      <div class="line line2">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
      <div class="line line3">
        <div class="particle particle1"></div>
        <div class="particle particle2"></div>
        <div class="particle particle3"></div>
        <div class="particle particle4"></div>
      </div>
    </div>
  </div>
  
  <div class="time-wrapper">
    <div class="time">
      <div class="day"></div>
      <div class="night">
        <div class="moon"></div>
        <div class="star star1 star-big"></div>
        <div class="star star2 star-big"></div>
        <div class="star star3 star-big"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
        <div class="star star6"></div>
        <div class="star star7"></div>
      </div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Admin12121 - Tags: loader, animated */
@keyframes stageBackground {
  0%, 10%, 90%, 100% {
    background-color: #00B6BB;
  }

  25%, 75% {
    background-color: #0094bd;
  }
}

@keyframes earthRotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes sunrise {
  0%, 10%, 90%, 100% {
    box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
  }

  25%, 75% {
    box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);
  }
}

@keyframes moonOrbit {
  25% {
    transform: rotate(-60deg);
  }

  50% {
    transform: rotate(-60deg);
  }

  75% {
    transform: rotate(-120deg);
  }

  0%, 100% {
    transform: rotate(-180deg);
  }
}

@keyframes nightTime {
  0%, 90% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 1;
  }
}

@keyframes hotPan {
  0%, 90% {
    background-color: #74667e;
  }

  50%, 75% {
    background-color: #b2241c;
  }
}

@keyframes heat {
  0%, 90% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);
  }

  50%, 75% {
    box-shadow: inset 0 -2px 0 0 white;
  }
}

@keyframes smoke {
  0%, 50%, 90%, 100% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 0.7;
  }
}

@keyframes fire {
  0%, 90%, 100% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 1;
  }
}

@keyframes treeShake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-2deg);
  }

  40% {
    transform: rotate(4deg);
  }

  50% {
    transform: rotate(-4deg);
  }

  60% {
    transform: rotate(6deg);
  }

  75% {
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes fireParticles {
  0% {
    height: 30%;
    opacity: 1;
    top: 75%;
  }

  25% {
    height: 25%;
    opacity: 0.8;
    top: 40%;
  }

  50% {
    height: 15%;
    opacity: 0.6;
    top: 20%;
  }

  75% {
    height: 10%;
    opacity: 0.3;
    top: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fireLines {
  0%, 25%, 75%, 100% {
    bottom: 0;
  }

  50% {
    bottom: 5%;
  }
}

.scene {
  display: flex;
  margin: 0 auto 80px auto;
  justify-content: center;
  align-items: flex-end;
  width: 400px;
  height: 300px;
  position: relative;
}

.forest {
  display: flex;
  width: 75%;
  height: 90%;
  position: relative;
}

.tree {
  display: block;
  width: 50%;
  position: absolute;
  bottom: 0;
  opacity: 0.4;
}

.tree .branch {
  width: 80%;
  height: 0;
  margin: 0 auto;
  padding-left: 40%;
  padding-bottom: 50%;
  overflow: hidden;
}

.tree .branch:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -600px;
  border-left: 600px solid transparent;
  border-right: 600px solid transparent;
  border-bottom: 950px solid #000;
}

.tree .branch.branch-top {
  transform-origin: 50% 100%;
  animation: treeShake 0.5s linear infinite;
}

.tree .branch.branch-middle {
  width: 90%;
  padding-left: 45%;
  padding-bottom: 65%;
  margin: 0 auto;
  margin-top: -25%;
}

.tree .branch.branch-bottom {
  width: 100%;
  padding-left: 50%;
  padding-bottom: 80%;
  margin: 0 auto;
  margin-top: -40%;
}

.tree1 {
  width: 31%;
}

.tree1 .branch-top {
  transition-delay: 0.3s;
}

.tree2 {
  width: 39%;
  left: 9%;
}

.tree2 .branch-top {
  transition-delay: 0.4s;
}

.tree3 {
  width: 32%;
  left: 24%;
}

.tree3 .branch-top {
  transition-delay: 0.5s;
}

.tree4 {
  width: 37%;
  left: 34%;
}

.tree4 .branch-top {
  transition-delay: 0.6s;
}

.tree5 {
  width: 44%;
  left: 44%;
}

.tree5 .branch-top {
  transition-delay: 0.7s;
}

.tree6 {
  width: 34%;
  left: 61%;
}

.tree6 .branch-top {
  transition-delay: 0.2s;
}

.tree7 {
  width: 24%;
  left: 76%;
}

.tree7 .branch-top {
  transition-delay: 0.1s;
}

.tent {
  width: 60%;
  height: 25%;
  position: absolute;
  bottom: -0.5%;
  right: 15%;
  z-index: 1;
  text-align: right;
}

.roof {
  display: inline-block;
  width: 45%;
  height: 100%;
  margin-right: 10%;
  position: relative;
  /*bottom: 0;
  right: 9%;*/
  z-index: 1;
  border-top: 4px solid #4D4454;
  border-right: 4px solid #4D4454;
  border-left: 4px solid #4D4454;
  border-top-right-radius: 6px;
  transform: skew(30deg);
  box-shadow: inset -3px 3px 0px 0px #F7B563;
  /*background: linear-gradient(
    to bottom, 
    rgba(246,212,132,1) 0%,
    rgba(246,212,132,1) 24%,
    rgba(#F0B656,1) 25%,
    rgba(#F0B656,1) 74%,
    rgba(235,151,53,1) 75%,
    rgba(235,151,53,1) 100%
  );*/
  background: #f6d484;
}

.roof:before {
  content: "";
  width: 70%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: 0;
  border-radius: 10%;
  background-color: #E78C20;
}

.roof:after {
  content: "";
  height: 75%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);
}

.roof-border-left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 1%;
  height: 125%;
  position: absolute;
  top: 0;
  left: 35.7%;
  z-index: 1;
  transform-origin: 50% 0%;
  transform: rotate(35deg);
}

.roof-border-left .roof-border {
  display: block;
  width: 100%;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.roof-border-left .roof-border1 {
  height: 40%;
}

.roof-border-left .roof-border2 {
  height: 10%;
}

.roof-border-left .roof-border3 {
  height: 40%;
}

.door {
  width: 55px;
  height: 92px;
  position: absolute;
  bottom: 2%;
  overflow: hidden;
  z-index: 0;
  transform-origin: 0 105%;
}

.left-door {
  transform: rotate(35deg);
  position: absolute;
  left: 13.5%;
  bottom: -3%;
  z-index: 0;
}

.left-door .left-door-inner {
  width: 100%;
  height: 100%;
  transform-origin: 0 105%;
  transform: rotate(-35deg);
  position: absolute;
  top: 0;
  overflow: hidden;
  background-color: #EDDDC2;
}

.left-door .left-door-inner:before {
  content: "";
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);
}

.left-door .left-door-inner:after {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  left: 10%;
  transform: rotate(25deg);
  background-color: #fff;
}

.right-door {
  height: 89px;
  right: 21%;
  transform-origin: 0 105%;
  transform: rotate(-30deg) scaleX(-1);
  position: absolute;
  bottom: -3%;
  z-index: 0;
}

.right-door .right-door-inner {
  width: 100%;
  height: 100%;
  transform-origin: 0 120%;
  transform: rotate(-30deg);
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  background-color: #EFE7CF;
}

.right-door .right-door-inner:before {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  right: -28%;
  z-index: 1;
  transform: rotate(15deg);
  background-color: #524A5A;
}

.right-door .right-door-inner:after {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 15%;
  right: -20%;
  transform: rotate(20deg);
  background-color: #fff;
}

.floor {
  width: 80%;
  position: absolute;
  right: 10%;
  bottom: 0;
  z-index: 1;
}

.floor .ground {
  position: absolute;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.floor .ground.ground1 {
  width: 65%;
  left: 0;
}

.floor .ground.ground2 {
  width: 30%;
  right: 0;
}

.fireplace {
  display: block;
  width: 24%;
  height: 20%;
  position: absolute;
  left: 5%;
}

.fireplace:before {
  content: "";
  display: block;
  width: 8%;
  position: absolute;
  bottom: -4px;
  left: 2%;
  border-radius: 2px;
  border: 2px solid #4D4454;
  background: #4D4454;
}

.fireplace .support {
  display: block;
  height: 105%;
  width: 2px;
  position: absolute;
  bottom: -5%;
  left: 10%;
  border: 2px solid #4D4454;
}

.fireplace .support:before {
  content: "";
  width: 100%;
  height: 15%;
  position: absolute;
  top: -18%;
  left: -4px;
  border-radius: 2px;
  border: 2px solid #4D4454;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
}

.fireplace .support:after {
  content: "";
  width: 100%;
  height: 15%;
  position: absolute;
  top: -18%;
  left: 0px;
  border-radius: 2px;
  border: 2px solid #4D4454;
  transform-origin: 0 100%;
  transform: rotate(-45deg);
}

.fireplace .support:nth-child(1) {
  left: 85%;
}

.fireplace .bar {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  border: 2px solid #4D4454;
}

.fireplace .hanger {
  display: block;
  width: 2px;
  height: 25%;
  margin-left: -4px;
  position: absolute;
  left: 50%;
  border: 2px solid #4D4454;
}

.fireplace .pan {
  display: block;
  width: 25%;
  height: 50%;
  border-radius: 50%;
  border: 4px solid #4D4454;
  position: absolute;
  top: 25%;
  left: 35%;
  overflow: hidden;
  animation: heat 5s linear infinite;
}

.fireplace .pan:before {
  content: "";
  display: block;
  height: 53%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
  border-top: 4px solid #4D4454;
  background-color: #74667e;
  animation: hotPan 5s linear infinite;
}

.fireplace .smoke {
  display: block;
  width: 20%;
  height: 25%;
  position: absolute;
  top: 25%;
  left: 37%;
  background-color: white;
  filter: blur(5px);
  animation: smoke 5s linear infinite;
}

.fireplace .fire {
  display: block;
  width: 25%;
  height: 120%;
  position: absolute;
  bottom: 0;
  left: 33%;
  z-index: 1;
  animation: fire 5s linear infinite;
}

.fireplace .fire:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -4px;
  z-index: 1;
  border-radius: 2px;
  border: 1px solid #efb54a;
  background-color: #efb54a;
}

.fireplace .fire .line {
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  bottom: 0;
  animation: fireLines 1s linear infinite;
}

.fireplace .fire .line2 {
  left: 50%;
  margin-left: -1px;
  animation-delay: 0.3s;
}

.fireplace .fire .line3 {
  right: 0;
  animation-delay: 0.5s;
}

.fireplace .fire .line .particle {
  height: 10%;
  position: absolute;
  top: 100%;
  z-index: 1;
  border-radius: 2px;
  border: 2px solid #efb54a;
  animation: fireParticles 0.5s linear infinite;
}

.fireplace .fire .line .particle1 {
  animation-delay: 0.1s;
}

.fireplace .fire .line .particle2 {
  animation-delay: 0.3s;
}

.fireplace .fire .line .particle3 {
  animation-delay: 0.6s;
}

.fireplace .fire .line .particle4 {
  animation-delay: 0.9s;
}

.time-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.time {
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  transform-origin: 50% 50%;
  transform: rotate(270deg);
  animation: earthRotation 5s linear infinite;
}

.time .day {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 20%;
  left: 40%;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);
  animation: sunrise 5s ease-in-out infinite;
  background-color: #ef9431;
}

.time .night {
  animation: nightTime 5s ease-in-out infinite;
}

.time .night .star {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 10%;
  border-radius: 50%;
  background-color: #fff;
}

.time .night .star-big {
  width: 6px;
  height: 6px;
}

.time .night .star1 {
  right: 23%;
  bottom: 25%;
}

.time .night .star2 {
  right: 35%;
  bottom: 18%;
}

.time .night .star3 {
  right: 47%;
  bottom: 25%;
}

.time .night .star4 {
  right: 22%;
  bottom: 20%;
}

.time .night .star5 {
  right: 18%;
  bottom: 30%;
}

.time .night .star6 {
  right: 60%;
  bottom: 20%;
}

.time .night .star7 {
  right: 70%;
  bottom: 23%;
}

.time .night .moon {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 22%;
  right: 33%;
  border-radius: 50%;
  transform: rotate(-60deg);
  box-shadow: 9px 9px 3px 0 white;
  filter: blur(1px);
  animation: moonOrbit 5s ease-in-out infinite;
}

.time .night .moon:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -9px;
  left: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.2);
}
</style>

<div class="content">
   <div class="planet">
      <div class="ring"></div>
         <div class="cover-ring"></div>
      <div class="spots">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>

      </div>
   </div>
   <p>loading</p>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: loader, 3d loader */
.content {
  width: 300px;
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .planet {
  width: 65%;
  height: 65%;
  background-color: #546c8c;
  border-radius: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  transform-origin: center center;
  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
  animation: planet 5s ease infinite alternate;
  /* planet ring */
  /* to cover the back of the ring */
  /* planet spots */
}

@keyframes planet {
  0% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

.content .planet .ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background-color: #bacbd9;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 33% center;
  box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
  animation: ring 3s ease infinite;
  /* small ball */
  /* inner ring */
}

@keyframes ring {
  0% {
    transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
  }

  100% {
    transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
  }
}

.content .planet .ring:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 30px;
  border-radius: 100%;
  background-color: #7ea1bf;
  z-index: 2;
  left: calc(0px - 5px);
  box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
}

.content .planet .ring:after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  background-color: #7ea1bf;
  box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
}

.content .planet .cover-ring {
  position: absolute;
  width: 100%;
  height: 50%;
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 80%;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  transform: translate(0px, -17px);
  background-color: #546c8c;
  z-index: 2;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
}

.content .planet .spots {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.content .planet .spots span {
  width: 30px;
  height: 30px;
  background-color: #3c4359;
  position: absolute;
  border-radius: 100%;
  box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
  animation: dots 5s ease infinite alternate;
}

@keyframes dots {
  0% {
    box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
  }

  100% {
    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
  }
}

.content .planet .spots span:nth-child(1) {
  top: 20px;
  right: 50px;
}

.content .planet .spots span:nth-child(2) {
  top: 40px;
  left: 50px;
  width: 15px;
  height: 15px;
}

.content .planet .spots span:nth-child(3) {
  top: 80px;
  left: 20px;
  width: 25px;
  height: 25px;
}

.content .planet .spots span:nth-child(4) {
  top: 80px;
  left: 90px;
  width: 40px;
  height: 40px;
}

.content .planet .spots span:nth-child(5) {
  top: 160px;
  left: 70px;
  width: 15px;
  height: 15px;
}

.content .planet .spots span:nth-child(6) {
  top: 165px;
  left: 125px;
  width: 10px;
  height: 10px;
}

.content .planet .spots span:nth-child(7) {
  top: 90px;
  left: 150px;
  width: 15px;
  height: 15px;
}

.content p {
  color: #bacbd9;
  font-size: 14px;
  z-index: 2;
  position: absolute;
  bottom: -20px;
  font-family: "Roboto Mono", monospace;
  animation: text 4s ease infinite;
  width: 100px;
  text-align: center;
}

@keyframes text {
  0% {
    transform: translateX(-30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }

  25% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }

  50% {
    transform: translateX(30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }

  75% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }

  100% {
    transform: translateX(-30px);
    letter-spacing: 0px;
    color: #bacbd9;
  }
}
</style>

<div class="main">
  <svg
    width="168"
    height="158"
    viewBox="0 0 168 158"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g id="pizza">
      <rect width="168" height="158" fill="none"></rect>
      <g id="slice6">
        <g id="slice">
          <mask id="path-1-inside-1_7_2" fill="white">
            <path
              d="M110 34.8997C118.513 39.4198 125.582 45.921 130.497 53.75C135.412 61.579 138 70.4598 138 79.5L82 79.5L110 34.8997Z"
            ></path>
          </mask>
          <path
            d="M110 34.8997C118.513 39.4198 125.582 45.921 130.497 53.75C135.412 61.579 138 70.4598 138 79.5L82 79.5L110 34.8997Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-1-inside-1_7_2)"
          ></path>
        </g>
        <g id="pepperoni">
          <circle cx="114" cy="63" r="6" fill="#F12424"></circle>
          <circle cx="114" cy="63" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom">
          <path
            d="M96.3127 75.3748C93.8388 74.3499 93.5395 72.1249 96.4349 66.9246C100.861 64.107 105.48 66.5248 103.603 67.4062C101.726 68.2876 101.517 69.215 101.78 69.3984C101.78 69.3984 105.126 71.2856 104.991 72.8193C104.856 74.353 103.753 74.1725 103.409 74.5483C103.066 74.9242 99.9579 71.3905 99.9579 71.3905C96.0194 74.1256 98.7867 76.3997 96.3127 75.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M99.9579 71.3905C96.0194 74.1256 98.7867 76.3997 96.3127 75.3748C93.8388 74.3499 93.5395 72.1249 96.4349 66.9246C100.861 64.107 105.48 66.5248 103.603 67.4062C101.726 68.2876 101.517 69.215 101.78 69.3984M99.9579 71.3905C99.9579 71.3905 103.066 74.9242 103.409 74.5483C103.753 74.1725 104.856 74.353 104.991 72.8193C105.126 71.2856 101.78 69.3984 101.78 69.3984M99.9579 71.3905L101.78 69.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="onion"
          d="M129.841 65.2587C127.54 64.2211 127.021 63.5697 127.016 62.3249C127.666 61.9214 128.094 61.8629 129.071 62.3249C130.14 62.8474 130.783 63.5952 131.961 65.2587C131.313 66.9451 130.895 67.8704 129.392 69.2403C131.161 70.4193 131.537 72.3751 131.961 72.3837C132.384 72.3923 129.231 76.9243 129.071 77.9719C127.662 78.0881 127.229 77.8597 127.016 76.994C126.863 74.9998 127.829 74.044 129.841 72.3837C128.109 71.4403 127.329 70.8249 127.016 69.2403C126.968 67.7728 127.329 66.9206 129.841 65.2587Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
        <path
          id="pepper"
          d="M121.34 55.4341C123.716 54.3509 124.645 54.4077 125.824 55.2995C125.811 56.107 125.607 56.4894 124.578 56.9337C123.436 57.4079 122.34 57.3806 120.055 57.1194C118.855 55.39 118.235 54.3915 117.853 52.2096C115.667 52.7671 113.592 51.6583 113.327 51.9889C113.062 52.3195 110.695 46.5489 109.803 45.6669C110.547 44.4628 111.025 44.2833 111.972 44.7368C113.948 46.0515 114.265 47.5081 114.612 50.3036C116.554 49.6053 117.608 49.4283 119.294 50.32C120.708 51.3389 121.295 52.2392 121.34 55.4341Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
      </g>
      <g id="slice5">
        <g id="slice_2">
          <mask id="path-7-inside-2_7_2" fill="white">
            <path
              d="M54 34.8997C62.5131 30.3796 72.1699 28 82 28C91.8301 28 101.487 30.3796 110 34.8997L82 79.5L54 34.8997Z"
            ></path>
          </mask>
          <path
            d="M54 34.8997C62.5131 30.3796 72.1699 28 82 28C91.8301 28 101.487 30.3796 110 34.8997L82 79.5L54 34.8997Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-7-inside-2_7_2)"
          ></path>
        </g>
        <g id="pepperoni_2">
          <circle cx="82" cy="56" r="6" fill="#F12424"></circle>
          <circle cx="82" cy="56" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_2">
          <path
            d="M91.3127 43.3748C88.8388 42.3499 88.5395 40.1249 91.4349 34.9246C95.8614 32.107 100.48 34.5248 98.603 35.4062C96.7261 36.2876 96.5167 37.215 96.7805 37.3984C96.7805 37.3984 100.126 39.2856 99.9914 40.8193C99.8563 42.353 98.7534 42.1725 98.4095 42.5483C98.0656 42.9242 94.9579 39.3905 94.9579 39.3905C91.0194 42.1256 93.7867 44.3997 91.3127 43.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M94.9579 39.3905C91.0194 42.1256 93.7867 44.3997 91.3127 43.3748C88.8388 42.3499 88.5395 40.1249 91.4349 34.9246C95.8614 32.107 100.48 34.5248 98.603 35.4062C96.7261 36.2876 96.5167 37.215 96.7805 37.3984M94.9579 39.3905C94.9579 39.3905 98.0656 42.9242 98.4095 42.5483C98.7534 42.1725 99.8563 42.353 99.9914 40.8193C100.126 39.2856 96.7805 37.3984 96.7805 37.3984M94.9579 39.3905L96.7805 37.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_2"
          d="M92.1727 48.6661C93.9594 46.7623 94.8409 46.462 96.27 46.8398C96.5642 47.5919 96.5204 48.0231 95.7373 48.8247C94.8608 49.6968 93.8366 50.0874 91.6233 50.713C89.857 49.5684 88.9042 48.8801 87.7226 47.0063C85.9121 48.3518 83.5712 48.1136 83.4516 48.52C83.3319 48.9264 78.9513 44.4862 77.7915 44.0087C78.0235 42.6121 78.3975 42.2646 79.4458 42.3247C81.7725 42.7912 82.6182 44.0187 84.0009 46.473C85.5319 45.0901 86.4399 44.5264 88.3386 44.7112C90.034 45.1171 90.918 45.7276 92.1727 48.6661Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_2"
          d="M70.8415 37.2587C68.5397 36.2211 68.0212 35.5697 68.0156 34.3249C68.6658 33.9214 69.0936 33.8629 70.0708 34.3249C71.1402 34.8474 71.783 35.5952 72.9609 37.2587C72.3132 38.9451 71.8954 39.8704 70.3919 41.2403C72.1607 42.4193 72.5374 44.3751 72.9609 44.3837C73.3844 44.3923 70.2313 48.9243 70.0708 49.9719C68.6618 50.0881 68.2293 49.8597 68.0156 48.994C67.8631 46.9998 68.8294 46.044 70.8415 44.3837C69.109 43.4403 68.3292 42.8249 68.0156 41.2403C67.9682 39.7728 68.3287 38.9206 70.8415 37.2587Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice1">
        <g id="slice_3">
          <mask id="path-13-inside-3_7_2" fill="white">
            <path
              d="M138 79.5C138 88.5401 135.412 97.421 130.497 105.25C125.582 113.079 118.513 119.58 110 124.1L82 79.5H138Z"
            ></path>
          </mask>
          <path
            d="M138 79.5C138 88.5401 135.412 97.421 130.497 105.25C125.582 113.079 118.513 119.58 110 124.1L82 79.5H138Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-13-inside-3_7_2)"
          ></path>
        </g>
        <g id="pepperoni_3">
          <circle cx="119" cy="99" r="6" fill="#F12424"></circle>
          <circle cx="119" cy="99" r="6" fill="#F12424"></circle>
        </g>
        <path
          id="pepper_3"
          d="M110.227 89.6851C111.587 87.456 112.388 86.9817 113.864 87.0589C114.306 87.7349 114.352 88.166 113.749 89.1109C113.07 90.1438 112.147 90.7358 110.109 91.8011C108.145 91.0423 107.072 90.5634 105.532 88.9712C104.035 90.6587 101.695 90.9046 101.661 91.3269C101.627 91.7492 96.4305 88.2994 95.1975 88.0694C95.1387 86.6549 95.4337 86.2382 96.4722 86.0825C98.8451 86.063 99.9241 87.0914 101.78 89.2108C102.995 87.5439 103.769 86.8063 105.665 86.5986C107.408 86.6489 108.398 87.0656 110.227 89.6851Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_3"
          d="M108.882 106.032C106.425 106.612 105.617 106.411 104.854 105.427C105.124 104.711 105.427 104.404 106.484 104.175C107.65 103.938 108.615 104.139 110.563 104.741C111.077 106.473 111.309 107.461 110.951 109.463C113.072 109.321 114.563 110.642 114.904 110.391C115.245 110.14 115.505 115.655 116.016 116.583C114.97 117.534 114.488 117.616 113.791 117.06C112.455 115.571 112.639 114.225 113.223 111.682C111.274 111.99 110.281 111.977 109.067 110.911C108.135 109.776 107.902 108.881 108.882 106.032Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice2">
        <g id="slice_4">
          <mask id="path-17-inside-4_7_2" fill="white">
            <path
              d="M110 124.1C101.487 128.62 91.8301 131 82 131C72.1699 131 62.5131 128.62 54 124.1L82 79.5L110 124.1Z"
            ></path>
          </mask>
          <path
            d="M110 124.1C101.487 128.62 91.8301 131 82 131C72.1699 131 62.5131 128.62 54 124.1L82 79.5L110 124.1Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-17-inside-4_7_2)"
          ></path>
        </g>
        <g id="pepperoni_4">
          <circle cx="78" cy="103" r="6" fill="#F12424"></circle>
          <circle cx="78" cy="103" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_3">
          <path
            d="M86.3127 117.375C83.8388 116.35 83.5395 114.125 86.4349 108.925C90.8614 106.107 95.48 108.525 93.603 109.406C91.7261 110.288 91.5167 111.215 91.7805 111.398C91.7805 111.398 95.1264 113.286 94.9914 114.819C94.8563 116.353 93.7534 116.172 93.4095 116.548C93.0656 116.924 89.9579 113.391 89.9579 113.391C86.0194 116.126 88.7867 118.4 86.3127 117.375Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M89.9579 113.391C86.0194 116.126 88.7867 118.4 86.3127 117.375C83.8388 116.35 83.5395 114.125 86.4349 108.925C90.8614 106.107 95.48 108.525 93.603 109.406C91.7261 110.288 91.5167 111.215 91.7805 111.398M89.9579 113.391C89.9579 113.391 93.0656 116.924 93.4095 116.548C93.7534 116.172 94.8563 116.353 94.9914 114.819C95.1264 113.286 91.7805 111.398 91.7805 111.398M89.9579 113.391L91.7805 111.398"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_4"
          d="M78.1727 124.666C79.9594 122.762 80.8409 122.462 82.27 122.84C82.5642 123.592 82.5204 124.023 81.7373 124.825C80.8608 125.697 79.8366 126.087 77.6233 126.713C75.857 125.568 74.9042 124.88 73.7226 123.006C71.9121 124.352 69.5712 124.114 69.4516 124.52C69.3319 124.926 64.9513 120.486 63.7915 120.009C64.0235 118.612 64.3975 118.265 65.4458 118.325C67.7725 118.791 68.6182 120.019 70.0009 122.473C71.5319 121.09 72.4399 120.526 74.3386 120.711C76.034 121.117 76.918 121.728 78.1727 124.666Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_4"
          d="M84.2386 90.8992C81.7811 91.4786 80.9731 91.2779 80.2103 90.2943C80.4801 89.5782 80.7837 89.2712 81.8401 89.0422C83.0065 88.805 83.9717 89.0064 85.9193 89.608C86.4331 91.3399 86.6654 92.3282 86.3078 94.3305C88.4286 94.1878 89.9189 95.5092 90.26 95.258C90.6011 95.0069 90.8618 100.522 91.3727 101.45C90.3261 102.401 89.844 102.483 89.1471 101.927C87.8112 100.438 87.9952 99.0916 88.5793 96.5492C86.6308 96.8566 85.6375 96.8437 84.4234 95.7782C83.4917 94.6433 83.2584 93.7479 84.2386 90.8992Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice4">
        <g id="slice_5">
          <mask id="path-23-inside-5_7_2" fill="white">
            <path
              d="M26 79.5C26 70.4599 28.5876 61.579 33.5026 53.75C38.4176 45.921 45.4869 39.4198 54 34.8997L82 79.5L26 79.5Z"
            ></path>
          </mask>
          <path
            d="M26 79.5C26 70.4599 28.5876 61.579 33.5026 53.75C38.4176 45.921 45.4869 39.4198 54 34.8997L82 79.5L26 79.5Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-23-inside-5_7_2)"
          ></path>
        </g>
        <g id="pepperoni_5">
          <circle cx="64" cy="70" r="6" fill="#F12424"></circle>
          <circle cx="64" cy="70" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_4">
          <path
            d="M43.3127 61.3748C40.8388 60.3499 40.5395 58.1249 43.4349 52.9246C47.8614 50.107 52.48 52.5248 50.603 53.4062C48.7261 54.2876 48.5167 55.215 48.7805 55.3984C48.7805 55.3984 52.1264 57.2856 51.9914 58.8193C51.8563 60.353 50.7534 60.1725 50.4095 60.5483C50.0656 60.9242 46.9579 57.3905 46.9579 57.3905C43.0194 60.1256 45.7867 62.3997 43.3127 61.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M46.9579 57.3905C43.0194 60.1256 45.7867 62.3997 43.3127 61.3748C40.8388 60.3499 40.5395 58.1249 43.4349 52.9246C47.8614 50.107 52.48 52.5248 50.603 53.4062C48.7261 54.2876 48.5167 55.215 48.7805 55.3984M46.9579 57.3905C46.9579 57.3905 50.0656 60.9242 50.4095 60.5483C50.7534 60.1725 51.8563 60.353 51.9914 58.8193C52.1264 57.2856 48.7805 55.3984 48.7805 55.3984M46.9579 57.3905L48.7805 55.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_5"
          d="M57.8415 50.8697C55.5397 49.6375 55.0212 48.864 55.0156 47.3859C55.6658 46.9067 56.0936 46.8372 57.0708 47.3859C58.1402 48.0063 58.783 48.8943 59.9609 50.8697C59.3132 52.8724 58.8954 53.9711 57.3919 55.5979C59.1607 56.9979 59.5374 59.3204 59.9609 59.3306C60.3844 59.3409 57.2313 64.7227 57.0708 65.9666C55.6618 66.1046 55.2293 65.8334 55.0156 64.8053C54.8631 62.4372 55.8294 61.3022 57.8415 59.3306C56.109 58.2104 55.3292 57.4796 55.0156 55.5979C54.9682 53.8552 55.3287 52.8432 57.8415 50.8697Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_5"
          d="M34.5084 66.9457C32.7549 68.7623 31.9667 69.0306 30.7931 68.6159C30.6326 67.8677 30.7219 67.4452 31.4866 66.6812C32.3393 65.8508 33.2601 65.4981 35.2235 64.9506C36.5925 66.1293 37.3225 66.8349 38.1047 68.7124C39.8113 67.4452 41.7796 67.7506 41.9306 67.3548C42.0816 66.959 45.2839 71.4564 46.2158 71.9611C45.8497 73.3266 45.4888 73.6567 44.6017 73.5657C42.673 73.0364 42.0994 71.8042 41.2154 69.3499C39.7428 70.6625 38.9003 71.1888 37.3029 70.9494C35.9054 70.4988 35.2248 69.8719 34.5084 66.9457Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
      <g id="slice3">
        <g id="slice_6">
          <mask id="path-29-inside-6_7_2" fill="white">
            <path
              d="M54 124.1C45.4869 119.58 38.4176 113.079 33.5026 105.25C28.5876 97.421 26 88.5401 26 79.5L82 79.5L54 124.1Z"
            ></path>
          </mask>
          <path
            d="M54 124.1C45.4869 119.58 38.4176 113.079 33.5026 105.25C28.5876 97.421 26 88.5401 26 79.5L82 79.5L54 124.1Z"
            fill="#FDDBA9"
            stroke="#EE9758"
            stroke-width="2"
            mask="url(#path-29-inside-6_7_2)"
          ></path>
        </g>
        <g id="pepperoni_6">
          <circle cx="42" cy="99" r="6" fill="#F12424"></circle>
          <circle cx="42" cy="99" r="6" fill="#F12424"></circle>
        </g>
        <g id="mushroom_5">
          <path
            d="M57.3127 93.3748C54.8388 92.3499 54.5395 90.1249 57.4349 84.9246C61.8614 82.107 66.48 84.5248 64.603 85.4062C62.7261 86.2876 62.5167 87.215 62.7805 87.3984C62.7805 87.3984 66.1264 89.2856 65.9914 90.8193C65.8563 92.353 64.7534 92.1725 64.4095 92.5483C64.0656 92.9242 60.9579 89.3905 60.9579 89.3905C57.0194 92.1256 59.7867 94.3997 57.3127 93.3748Z"
            fill="#E3DDDD"
          ></path>
          <path
            d="M60.9579 89.3905C57.0194 92.1256 59.7867 94.3997 57.3127 93.3748C54.8388 92.3499 54.5395 90.1249 57.4349 84.9246C61.8614 82.107 66.48 84.5248 64.603 85.4062C62.7261 86.2876 62.5167 87.215 62.7805 87.3984M60.9579 89.3905C60.9579 89.3905 64.0656 92.9242 64.4095 92.5483C64.7534 92.1725 65.8563 92.353 65.9914 90.8193C66.1264 89.2856 62.7805 87.3984 62.7805 87.3984M60.9579 89.3905L62.7805 87.3984"
            stroke="black"
          ></path>
        </g>
        <path
          id="pepper_6"
          d="M45.1727 88.6661C46.9594 86.7623 47.8409 86.462 49.27 86.8398C49.5642 87.5919 49.5204 88.0231 48.7373 88.8247C47.8608 89.6968 46.8366 90.0874 44.6233 90.713C42.857 89.5684 41.9042 88.8801 40.7226 87.0063C38.9121 88.3518 36.5712 88.1136 36.4516 88.52C36.3319 88.9264 31.9513 84.4862 30.7915 84.0087C31.0235 82.6121 31.3975 82.2646 32.4458 82.3247C34.7725 82.7912 35.6182 84.0187 37.0009 86.473C38.5319 85.0901 39.4399 84.5264 41.3386 84.7112C43.034 85.1171 43.918 85.7276 45.1727 88.6661Z"
          fill="#1EAA07"
          stroke="#FDDBA9"
        ></path>
        <path
          id="onion_6"
          d="M53.4224 96.617C50.9625 96.0481 50.3269 95.5103 50.0787 94.2906C50.6377 93.7681 51.0459 93.6272 52.0944 93.8898C53.2452 94.1938 54.0214 94.8018 55.5011 96.2038C55.1947 97.9841 54.9652 98.9731 53.7578 100.61C55.7225 101.421 56.4733 103.266 56.8904 103.192C57.3074 103.118 55.0986 108.178 55.1454 109.236C53.7861 109.625 53.3173 109.486 52.9389 108.678C52.4005 106.752 53.1619 105.626 54.8116 103.605C52.9285 103.018 52.0437 102.566 51.4271 101.073C51.0944 99.6431 51.2818 98.737 53.4224 96.617Z"
          fill="#FFFBFB"
          stroke="black"
        ></path>
      </g>
    </g>
  </svg>
</div>

<style>
/* From Uiverse.io by AkshatDaxini  - Tags: loader, github, share, rotate, animated, svg, custom, pizza */
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 1.6;
}

#pizza {
  background-color: transparent;
  transform-origin: center center;
  animation: rotate 45s linear infinite;
  -webkit-animation: rotate 45s linear infinite;
}

#slice1 {
  animation: slice1 4s ease-in-out infinite;
  -webkit-animation: slice1 4s ease-in-out infinite;
}

#slice2 {
  animation: slice2 4s ease-in-out infinite;
  animation-delay: 1s;
  -webkit-animation: slice2 4s ease-in-out infinite;
}

#slice3 {
  animation: slice3 4s ease-in-out infinite;
  animation-delay: 2s;
  -webkit-animation: slice3 4s ease-in-out infinite;
}

#slice4 {
  animation: slice4 4s ease-in-out infinite;
  animation-delay: 3s;
  -webkit-animation: slice4 4s ease-in-out infinite;
}

#slice5 {
  animation: slice5 4s ease-in-out infinite;
  animation-delay: 4s;
  -webkit-animation: slice5 4s ease-in-out infinite;
}

#slice6 {
  animation: slice6 4s ease-in-out infinite;
  animation-delay: 5s;
  -webkit-animation: slice6 4s ease-in-out infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@keyframes slice1 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, 5%);
    -webkit-transform: translate(5%, 5%);
    -moz-transform: translate(5%, 5%);
    -ms-transform: translate(5%, 5%);
    -o-transform: translate(5%, 5%);
  }
}

@keyframes slice2 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(0%, 7%);
    -webkit-transform: translate(0%, 7%);
    -moz-transform: translate(0%, 7%);
    -ms-transform: translate(0%, 7%);
    -o-transform: translate(0%, 7%);
  }
}

@keyframes slice3 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(-5%, 5%);
    -webkit-transform: translate(-5%, 5%);
    -moz-transform: translate(-5%, 5%);
    -ms-transform: translate(-5%, 5%);
    -o-transform: translate(-5%, 5%);
  }
}

@keyframes slice4 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(-5%, 0%);
    -webkit-transform: translate(-5%, 0%);
    -moz-transform: translate(-5%, 0%);
    -ms-transform: translate(-5%, 0%);
    -o-transform: translate(-5%, 0%);
  }
}

@keyframes slice5 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(0%, -3%);
    -webkit-transform: translate(0%, -3%);
    -moz-transform: translate(0%, -3%);
    -ms-transform: translate(0%, -3%);
    -o-transform: translate(0%, -3%);
  }
}

@keyframes slice6 {
  0%,
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, 0%);
    -webkit-transform: translate(5%, 0%);
    -moz-transform: translate(5%, 0%);
    -ms-transform: translate(5%, 0%);
    -o-transform: translate(5%, 0%);
  }
}

</style>
    

 <div class="loader">
     <div class="box-1">
     </div>
     <span>
         Loading.....
     </span>
 </div>
<style>
/* From Uiverse.io by Akshdeep74644 - Tags: loader */
.loader {
  position: relative;
}

.box-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 150px;
  width: 150px;
  background-color: #FFFFFF;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 34%, #FF0000 100%);
  border-radius: 50%;
  animation: rotate 3s linear infinite;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box-1::before {
  content: '';
  position: absolute;
  inset: 15px;
  background: #f5f5f5;
  border-radius: 50%;
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.loader span {
  text-align: center;
  position: absolute;
  top: 65px;
  left: 25px;
  color: black;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 1rem;
  animation: text-animate412 3s linear infinite;
}

@keyframes text-animate412 {

  10% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>

<div class="shake">
<div class="loader"></div>
</div>
<style>
/* From Uiverse.io by Alaner-xs - Tags: loader */
.loader {
 --border-width: 10px;
 --size: 60px;
 border: var(--border-width) solid #f3f3f3;
 border-radius: 50%;
 border-top: var(--border-width) solid #1bbeff;
 border-bottom: var(--border-width) solid #1bbeff;
 border-left: var(--border-width) solid #147ec5;
 border-right: var(--border-width) solid #147ec5;
 width: var(--size);
 height: var(--size);
 animation: spin35112 2s linear infinite;
}

@keyframes spin35112 {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

.shake {
 animation: shake61790 1s linear infinite;
}

@keyframes shake61790 {
 0% {
  transform: skewX(0deg);
 }

 50% {
  transform: skewX(20deg);
 }

 100% {
  transform: skewX(0deg);
 }
}
</style>

<div class="loading">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
<style>
/* From Uiverse.io by Ali-Tahmazi99 - Tags: loader */
.loading {
  width: 60px;
  height: 60px;
  position: relative;
}

.d1 , .d2 {
  border: 5px solid #6c757d;
  border-radius: 50px;
}

.loading .d1 {
  width: 55px;
  height: 55px;
  position: absolute;
  border-left-color: transparent;
  animation: load161 1s linear infinite;
}

.loading .d2 {
  width: 40px;
  height: 40px;
  border-top-color: transparent;
  border-right-color: transparent;
  margin: 7.5px;
  animation: load2812 1.5s linear infinite;
}

@keyframes load161 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes load2812 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}
</style>

<div class="notification">
  <span>Congratulatioins Champion!</span>
  <div id="level">
    <div class="one">↑</div>
    <div id="lvl">Level 10</div>
    <div class="one">↑</div>
  </div>
</div>
<style>
/* From Uiverse.io by ActiveIceDigital - Tags: notification */
@keyframes ud {
  0% {
    transform: translateY(-1px);
    opacity: 0;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }

  100% {
    transform: translateY(-1px);
    opacity: 0;
  }
}

.notification {
  width: 250px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  padding: 5px 15px;
  text-align: center;
  box-shadow: 2px 2px 0px 1px rgba(255, 0, 0, 0.5) inset, 
  -2px -2px 0px 1px rgba(255, 0, 0, 0.8) inset,
  0px 2px 5px 0px rgba(0, 0, 0, .25);
}

#lvl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px;
}

.notification > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#level {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  gap: 5px;
}

.one {
  display: inline-block;
  font-size: 25px;
  line-height: 25px;
  animation: ud 1s ease-in-out infinite;
  color: rgba(255, 0, 0, 0.95);
}
</style>

<div class="notification"> <div class="txt"> Mission passed! <div class="lvl"> 10</div> </div> <button class="ff3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M15.4695 11.2929C15.0789 10.9024 14.4458 10.9024 14.0553 11.2929C13.6647 11.6834 13.6647 12.3166 14.0553 12.7071C14.4458 13.0976 15.0789 13.0976 15.4695 12.7071C15.86 12.3166 15.86 11.6834 15.4695 11.2929Z" fill="currentColor"></path>
  <path d="M16.1766 9.17156C16.5671 8.78103 17.2003 8.78103 17.5908 9.17156C17.9813 9.56208 17.9813 10.1952 17.5908 10.5858C17.2003 10.9763 16.5671 10.9763 16.1766 10.5858C15.7861 10.1952 15.7861 9.56208 16.1766 9.17156Z" fill="currentColor"></path>
  <path d="M19.7121 11.2929C19.3216 10.9024 18.6885 10.9024 18.2979 11.2929C17.9074 11.6834 17.9074 12.3166 18.2979 12.7071C18.6885 13.0976 19.3216 13.0976 19.7121 12.7071C20.1027 12.3166 20.1027 11.6834 19.7121 11.2929Z" fill="currentColor"></path>
  <path d="M16.1766 13.4142C16.5671 13.0237 17.2003 13.0237 17.5908 13.4142C17.9813 13.8048 17.9813 14.4379 17.5908 14.8284C17.2003 15.219 16.5671 15.219 16.1766 14.8284C15.7861 14.4379 15.7861 13.8048 16.1766 13.4142Z" fill="currentColor"></path>
  <path d="M6 13H4V11H6V9H8V11H10V13H8V15H6V13Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C3.13401 5 0 8.13401 0 12C0 15.866 3.13401 19 7 19H17C20.866 19 24 15.866 24 12C24 8.13401 20.866 5 17 5H7ZM17 7H7C4.23858 7 2 9.23858 2 12C2 14.7614 4.23858 17 7 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7Z" fill="currentColor"></path>
</svg> Next </button> </div>
<style>
/* From Uiverse.io by Fujitawa - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  color: black;
  background: white;
  border-radius: 3px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  border: 3px solid #ece0b4;
}

.notification:hover  button.ff3 {
  background-color: #f4e0a6;
}

.notification:hover {
  border-color: #f4e0a6;
}

.notification:hover .lvl {
  border-color: #f4e0a6;
}

button.ff3 {
  background-color: #ece0b4;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  border: 0;
  transition: .5s;
  font-weight: bold;
}

.lvl {
  background: white;
  padding: 6px;
  border-radius: 100px;
  border: 3px solid #ece0b4;
  position: absolute;
  left: -10px;
  transform: scale(.8);
  top: -10px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
} 

</style>

<div class="notification gradient-border">
  <div class="icon">
    ❤️
  </div>
  <div class="message-container">
    <div class="title">Congratulations!</div>
    <div class="message">You've reached a new level
!</div>
  </div>

</div>
<style>
/* From Uiverse.io by Gianluks90 - Tags: notification */
.notification {
  width: 255px;
  height: 60px;
  background: white;
  border-radius: 25px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.icon {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: rgb(236, 236, 236);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}

.message-container {
  display: flex;
  flex-direction: column;
}

.title {
  padding: 2px;
  text-transform: uppercase;
  color: black;
  font-weight: 600;
}

.message {
  padding: 2px;
  color: black;
  font-size: small;
}

.gradient-border {
  --borderSize: 3px;
  position: relative;
  border-radius: var(--borderSize);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderSize));
  left: calc(-1 * var(--borderSize));
  height: calc(100% + var(--borderSize) * 2);
  width: calc(100% + var(--borderSize) * 2);
  background: linear-gradient(75deg, #E50000, #FF8D00, #FFEE00, #008121, #004CFF, #760188);
  border-radius: calc(2 * var(--borderSize));
  z-index: -1;
  animation: gradientAnimation 4s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>

<div class="level-up-notification">
  <div class="confetti"></div>
  <div class="level-up-text">Level Up!</div>
</div>

<div class="confetti-container">
  <div class="confetti">
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: blue"></i>
    <i class="square" style="--speed: 40; --bg: white"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: yellow"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"></i>
    <i class="hexagram" style="--speed: 36; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: green"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 29; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 30; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 34; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: pink"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 21; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: purple"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: cyan"></i>
    <i class="square" style="--speed: 15; --bg: steelblue"></i>
    <i class="square" style="--speed: 10; --bg: yellow"></i>
    <i class="pentagram" style="--speed: 18; --bg: white"></i>
    <i class="rectangle" style="--speed: 29; --bg: green"></i>
    <i class="hexagram" style="--speed: 17; --bg: blue"></i>
    <i class="pentagram" style="--speed: 33; --bg: red"></i>
    <i class="dodecagram" style="--speed: 26; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 24; --bg: pink"> </i>
    <i class="wavy-line" style="--speed: 5; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: purple"></i>
    <i class="rectangle" style="--speed: 17; --bg: green"></i>
    <i class="square" style="--speed: 25; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="wavy-line" style="--speed: 15; --bg: cyan"> </i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 37; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 26; --bg: white"></i>
    <i class="wavy-line" style="--speed: 32; --bg: cyan"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 45; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 23; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 50; --bg: pink"></i>
    <i class="square" style="--speed: 30; --bg: red"></i>
    <i class="pentagram" style="--speed: 18; --bg: red"></i>
    <i class="rectangle" style="--speed: 19; --bg: green"></i>
    <i class="hexagram" style="--speed: 16; --bg: blue"></i>
    <i class="pentagram" style="--speed: 23; --bg: red"></i>
    <i class="dodecagram" style="--speed: 33; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 39; --bg: white"></i>
    <i class="square" style="--speed: 40; --bg: orange"></i>
    <i class="rectangle" style="--speed: 21; --bg: green"></i>
    <i class="square" style="--speed: 14; --bg: white"></i>
    <i class="rectangle" style="--speed: 38; --bg: green"></i>
    <i class="dodecagram" style="--speed: 19; --bg: red"></i>
    <i class="wavy-line" style="--speed: 29; --bg: pink"> </i>
    <i class="hexagram" style="--speed: 34; --bg: white"></i>
    <i class="wavy-line" style="--speed: 17; --bg: indigo"></i>
    <i class="pentagram" style="--speed: 32; --bg: yellow"></i>
    <i class="square" style="--speed: 23; --bg: white"></i>
    <i class="rectangle" style="--speed: 18; --bg: green"></i>
    <i class="dodecagram" style="--speed: 37; --bg: red"></i>
    <i class="wavy-line" style="--speed: 48; --bg: pink"> </i>
    <i class="rectangle" style="--speed: 38; --bg: pink"></i>
    <i class="pentagram" style="--speed: 13; --bg: red"></i>
    <i class="dodecagram" style="--speed: 49; --bg: yellow"></i>
    <i class="wavy-line" style="--speed: 19; --bg: purple"></i>
    <i class="square" style="--speed: 15; --bg: cyan"></i>
  </div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: notification */
.level-up-notification {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #FDD835;
  border-radius: 10px;
  font-weight: bold;
  font-family: "Courier New", monospace;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: scale-up 1.5s ease-in-out forwards, fade-out 0.5s ease-in-out forwards 21.5s;
}

.level-up-text {
  text-align: center;
  color: #fff;
  font-size: 30px;
  padding: 12px 20px;
  font-weight: bold;
  text-shadow: 2px 2px #000;
}

@keyframes confetti {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes scale-up {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.level-up-notification:hover {
  animation: none;
}

.level-up-notification:hover .confetti {
  animation: confetti 0.5s ease-in-out forwards;
}

/* asd */

.confetti-container {
  user-select: none;
  z-index: 10;
}

.confetti {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  /* width: 600px; */
  /* height: 600px; */
  /* overflow: hidden; */
}

.confetti .square {
  width: 1rem;
  height: 1rem;
  background-color: var(--bg);
  transform: rotate(-140deg);
}

.confetti .rectangle {
  width: 1rem;
  height: 0.5rem;
  background-color: var(--bg);
}

.confetti .hexagram {
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 1rem solid var(--bg);
  position: relative;
}

.confetti .hexagram:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 1rem solid var(--bg);
  position: absolute;
  top: 0.33rem;
  left: -0.5rem;
}

.confetti .pentagram {
  width: 0rem;
  height: 0rem;
  display: block;
  margin: 0.5rem 0;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(35deg);
  position: relative;
}

.confetti .pentagram:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-bottom: 0.8rem solid var(--bg);
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  transform: rotate(-35deg);
  position: absolute;
  top: -0.45rem;
  left: -0.65rem;
}

.confetti .pentagram:after {
  content: "";
  width: 0rem;
  height: 0rem;
  display: block;
  border-right: 1rem solid transparent;
  border-bottom: 0.7rem solid var(--bg);
  border-left: 1rem solid transparent;
  transform: rotate(-70deg);
  position: absolute;
  top: 0.03rem;
  left: -1.05rem;
}

.confetti .dodecagram {
  background: var(--bg);
  width: 0.8rem;
  height: 0.8rem;
  position: relative;
}

.confetti .dodecagram:before {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(30deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .dodecagram:after {
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background: var(--bg);
  transform: rotate(60deg);
  position: absolute;
  top: 0;
  left: 0;
}

.confetti .wavy-line {
  position: relative;
}

.confetti .wavy-line::after,
.confetti .wavy-line::before {
  content: "";
  height: 1rem;
  width: 8rem;
  background-size: 2rem 1rem;
  position: absolute;
  left: -9rem;
  transform: rotate(90deg);
}

.confetti .wavy-line::before {
  background-image: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
  top: 1rem;
}

.confetti .wavy-line::after {
  background-image: linear-gradient(
    -45deg,
    transparent,
    transparent 50%,
    var(--bg) 50%,
    transparent 60%
  );
}

.confetti i {
  width: 3rem;
  height: 3rem;
  margin: 0 0.2rem;
  animation-name: confetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(70s / var(--speed));
}

.confetti i:nth-child(even) {
  transform: rotate(90deg);
}

@keyframes confetti {
  0% {
    transform: translateY(-500px);
  }

  100% {
    transform: translateY(500px);
  }
}

</style>

<div class="card">
      <svg height="180px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve" class="metal">
        <path style="fill: #ffc61b" d="M256,512c-76.231,0-138.249-62.018-138.249-138.249c0-76.232,62.018-138.25,138.249-138.25
	c23.8,0,47.273,6.151,67.886,17.79c7.033,3.971,9.515,12.892,5.544,19.927c-3.971,7.033-12.896,9.515-19.927,5.544
	c-16.232-9.166-34.733-14.009-53.503-14.009c-60.102,0-108.999,48.898-108.999,109S195.899,482.751,256,482.751
	s108.999-48.896,108.999-108.999c0-8.077,6.549-14.625,14.625-14.625c8.076,0,14.625,6.548,14.625,14.625
	C394.249,449.982,332.231,512,256,512z"></path>
        <path style="fill: #fee187" d="M256,424.249c-27.845,0-50.498-22.653-50.498-50.498s22.653-50.499,50.498-50.499
	s50.498,22.654,50.498,50.499C306.498,401.596,283.845,424.249,256,424.249z"></path>
        <g>
          <path style="fill: #ffc61b" d="M256,438.874c-35.909,0-65.123-29.214-65.123-65.123s29.215-65.125,65.123-65.125
		s65.123,29.215,65.123,65.124S291.908,438.874,256,438.874z M256,337.877c-19.781,0-35.873,16.092-35.873,35.874
		c0,19.781,16.092,35.873,35.873,35.873s35.873-16.092,35.873-35.873C291.873,353.969,275.781,337.877,256,337.877z"></path>
          <path style="fill: #ffc61b" d="M316.661,280.679c-2.437,0-4.905-0.61-7.178-1.893c-16.262-9.182-34.757-14.036-53.483-14.036
		s-37.221,4.853-53.483,14.036c-6.986,3.943-15.846,1.525-19.857-5.423l-58.24-100.876c-4.039-6.995-1.642-15.94,5.353-19.978
		c6.995-4.038,15.94-1.642,19.978,5.353l51.383,88.997c17.255-7.462,35.969-11.359,54.868-11.359s37.613,3.899,54.868,11.359
		l49.423-85.604V29.25h-25.8c-8.076,0-14.625-6.548-14.625-14.625S326.416,0,334.492,0h40.426c8.076,0,14.625,6.548,14.625,14.625
		v150.55c0,2.567-0.676,5.09-1.96,7.313l-58.24,100.876C326.632,278.053,321.717,280.679,316.661,280.679z"></path>
        </g>
        <path style="fill: #fee187" d="M256,250.126c0.41,0,0.812,0.026,1.22,0.031V14.625H137.084v150.55l58.242,100.876
	C213.253,255.929,233.942,250.126,256,250.126z"></path>
        <path style="fill: #ffc61b" d="M195.338,280.679c-5.057,0-9.971-2.625-12.679-7.314l-58.24-100.876
	c-1.284-2.223-1.96-4.746-1.96-7.313V14.625C122.459,6.548,129.008,0,137.084,0H257.22c8.076,0,14.625,6.548,14.625,14.625v235.531
	c0,3.905-1.562,7.648-4.338,10.396c-2.776,2.747-6.511,4.291-10.441,4.23c-0.309-0.003-0.616-0.013-0.923-0.023l-0.211-0.007
	c-18.662,0-37.155,4.854-53.417,14.037C200.243,280.069,197.774,280.679,195.338,280.679z M151.709,161.256l49.423,85.604
	c13.161-5.691,27.171-9.309,41.462-10.706V29.25h-90.885V161.256L151.709,161.256z"></path>
      </svg>
      <span class="text-1">Congratulations</span>
      <span class="text-2">you've leveled up</span>
    </div>



<style>
/* From Uiverse.io by John-CFO - Tags: notification */
.card {
  color: #090909;
  height: 12rem;
  width: 20rem;
  border-radius: 1rem;
  background: rgb(63, 94, 251);
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 223, 1) 100%
  );
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.text-1 {
  margin: 0;
  font-family: fantasy;
  font-size: 35px;
  padding-bottom: 5px;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.text-2 {
  margin: 0;
  padding-bottom: 2rem;
  font-family: fantasy;
  font-size: 25px;
  color: #fff;
}

.text-1,
.text-2 {
  animation: scaling 5s infinite;
}

@keyframes scaling {
  0% {
    transform: scale(1);
    opacity: 1.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.metal {
  margin-top: 10px;
  width: 60px;
  animation: spin 5.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
}
</style>

<div class="notification">
  	<div id="goku">
      <div class="head"></div>
      <div class="body"></div>
      <div class="leg"></div>
      <div class="shadow"></div>
	  </div>

  <span class="dirt">
  
  <div class="text">
    <span class="font hover">Level up!</span>
    <span class="font-text hover">Your power:</span>
    <span class="font-power hover">+8000!</span>
  </div>
  <div class="parchment">
  </div>
</span></div>
  

<style>
/* From Uiverse.io by M4NT - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  background: #18532c;
  border-radius: 14px;
  margin-top: 250px;
  user-select: none;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.notification:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

@-webkit-keyframes head {
  0% {
    top: 0px;
  }

  50% {
    top: 6px;
  }

  100% {
    top: 0px;
  }
}

@-webkit-keyframes body {
  0% {
    top: 220px;
  }

  50% {
    top: 223px;
  }

  100% {
    top: 220px;
  }
}

@-webkit-keyframes leg {
  0% {
    top: 300px;
  }

  50% {
    top: 300px;
  }

  100% {
    top: 300px;
  }
}

@keyframes head {
  0% {
    top: 0px;
  }

  50% {
    top: 6px;
  }

  100% {
    top: 0px;
  }
}

@keyframes body {
  0% {
    top: 220px;
  }

  50% {
    top: 223px;
  }

  100% {
    top: 220px;
  }
}

@keyframes leg {
  0% {
    top: 300px;
  }

  50% {
    top: 300px;
  }

  100% {
    top: 300px;
  }
}

#goku {
  margin-top: -220px;
  margin-left: -50px;
  background: #fff;
  position: relative;
  -ms-transform: scale(0.5);
  /* IE 9 */
  -webkit-transform: scale(0.5);
  /* Chrome, Safari, Opera */
  transform: scale(0.5);
  z-index: 999999;
}

.shadow {
  position: absolute;
  top: 450px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #005e2f;
  box-shadow: -120px -10px #176d42, -110px -10px #005e2f, -100px -10px #005e2f, -90px -10px #005e2f, -80px -10px #005e2f, -70px -10px #005e2f, -60px -10px #005e2f, -50px -10px #005e2f, -40px -10px #005e2f, -30px -10px #005e2f, -20px -10px #005e2f, -10px -10px #005e2f, 0px -10px #005e2f, 10px -10px #005e2f, 20px -10px #005e2f, 30px -10px #005e2f, 40px -10px #005e2f, 50px -10px #005e2f, 60px -10px #005e2f, -130px 0px #176d42, -120px 0px #005e2f, -110px 0px #005e2f, -100px 0px #005e2f, -90px 0px #005e2f, -80px 0px #005e2f, -70px 0px #005e2f, -60px 0px #005e2f, -50px 0px #005e2f, -40px 0px #005e2f, -30px 0px #005e2f, -20px 0px #005e2f, -10px 0px #005e2f, 0px 0px #005e2f, 10px 0px #005e2f, 20px 0px #005e2f, 30px 0px #005e2f, 40px 0px #005e2f, 50px 0px #005e2f, 60px 0px #005e2f, -130px 10px #176d42, -120px 10px #005e2f, -110px 10px #005e2f, -100px 10px #005e2f, -90px 10px #005e2f, -80px 10px #005e2f, -70px 10px #005e2f, -60px 10px #005e2f, -50px 10px #005e2f, -40px 10px #005e2f, -30px 10px #005e2f, -20px 10px #005e2f, -10px 10px #005e2f, 0px 10px #005e2f, 10px 10px #005e2f, 20px 10px #005e2f, 30px 10px #005e2f, 40px 10px #005e2f, 50px 10px #005e2f, 60px 10px #005e2f, -130px 20px #176d42, -120px 20px #005e2f, -110px 20px #005e2f, -100px 20px #005e2f, -90px 20px #005e2f, -80px 20px #005e2f, -70px 20px #005e2f, -60px 20px #005e2f, -50px 20px #005e2f, -40px 20px #005e2f, -30px 20px #005e2f, -10px 20px #005e2f, 0px 20px #005e2f, 10px 20px #005e2f, 20px 20px #005e2f, 30px 20px #005e2f, 40px 20px #005e2f, 50px 20px #005e2f, 60px 20px #005e2f, 70px 20px #005e2f, -120px 30px #005e2f, -110px 30px #005e2f, -100px 30px #005e2f, -90px 30px #005e2f, -80px 30px #005e2f, -70px 30px #005e2f, -60px 30px #005e2f, -50px 30px #005e2f, -10px 0px transparent;
}

.leg {
  -webkit-animation: leg 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: leg 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 20;
  top: 300px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #000;
  box-shadow: -50px 0px #000, -40px 0px #000, -30px 0px #000, -20px 0px #000, -10px 0px #000, 10px 0px #000, 20px 0px #000, 30px 0px #000, -50px 10px #000, -40px 10px #001e3d, -30px 10px #0055aa, -20px 10px #0080ff, -10px 10px #000, 0px 10px #0080ff, 10px 10px #000, 20px 10px #0055aa, 30px 10px #000, -50px 20px #000, -40px 20px #000, -30px 20px #000, -20px 20px #000, -10px 20px #0055aa, 0px 20px #000, 10px 20px #001e3d, 20px 20px #000, 30px 20px #000, 40px 20px #000, -70px 30px #000, -60px 30px #000, -50px 30px #3d1e00, -40px 30px #aa5500, -30px 30px #aa5500, -20px 30px #000, -10px 30px #0080ff, 0px 30px #001e3d, 10px 30px #0055aa, 20px 30px #000, 30px 30px #3d1e00, 40px 30px #000, -70px 40px #000, -60px 40px #000, -50px 40px #aa5500, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0080ff, 0px 40px #001e3d, 10px 40px #0080ff, 20px 40px #000, 30px 40px #3d1e00, 40px 40px #000, -80px 50px #000, -70px 50px #000, -60px 50px #000, -50px 50px #ff7700, -40px 50px #ff7700, -30px 50px #ff7700, -20px 50px #000, -10px 50px #0080ff, 0px 50px #001e3d, 10px 50px #0080ff, 20px 50px #000, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -80px 60px #000, -70px 60px #aa5500, -60px 60px #aa5500, -50px 60px #ff7700, -40px 60px #ff7700, -30px 60px #ff7700, -20px 60px #000, -10px 60px #0055aa, 0px 60px #001e3d, 10px 60px #0080ff, 20px 60px #000, 30px 60px #aa5500, 40px 60px #3d1e00, 50px 60px #000, -80px 70px #000, -70px 70px #aa5500, -60px 70px #ff7700, -50px 70px #ff7700, -40px 70px #ff7700, -30px 70px #ff7700, -20px 70px #000, -10px 70px #001e3d, 0px 70px #001e3d, 10px 70px #0080ff, 20px 70px #000, 30px 70px #aa5500, 40px 70px #aa5500, 50px 70px #000, -80px 80px #000, -70px 80px #3d1e00, -60px 80px #aa5500, -50px 80px #ff7700, -40px 80px #ff7700, -30px 80px #aa5500, -20px 80px #000, -10px 80px #000, 0px 80px #3d1e00, 10px 80px #000, 20px 80px #aa5500, 30px 80px #aa5500, 40px 80px #aa5500, 50px 80px #000, -90px 90px #000, -80px 90px #aa5500, -70px 90px #3d1e00, -60px 90px #3d1e00, -50px 90px #aa5500, -40px 90px #aa5500, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #3d1e00, 10px 90px #3d1e00, 20px 90px #3d1e00, 30px 90px #aa5500, 40px 90px #aa5500, 50px 90px #000, -90px 100px #000, -80px 100px #ff7700, -70px 100px #aa5500, -60px 100px #aa5500, -50px 100px #aa5500, -40px 100px #3d1e00, -30px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #3d1e00, 20px 100px #aa5500, 30px 100px #aa5500, 40px 100px #3d1e00, 50px 100px #000, -100px 110px #000, -90px 110px #000, -80px 110px #000, -70px 110px #ff7700, -60px 110px #ff7700, -50px 110px #ff7700, -40px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #3d1e00, 30px 110px #3d1e00, 40px 110px #000, -100px 120px #000, -90px 120px #001e3d, -80px 120px #0080ff, -70px 120px #ffbb00, -60px 120px #0080ff, -50px 120px #000, -40px 120px #000, -10px 120px #000, 0px 120px #001e3d, 10px 120px #001e3d, 20px 120px #0080ff, 30px 120px #ffbb00, 40px 120px #000, -100px 130px #000, -90px 130px #0055aa, -80px 130px #ffff00, -70px 130px #ffbb00, -60px 130px #0055aa, -50px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #001e3d, 20px 130px #000, 30px 130px #ff0000, 40px 130px #000, -110px 140px #000, -100px 140px #0055aa, -90px 140px #ff0000, -80px 140px #ff0000, -70px 140px #001e3d, -60px 140px #001e3d, -50px 140px #000, -10px 140px #000, 0px 140px #3d1e00, 10px 140px #ff0000, 20px 140px #0055aa, 30px 140px #0055aa, 40px 140px #ffbb00, 50px 140px #000, -110px 150px #000, -100px 150px #0055aa, -90px 150px #ffbb00, -80px 150px #0080ff, -70px 150px #ff0000, -60px 150px #000, 0px 150px #000, 10px 150px #001e3d, 20px 150px #0055aa, 30px 150px #0055aa, 40px 150px #0055aa, 50px 150px #ffbb00, 60px 150px #000, -110px 160px #000, -100px 160px #001e3d, -90px 160px #aa5500, -80px 160px #0080ff, -70px 160px #0080ff, -60px 160px #000, 0px 160px #000, 10px 160px #000, 20px 160px #000, 30px 160px #000, 40px 160px #000, 50px 160px #000, 60px 160px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #000, -60px 170px #000;
}

.body {
  -webkit-animation: body 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: body 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  top: 220px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: transparent;
  box-shadow: -90px 0px #000, -80px 0px #3d1e00, -70px 0px #3d1e00, -60px 0px #aa5500, -50px 0px #aa5500, 40px 0px #000, -100px 10px #000, -90px 10px #001e3d, -80px 10px #0080ff, -70px 10px #0080ff, -60px 10px #3d1e00, -50px 10px #ff7700, -40px 10px #aa5500, 30px 10px #aa5500, 40px 10px #000, -100px 20px #000, -90px 20px #000, -80px 20px #0055aa, -70px 20px #0055aa, -60px 20px #0080ff, -50px 20px #ff7700, -40px 20px #ff7700, -30px 20px #000, -20px 20px #c66b49, -10px 20px #ffbb80, 0px 20px #c66b49, 10px 20px #ffbb80, 20px 20px #000, 30px 20px #ff7700, 40px 20px #000, -110px 30px #000, -100px 30px #3d1e00, -90px 30px #c66b49, -80px 30px #000, -70px 30px #0055aa, -60px 30px #0055aa, -50px 30px #aa5500, -40px 30px #ff7700, -30px 30px #aa5500, -20px 30px #0055aa, -10px 30px #0080ff, 0px 30px #0080ff, 10px 30px #0080ff, 20px 30px #000, 30px 30px #ff7700, 40px 30px #000, -110px 40px #000, -100px 40px #c66b49, -90px 40px #c66b49, -80px 40px #c66b49, -70px 40px #000, -60px 40px #000, -50px 40px #000, -40px 40px #ff7700, -30px 40px #ff7700, -20px 40px #000, -10px 40px #0055aa, 0px 40px #0055aa, 10px 40px #0080ff, 20px 40px #000, 30px 40px #808080, 40px 40px #000, -110px 50px #000, -100px 50px #c66b49, -90px 50px #ffbb80, -80px 50px #ffbb80, -70px 50px #000, -60px 50px #000, -50px 50px #3d1e00, -40px 50px #aa5500, -30px 50px #ff7700, -20px 50px #ff7700, -10px 50px #000, 0px 50px #0080ff, 10px 50px #000, 20px 50px #808080, 30px 50px #aa5500, 40px 50px #000, 50px 50px #000, -120px 60px #000, -110px 60px #c66b49, -100px 60px #3d1e00, -90px 60px #ffbb80, -80px 60px #3d1e00, -70px 60px #000, -60px 60px #000, -50px 60px #c66b49, -40px 60px #000, -30px 60px #aa5500, -20px 60px #ff7700, -10px 60px #ff7700, 0px 60px #000, 10px 60px #ff7700, 20px 60px #808080, 30px 60px #000, 40px 60px #c66b49, 50px 60px #000, -120px 70px #000, -110px 70px #0055aa, -100px 70px #c66b49, -90px 70px #c66b49, -80px 70px #3d1e00, -70px 70px #c66b49, -60px 70px #c66b49, -50px 70px #000, -40px 70px #3d1e00, -30px 70px #3d1e00, -20px 70px #aa5500, -10px 70px #ff7700, 0px 70px #ff7700, 10px 70px #ff7700, 20px 70px #aa5500, 30px 70px #000, 40px 70px #ffbb80, 50px 70px #000, -120px 80px #000, -110px 80px #0055aa, -100px 80px #0080ff, -90px 80px #0055aa, -80px 80px #000, 40px 80px #0080ff, 50px 80px #000, -120px 90px #000, -110px 90px #0055aa, -100px 90px #0080ff, -90px 90px #001e3d, 40px 90px #0055aa, 50px 90px #0080ff, 60px 90px #000, -130px 100px #000, -120px 100px #c66b49, -110px 100px #c66b49, -100px 100px #ffbb80, -90px 100px #c66b49, -80px 100px #3d1e00, 50px 100px #ffbb80, 60px 100px #000, -130px 110px #000, -120px 110px #c66b49, -110px 110px #ffbb80, -100px 110px #ffbb80, -90px 110px #ffbb80, -80px 110px #ffbb80, 50px 110px #ffbb80, 60px 110px #000, -130px 120px #000, -120px 120px #c66b49, -110px 120px #ffbb80, -100px 120px #ffbb80, -90px 120px #000, -80px 120px #c66b49, 50px 120px #c66b49, 60px 120px #000, -130px 130px #000, -120px 130px #c66b49, -110px 130px #000, -100px 130px #ffbb80, -90px 130px #000, -120px 140px #000, -110px 140px #000, -100px 140px #c66b49, -90px 140px #000, -100px 150px #000, -90px 150px #c66b49, -90px 160px #000;
}

.head {
  -webkit-animation: head 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: head 1s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #000;
  box-shadow: 10px 0px #000, 20px 0px #000, 30px 0px #000, 40px 0px #000, 50px 0px #000, -20px 10px #000, -10px 10px #000, 0px 10px #000, 10px 10px #000, 20px 10px #000, 30px 10px #000, -30px 20px #000, -20px 20px #000, -10px 20px #000, 0px 20px #000, 10px 20px #000, 20px 20px #000, -40px 30px #000, -30px 30px #000, -20px 30px #000, -10px 30px #000, 0px 30px #000, 10px 30px #000, 20px 30px #000, -40px 40px #000, -30px 40px #000, -20px 40px #000, -10px 40px #000, 0px 40px #000, 10px 40px #000, 40px 40px #000, 50px 40px #000, 60px 40px #000, 70px 40px #000, -50px 50px #000, -40px 50px #000, -30px 50px #000, -20px 50px #000, -10px 50px #000, 0px 50px #000, 10px 50px #000, 30px 50px #000, 40px 50px #000, 50px 50px #000, 60px 50px #000, 70px 50px #000, 80px 50px #000, 90px 50px #000, -50px 60px #000, -40px 60px #000, -30px 60px #000, -20px 60px #000, -10px 60px #000, 0px 60px #000, 10px 60px #000, 20px 60px #000, 30px 60px #000, 40px 60px #000, 50px 60px #000, 60px 60px #000, 70px 60px #000, 80px 60px #000, 90px 60px #000, 100px 60px #000, -50px 70px #000, -40px 70px #000, -30px 70px #000, -20px 70px #000, -10px 70px #000, 0px 70px #000, 10px 70px #000, 20px 70px #000, 30px 70px #000, 40px 70px #000, 50px 70px #000, 60px 70px #000, 70px 70px #000, 80px 70px #000, 90px 70px #000, 100px 70px #000, 110px 70px #000, -50px 80px #000, -40px 80px #000, -30px 80px #000, -20px 80px #000, -10px 80px #000, 0px 80px #000, 10px 80px #000, 20px 80px #000, 30px 80px #000, 40px 80px #000, 50px 80px #000, 60px 80px #000, 70px 80px #000, 80px 80px #000, 90px 80px #000, 100px 80px #000, 110px 80px #000, 120px 80px #000, -70px 90px #000, -60px 90px #000, -50px 90px #000, -40px 90px #000, -30px 90px #000, -20px 90px #000, -10px 90px #000, 0px 90px #000, 10px 90px #000, 20px 90px #000, 30px 90px #000, 40px 90px #000, 50px 90px #000, 60px 90px #000, 70px 90px #000, 80px 90px #000, 90px 90px #000, 100px 90px #000, 110px 90px #000, 120px 90px #000, -80px 100px #000, -70px 100px #000, -60px 100px #000, -50px 100px #000, -40px 100px #000, -30px 100px #000, -20px 100px #000, -10px 100px #000, 0px 100px #000, 10px 100px #000, 20px 100px #000, 30px 100px #000, 40px 100px #000, 50px 100px #000, 60px 100px #000, 70px 100px #000, 80px 100px #000, 90px 100px #000, -90px 110px #000, -80px 110px #000, -70px 110px #000, -60px 110px #000, -50px 110px #000, -40px 110px #000, -30px 110px #000, -20px 110px #000, -10px 110px #000, 0px 110px #000, 10px 110px #000, 20px 110px #000, 30px 110px #000, 40px 110px #000, 50px 110px #000, 60px 110px #000, 70px 110px #000, -90px 120px #000, -80px 120px #000, -70px 120px #000, -60px 120px #000, -50px 120px #000, -40px 120px #000, -30px 120px #000, -20px 120px #000, -10px 120px #000, 0px 120px #000, 10px 120px #000, 20px 120px #000, 30px 120px #000, 40px 120px #000, 50px 120px #000, 60px 120px #000, -130px 130px #000, -120px 130px #000, -110px 130px #000, -100px 130px #000, -90px 130px #000, -80px 130px #000, -70px 130px #000, -60px 130px #000, -50px 130px #000, -40px 130px #000, -30px 130px #000, -20px 130px #000, -10px 130px #000, 0px 130px #000, 10px 130px #000, 20px 130px #000, 30px 130px #000, 40px 130px #000, 50px 130px #000, 60px 130px #000, 70px 130px #000, 80px 130px #000, -110px 140px #000, -100px 140px #000, -90px 140px #000, -80px 140px #000, -70px 140px #000, -60px 140px #000, -50px 140px #000, -40px 140px #000, -30px 140px #000, -20px 140px #000, -10px 140px #000, 0px 140px #c66b49, 10px 140px #000, 20px 140px #000, 30px 140px #000, 40px 140px #000, 50px 140px #000, 60px 140px #000, 70px 140px #000, 80px 140px #000, 90px 140px #000, 100px 140px #000, -130px 150px #000, -120px 150px #000, -110px 150px #000, -100px 150px #000, -90px 150px #000, -80px 150px #000, -70px 150px #000, -60px 150px #000, -50px 150px #000, -40px 150px #c66b49, -30px 150px #000, -20px 150px #000, -10px 150px #000, 0px 150px #c66b49, 10px 150px #c66b49, 20px 150px #c66b49, 30px 150px #000, 40px 150px #000, 50px 150px #000, 60px 150px #000, 70px 150px #000, 80px 150px #000, 90px 150px #000, 100px 150px #000, 110px 150px #000, -150px 160px #000, -140px 160px #000, -130px 160px #000, -120px 160px #000, -110px 160px #000, -100px 160px #000, -90px 160px #000, -80px 160px #000, -70px 160px #000, -60px 160px #000, -50px 160px #000, -40px 160px #c66b49, -30px 160px #c66b49, -20px 160px #000, -10px 160px #000, 0px 160px #c66b49, 10px 160px #ffbb80, 20px 160px #ffbb80, 30px 160px #c66b49, 40px 160px #000, 50px 160px #000, 60px 160px #000, 70px 160px #000, 80px 160px #000, -140px 170px #000, -130px 170px #000, -120px 170px #000, -110px 170px #000, -100px 170px #000, -90px 170px #000, -80px 170px #000, -70px 170px #ffbb80, -60px 170px #000, -50px 170px #000, -40px 170px #000, -30px 170px #000, -20px 170px #000, -10px 170px #000, 0px 170px #ffbb80, 10px 170px #ffbb80, 20px 170px #ffbb80, 30px 170px #ffbb80, 40px 170px #c66b49, 50px 170px #000, 60px 170px #000, -120px 180px #000, -110px 180px #000, -100px 180px #000, -90px 180px #000, -80px 180px #000, -70px 180px #ffbb80, -60px 180px #000, -50px 180px #47261a, -40px 180px #000, -30px 180px #bbb, -20px 180px #bbb, -10px 180px #000, 0px 180px #000, 10px 180px #ffbb80, 20px 180px #ffbb80, 30px 180px #000, 40px 180px #000, 50px 180px #000, 60px 180px #000, -130px 190px #000, -120px 190px #000, -110px 190px #000, -100px 190px #000, -90px 190px #000, -80px 190px #000, -70px 190px #c66b49, -60px 190px #000, -50px 190px #47261a, -40px 190px #c66b49, -30px 190px #bbb, -20px 190px #fff, -10px 190px #555555, 0px 190px #c66b49, 10px 190px #ffbb80, 20px 190px #ffbb80, 30px 190px #c66b49, 40px 190px #000, -100px 200px #000, -90px 200px #000, -80px 200px #000, -70px 200px #000, -60px 200px #000, -50px 200px #47261a, -40px 200px #c66b49, -30px 200px #c66b49, -20px 200px #ffbb80, -10px 200px #ffbb80, 0px 200px #ffbb80, 10px 200px #ffbb80, 20px 200px #ffbb80, 30px 200px #c66b49, 40px 200px #000, -110px 210px #000, -100px 210px #bba578, -90px 210px #000, -80px 210px #000, -70px 210px #000, -60px 210px #000, -50px 210px #000, -40px 210px #47261a, -30px 210px #c66b49, -20px 210px #ffbb80, -10px 210px #ffbb80, 0px 210px #ffbb80, 10px 210px #ffbb80, 20px 210px #c66b49, 30px 210px #000, -40px 220px #000, -30px 220px #000, -20px 220px #c66b49, -10px 220px #ffbb80, 0px 220px #ffbb80, 10px 220px #c66b49, 20px 220px #000, 30px 220px #000, -30px 230px #000, -20px 230px #000, -10px 230px #000, 0px 230px #000, 10px 230px #000, 20px 230px #000;
}

.font {
  font-size: 16px;
  font-family: 'VT323', monospace;
  margin-bottom: 25px;
  z-index: 999999;
}

.font-text {
  font-size: 10px;
  font-family: 'VT323', monospace;
}

.font-power {
  font-family: 'VT323', monospace;
  font-weight: 900;
  z-index: 999999;
}

.text {
  font-size: 22px;
  color: #000;
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  margin-left: 160px;
  text-align: center;
  z-index: 999999;
}

.parchment {
  background: #FFFCD3;
  border: 1px dashed #E99C54;
  width: 100px;
  height: 100px;
  margin-left: 155px;
  margin-top: -90px;
  border-radius: 5px;
}

.parchment {
  /* -xpedu-transform: scale(1.3); */
  /* -ms-transform: scale(1.3); */
  /* transform: scale(1.05); */
  z-index: -999 !important;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.parchment:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

.font-text {
  -xpedu-transform: scale(1.1);
  -ms-transform: scale(1.3);
  transform: scale(1.1);
  z-index: 99999;
}

.hover {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
}

.hover:hover {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

.font-power:hover {
  color: #ff7700;
  text-decoration: wavy;
}

.font:hover {
  color: #ffbb00;
}
</style>

<div class="notification"><span class="star">★</span> <span class="text">New level</span> <span class="star">★</span></div>
<style>
/* From Uiverse.io by MazontheMoon - Tags: notification */
.notification {
  position: relative;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: Verdana;
  color: white;
  font-size: 16px;
  border-radius: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 0.5rem;
  overflow: hidden;
  background-color: #840f00;
  -webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
    0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
  box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
    0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
}

.notification:hover {
  top: 2px;
  background: radial-gradient(hsl(6, 100%, 18%), hsl(6, 100%, 16%));
  -webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
  box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
    0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
    0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
}

.star {
  padding: 0.5rem;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-animation: fade 2s ease-in 1s infinite;
  animation: fade 2s ease-in 1s infinite;
}

@-webkit-keyframes fade {
  0% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  50% {
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes fade {
  0% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  50% {
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    color: rgba(0, 0, 0, 0.9);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}


</style>

<div class="level-up-content">
    <div class="level-up-content">
        <div class="level-up">
            <span class="leyend">Level Up!</span>
        </div>
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <span class="world">world 1-1</span>

        
        <div class="suggestion">
            <span>Reload or click ↓</span>
        </div>
        
    </div>
</div>

<style>
/* From Uiverse.io by MijailVillegas - Tags: notification */
/*Mijail Villegas - Bear
Me gusta  la estética retro de los level ups*/

.level-up-content {
  display: grid;
  width: 200px;
  height: 70px;
  padding: 10px;
  align-items: center;
  justify-items: center;
  align-content: center;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  margin: auto;
}

.progress-bar {
  background-color: #ddd;
  height: 20px;
  margin: 10px 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  text-align: center;
  font-size: 1em;
}

.progress {
  animation: progress-animation 2s ease-out forwards;
  background-color: #000000;
  height: 100%;
  width: 0%;
  z-index: 1;
}

.progress::before {
  content: "";
  display: block;
  color: #ddd;
  padding-top: 3px;
  height: 20px;
  animation: progress-xp 2.1s ease-out forwards;
}

.progress::after {
  content: "+220xp";
  display: block;
  color: rgb(0, 255, 0);
  position: absolute;
  padding-top: 3px;
  z-index: 999;
  opacity: 0;
  animation: add-xp 2s cubic-bezier(0, 0.92, 0.05, 1.07) forwards;
}

.span-content::before {
  display: block;
  color: #ddd;
  margin-left: auto;
  height: 20px;
}

.level-up {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.level-up .leyend {
  font-size: 1.2em;
  animation: level-up-animation 1s cubic-bezier(0, 0.62, 0, 0.97) forwards 2s;
  opacity: 0;
  transform: translateY(100%);
  filter: drop-shadow(4px 4px 0px black);
}

.level-up-content:hover {
  cursor: pointer;
}

.level-up-content:hover .leyend {
  opacity: 1;
  transform: translateY(100%);
  background: #a11a1a;
  animation: grow-up 1s ease-in-out forwards infinite;
}

.leyend::before {
  content: "lvl 5";
  display: block;
  color: #ddd;
  padding-top: 3px;
  font-size: 0.5em;
  height: 10px;
}

.level-up-content .world {
  font-weight: 900;
  animation: blink 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes add-xp {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }

  60% {
    opacity: 1;
  }

  to {
    transform: translateY(-230%);
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    color: black;
  }

  to {
    color: white;
  }
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }

  65% {
    width: 100%;
  }

  100% {
    width: 100%;
  }
}

@keyframes progress-xp {
  0% {
    content: "0xp";
  }

  5% {
    content: "+5xp";
  }

  10% {
    content: "+10xp";
  }

  15% {
    content: "+35xp";
  }

  22% {
    content: "+52xp";
  }

  25% {
    content: "+75xp";
  }

  30% {
    content: "+90xp";
  }

  38% {
    content: "+118xp";
  }

  40% {
    content: "+162xp";
  }

  45% {
    content: "+195xp";
  }

  50% {
    content: "+200xp";
  }

  65% {
    content: "+220xp";
  }

  80% {
    content: "+220xp";
  }

  100% {
    content: "NEW LEVEL!";
  }
}

@keyframes level-up-animation {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
    background: #a11a1a;
  }
}

@keyframes grow-up {
  0% {
    transform: scale(110%);
  }

  12% {
    transform: scale(90%);
  }

  25% {
    transform: scale(100%);
  }

  37% {
    transform: scale(115%);
  }

  50% {
    transform: scale(110%);
  }

  75% {
    transform: scale(130%);
  }

  to {
    transform: scale(115%);
  }
}

/* you can delete this part */
.suggestion {
  font-size: 0.7em;
  position: absolute;
  color: #9b9b9b;
  display: block;
  top: 80%;
  left: 60%;
}
/**/
</style>

<div class="main">  
  <div class="mario_bin"></div>
  <div class="mario_run">
    <div class="mario_run1"></div>
  </div>
  <div class="walls">
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
  </div>
  <div class="text"></div> 
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: animation, notification, pixelart, mario */
.main {
  width: 40em;
  height: 25.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mario_run {
  position: relative;
  left: -28em;
  top: -1em;
  width: 5px;
  height: 5px;
  animation: 2s move infinite linear;
}

.mario_run1 {
  box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  height: 5px;
  width: 5px;
  position: relative;
  animation: 2s run infinite step-end;
}

.mario_bin {
  box-shadow: 10px 40px 0 0 rgba(0, 0, 0, 1), 15px 40px 0 0 rgba(0, 0, 0, 1), 20px 40px 0 0 rgba(0, 0, 0, 1), 25px 40px 0 0 rgba(0, 0, 0, 1), 30px 40px 0 0 rgba(0, 0, 0, 1), 35px 40px 0 0 rgba(0, 0, 0, 1), 40px 40px 0 0 rgba(0, 0, 0, 1), 45px 40px 0 0 rgba(0, 0, 0, 1), 50px 40px 0 0 rgba(0, 0, 0, 1), 55px 40px 0 0 rgba(0, 0, 0, 1), 60px 40px 0 0 rgba(0, 0, 0, 1), 65px 40px 0 0 rgba(0, 0, 0, 1), 70px 40px 0 0 rgba(0, 0, 0, 1), 75px 40px 0 0 rgba(0, 0, 0, 1), 80px 40px 0 0 rgba(0, 0, 0, 1), 85px 40px 0 0 rgba(0, 0, 0, 1), 90px 40px 0 0 rgba(0, 0, 0, 1), 95px 40px 0 0 rgba(0, 0, 0, 1), 10px 45px 0 0 rgba(0, 0, 0, 1), 15px 45px 0 0 rgba(146,202,65,1), 20px 45px 0 0 rgba(146,202,65,1), 25px 45px 0 0 rgba(146,202,65,1), 30px 45px 0 0 rgba(146,202,65,1), 35px 45px 0 0 rgba(146,202,65,1), 40px 45px 0 0 rgba(146,202,65,1), 45px 45px 0 0 rgba(146,202,65,1), 50px 45px 0 0 rgba(146,202,65,1), 55px 45px 0 0 rgba(146,202,65,1), 60px 45px 0 0 rgba(146,202,65,1), 65px 45px 0 0 rgba(146,202,65,1), 70px 45px 0 0 rgba(146,202,65,1), 75px 45px 0 0 rgba(146,202,65,1), 80px 45px 0 0 rgba(146,202,65,1), 85px 45px 0 0 rgba(146,202,65,1), 90px 45px 0 0 rgba(146,202,65,1), 95px 45px 0 0 rgba(0, 0, 0, 1), 10px 50px 0 0 rgba(0, 0, 0, 1), 15px 50px 0 0 rgba(76,165,47,1), 20px 50px 0 0 rgba(76,165,47,1), 25px 50px 0 0 rgba(76,165,47,1), 30px 50px 0 0 rgba(76,165,47,1), 35px 50px 0 0 rgba(76,165,47,1), 40px 50px 0 0 rgba(146,202,65,1), 45px 50px 0 0 rgba(146,202,65,1), 50px 50px 0 0 rgba(146,202,65,1), 55px 50px 0 0 rgba(146,202,65,1), 60px 50px 0 0 rgba(76,165,47,1), 65px 50px 0 0 rgba(76,165,47,1), 70px 50px 0 0 rgba(76,165,47,1), 75px 50px 0 0 rgba(76,165,47,1), 80px 50px 0 0 rgba(76,165,47,1), 85px 50px 0 0 rgba(76,165,47,1), 90px 50px 0 0 rgba(76,165,47,1), 95px 50px 0 0 rgba(0, 0, 0, 1), 10px 55px 0 0 rgba(0, 0, 0, 1), 15px 55px 0 0 rgba(146,202,65,1), 20px 55px 0 0 rgba(146,202,65,1), 25px 55px 0 0 rgba(146,202,65,1), 30px 55px 0 0 rgba(146,202,65,1), 35px 55px 0 0 rgba(76,165,47,1), 40px 55px 0 0 rgba(146,202,65,1), 45px 55px 0 0 rgba(146,202,65,1), 50px 55px 0 0 rgba(146,202,65,1), 55px 55px 0 0 rgba(146,202,65,1), 60px 55px 0 0 rgba(76,165,47,1), 65px 55px 0 0 rgba(146,202,65,1), 70px 55px 0 0 rgba(76,165,47,1), 75px 55px 0 0 rgba(76,165,47,1), 80px 55px 0 0 rgba(146,202,65,1), 85px 55px 0 0 rgba(146,202,65,1), 90px 55px 0 0 rgba(146,202,65,1), 95px 55px 0 0 rgba(0, 0, 0, 1), 10px 60px 0 0 rgba(0, 0, 0, 1), 15px 60px 0 0 rgba(0, 0, 0, 1), 20px 60px 0 0 rgba(0, 0, 0, 1), 25px 60px 0 0 rgba(0, 0, 0, 1), 30px 60px 0 0 rgba(0, 0, 0, 1), 35px 60px 0 0 rgba(0, 0, 0, 1), 40px 60px 0 0 rgba(0, 0, 0, 1), 45px 60px 0 0 rgba(0, 0, 0, 1), 50px 60px 0 0 rgba(0, 0, 0, 1), 55px 60px 0 0 rgba(0, 0, 0, 1), 60px 60px 0 0 rgba(0, 0, 0, 1), 65px 60px 0 0 rgba(0, 0, 0, 1), 70px 60px 0 0 rgba(0, 0, 0, 1), 75px 60px 0 0 rgba(0, 0, 0, 1), 80px 60px 0 0 rgba(0, 0, 0, 1), 85px 60px 0 0 rgba(0, 0, 0, 1), 90px 60px 0 0 rgba(0, 0, 0, 1), 95px 60px 0 0 rgba(0, 0, 0, 1), 15px 65px 0 0 rgba(0, 0, 0, 1), 20px 65px 0 0 rgba(146,202,65,1), 25px 65px 0 0 rgba(146,202,65,1), 30px 65px 0 0 rgba(146,202,65,1), 35px 65px 0 0 rgba(146,202,65,1), 40px 65px 0 0 rgba(76,165,47,1), 45px 65px 0 0 rgba(146,202,65,1), 50px 65px 0 0 rgba(146,202,65,1), 55px 65px 0 0 rgba(146,202,65,1), 60px 65px 0 0 rgba(146,202,65,1), 65px 65px 0 0 rgba(76,165,47,1), 70px 65px 0 0 rgba(146,202,65,1), 75px 65px 0 0 rgba(76,165,47,1), 80px 65px 0 0 rgba(76,165,47,1), 85px 65px 0 0 rgba(146,202,65,1), 90px 65px 0 0 rgba(0, 0, 0, 1), 15px 70px 0 0 rgba(0, 0, 0, 1), 20px 70px 0 0 rgba(146,202,65,1), 25px 70px 0 0 rgba(146,202,65,1), 30px 70px 0 0 rgba(146,202,65,1), 35px 70px 0 0 rgba(146,202,65,1), 40px 70px 0 0 rgba(76,165,47,1), 45px 70px 0 0 rgba(146,202,65,1), 50px 70px 0 0 rgba(146,202,65,1), 55px 70px 0 0 rgba(146,202,65,1), 60px 70px 0 0 rgba(146,202,65,1), 65px 70px 0 0 rgba(76,165,47,1), 70px 70px 0 0 rgba(146,202,65,1), 75px 70px 0 0 rgba(76,165,47,1), 80px 70px 0 0 rgba(76,165,47,1), 85px 70px 0 0 rgba(146,202,65,1), 90px 70px 0 0 rgba(0, 0, 0, 1), 15px 75px 0 0 rgba(0, 0, 0, 1), 20px 75px 0 0 rgba(146,202,65,1), 25px 75px 0 0 rgba(146,202,65,1), 30px 75px 0 0 rgba(146,202,65,1), 35px 75px 0 0 rgba(146,202,65,1), 40px 75px 0 0 rgba(76,165,47,1), 45px 75px 0 0 rgba(146,202,65,1), 50px 75px 0 0 rgba(146,202,65,1), 55px 75px 0 0 rgba(146,202,65,1), 60px 75px 0 0 rgba(146,202,65,1), 65px 75px 0 0 rgba(76,165,47,1), 70px 75px 0 0 rgba(146,202,65,1), 75px 75px 0 0 rgba(76,165,47,1), 80px 75px 0 0 rgba(76,165,47,1), 85px 75px 0 0 rgba(146,202,65,1), 90px 75px 0 0 rgba(0, 0, 0, 1), 15px 80px 0 0 rgba(0, 0, 0, 1), 20px 80px 0 0 rgba(146,202,65,1), 25px 80px 0 0 rgba(146,202,65,1), 30px 80px 0 0 rgba(146,202,65,1), 35px 80px 0 0 rgba(146,202,65,1), 40px 80px 0 0 rgba(76,165,47,1), 45px 80px 0 0 rgba(146,202,65,1), 50px 80px 0 0 rgba(146,202,65,1), 55px 80px 0 0 rgba(146,202,65,1), 60px 80px 0 0 rgba(146,202,65,1), 65px 80px 0 0 rgba(76,165,47,1), 70px 80px 0 0 rgba(146,202,65,1), 75px 80px 0 0 rgba(76,165,47,1), 80px 80px 0 0 rgba(76,165,47,1), 85px 80px 0 0 rgba(146,202,65,1), 90px 80px 0 0 rgba(0, 0, 0, 1), 15px 85px 0 0 rgba(0, 0, 0, 1), 20px 85px 0 0 rgba(146,202,65,1), 25px 85px 0 0 rgba(146,202,65,1), 30px 85px 0 0 rgba(146,202,65,1), 35px 85px 0 0 rgba(146,202,65,1), 40px 85px 0 0 rgba(76,165,47,1), 45px 85px 0 0 rgba(146,202,65,1), 50px 85px 0 0 rgba(146,202,65,1), 55px 85px 0 0 rgba(146,202,65,1), 60px 85px 0 0 rgba(146,202,65,1), 65px 85px 0 0 rgba(76,165,47,1), 70px 85px 0 0 rgba(146,202,65,1), 75px 85px 0 0 rgba(76,165,47,1), 80px 85px 0 0 rgba(76,165,47,1), 85px 85px 0 0 rgba(146,202,65,1), 90px 85px 0 0 rgba(0, 0, 0, 1), 15px 90px 0 0 rgba(0, 0, 0, 1), 20px 90px 0 0 rgba(146,202,65,1), 25px 90px 0 0 rgba(146,202,65,1), 30px 90px 0 0 rgba(146,202,65,1), 35px 90px 0 0 rgba(146,202,65,1), 40px 90px 0 0 rgba(76,165,47,1), 45px 90px 0 0 rgba(146,202,65,1), 50px 90px 0 0 rgba(146,202,65,1), 55px 90px 0 0 rgba(146,202,65,1), 60px 90px 0 0 rgba(146,202,65,1), 65px 90px 0 0 rgba(76,165,47,1), 70px 90px 0 0 rgba(146,202,65,1), 75px 90px 0 0 rgba(76,165,47,1), 80px 90px 0 0 rgba(76,165,47,1), 85px 90px 0 0 rgba(146,202,65,1), 90px 90px 0 0 rgba(0, 0, 0, 1), 15px 95px 0 0 rgba(0, 0, 0, 1), 20px 95px 0 0 rgba(146,202,65,1), 25px 95px 0 0 rgba(146,202,65,1), 30px 95px 0 0 rgba(146,202,65,1), 35px 95px 0 0 rgba(146,202,65,1), 40px 95px 0 0 rgba(76,165,47,1), 45px 95px 0 0 rgba(146,202,65,1), 50px 95px 0 0 rgba(146,202,65,1), 55px 95px 0 0 rgba(146,202,65,1), 60px 95px 0 0 rgba(146,202,65,1), 65px 95px 0 0 rgba(76,165,47,1), 70px 95px 0 0 rgba(146,202,65,1), 75px 95px 0 0 rgba(76,165,47,1), 80px 95px 0 0 rgba(76,165,47,1), 85px 95px 0 0 rgba(146,202,65,1), 90px 95px 0 0 rgba(0, 0, 0, 1), 15px 100px 0 0 rgba(0, 0, 0, 1), 20px 100px 0 0 rgba(146,202,65,1), 25px 100px 0 0 rgba(146,202,65,1), 30px 100px 0 0 rgba(146,202,65,1), 35px 100px 0 0 rgba(146,202,65,1), 40px 100px 0 0 rgba(76,165,47,1), 45px 100px 0 0 rgba(146,202,65,1), 50px 100px 0 0 rgba(146,202,65,1), 55px 100px 0 0 rgba(146,202,65,1), 60px 100px 0 0 rgba(146,202,65,1), 65px 100px 0 0 rgba(76,165,47,1), 70px 100px 0 0 rgba(146,202,65,1), 75px 100px 0 0 rgba(76,165,47,1), 80px 100px 0 0 rgba(76,165,47,1), 85px 100px 0 0 rgba(146,202,65,1), 90px 100px 0 0 rgba(0, 0, 0, 1);
  height: 5px;
  width: 5px;
  position: relative;
  top: -1.45em;
  z-index: 2;
}

.walls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.wall {
  position: relative;
  box-shadow: 10px 80px 0 0 rgba(0, 0, 0, 1), 20px 80px 0 0 rgba(0, 0, 0, 1), 30px 80px 0 0 rgba(0, 0, 0, 1), 40px 80px 0 0 rgba(0, 0, 0, 1), 50px 80px 0 0 rgba(0, 0, 0, 1), 60px 80px 0 0 rgba(0, 0, 0, 1), 70px 80px 0 0 rgba(0, 0, 0, 1), 80px 80px 0 0 rgba(0, 0, 0, 1), 90px 80px 0 0 rgba(0, 0, 0, 1), 100px 80px 0 0 rgba(0, 0, 0, 1), 110px 80px 0 0 rgba(0, 0, 0, 1), 120px 80px 0 0 rgba(0, 0, 0, 1), 130px 80px 0 0 rgba(0, 0, 0, 1), 140px 80px 0 0 rgba(0, 0, 0, 1), 150px 80px 0 0 rgba(0, 0, 0, 1), 160px 80px 0 0 rgba(0, 0, 0, 1), 170px 80px 0 0 rgba(0, 0, 0, 1), 180px 80px 0 0 rgba(0, 0, 0, 1), 190px 80px 0 0 rgba(0, 0, 0, 1), 200px 80px 0 0 rgba(0, 0, 0, 1), 10px 90px 0 0 rgba(212,75,3,1), 20px 90px 0 0 rgba(212,75,3,1), 30px 90px 0 0 rgba(212,75,3,1), 40px 90px 0 0 rgba(212,75,3,1), 50px 90px 0 0 rgba(0, 0, 0, 1), 60px 90px 0 0 rgba(212,75,3,1), 70px 90px 0 0 rgba(212,75,3,1), 80px 90px 0 0 rgba(212,75,3,1), 90px 90px 0 0 rgba(0, 0, 0, 1), 100px 90px 0 0 rgba(212,75,3,1), 110px 90px 0 0 rgba(212,75,3,1), 120px 90px 0 0 rgba(212,75,3,1), 130px 90px 0 0 rgba(212,75,3,1), 140px 90px 0 0 rgba(0, 0, 0, 1), 150px 90px 0 0 rgba(212,75,3,1), 160px 90px 0 0 rgba(212,75,3,1), 170px 90px 0 0 rgba(212,75,3,1), 180px 90px 0 0 rgba(0, 0, 0, 1), 190px 90px 0 0 rgba(212,75,3,1), 200px 90px 0 0 rgba(212,75,3,1), 10px 100px 0 0 rgba(0, 0, 0, 1), 20px 100px 0 0 rgba(0, 0, 0, 1), 30px 100px 0 0 rgba(0, 0, 0, 1), 40px 100px 0 0 rgba(0, 0, 0, 1), 50px 100px 0 0 rgba(0, 0, 0, 1), 60px 100px 0 0 rgba(0, 0, 0, 1), 70px 100px 0 0 rgba(0, 0, 0, 1), 80px 100px 0 0 rgba(0, 0, 0, 1), 90px 100px 0 0 rgba(0, 0, 0, 1), 100px 100px 0 0 rgba(0, 0, 0, 1), 110px 100px 0 0 rgba(0, 0, 0, 1), 120px 100px 0 0 rgba(0, 0, 0, 1), 130px 100px 0 0 rgba(0, 0, 0, 1), 140px 100px 0 0 rgba(0, 0, 0, 1), 150px 100px 0 0 rgba(0, 0, 0, 1), 160px 100px 0 0 rgba(0, 0, 0, 1), 170px 100px 0 0 rgba(0, 0, 0, 1), 180px 100px 0 0 rgba(0, 0, 0, 1), 190px 100px 0 0 rgba(0, 0, 0, 1), 200px 100px 0 0 rgba(0, 0, 0, 1), 10px 110px 0 0 rgba(212,75,3,1), 20px 110px 0 0 rgba(212,75,3,1), 30px 110px 0 0 rgba(0, 0, 0, 1), 40px 110px 0 0 rgba(212,75,3,1), 50px 110px 0 0 rgba(212,75,3,1), 60px 110px 0 0 rgba(212,75,3,1), 70px 110px 0 0 rgba(0, 0, 0, 1), 80px 110px 0 0 rgba(212,75,3,1), 90px 110px 0 0 rgba(212,75,3,1), 100px 110px 0 0 rgba(212,75,3,1), 110px 110px 0 0 rgba(0, 0, 0, 1), 120px 110px 0 0 rgba(212,75,3,1), 130px 110px 0 0 rgba(0, 0, 0, 1), 140px 110px 0 0 rgba(212,75,3,1), 150px 110px 0 0 rgba(212,75,3,1), 160px 110px 0 0 rgba(0, 0, 0, 1), 170px 110px 0 0 rgba(212,75,3,1), 180px 110px 0 0 rgba(212,75,3,1), 190px 110px 0 0 rgba(0, 0, 0, 1), 200px 110px 0 0 rgba(212,75,3,1), 10px 120px 0 0 rgba(0, 0, 0, 1), 20px 120px 0 0 rgba(0, 0, 0, 1), 30px 120px 0 0 rgba(0, 0, 0, 1), 40px 120px 0 0 rgba(0, 0, 0, 1), 50px 120px 0 0 rgba(0, 0, 0, 1), 60px 120px 0 0 rgba(0, 0, 0, 1), 70px 120px 0 0 rgba(0, 0, 0, 1), 80px 120px 0 0 rgba(0, 0, 0, 1), 90px 120px 0 0 rgba(0, 0, 0, 1), 100px 120px 0 0 rgba(0, 0, 0, 1), 110px 120px 0 0 rgba(0, 0, 0, 1), 120px 120px 0 0 rgba(0, 0, 0, 1), 130px 120px 0 0 rgba(0, 0, 0, 1), 140px 120px 0 0 rgba(0, 0, 0, 1), 150px 120px 0 0 rgba(0, 0, 0, 1), 160px 120px 0 0 rgba(0, 0, 0, 1), 170px 120px 0 0 rgba(0, 0, 0, 1), 180px 120px 0 0 rgba(0, 0, 0, 1), 190px 120px 0 0 rgba(0, 0, 0, 1), 200px 120px 0 0 rgba(0, 0, 0, 1), 10px 130px 0 0 rgba(212,75,3,1), 20px 130px 0 0 rgba(212,75,3,1), 30px 130px 0 0 rgba(212,75,3,1), 40px 130px 0 0 rgba(0, 0, 0, 1), 50px 130px 0 0 rgba(212,75,3,1), 60px 130px 0 0 rgba(212,75,3,1), 70px 130px 0 0 rgba(212,75,3,1), 80px 130px 0 0 rgba(212,75,3,1), 90px 130px 0 0 rgba(0, 0, 0, 1), 100px 130px 0 0 rgba(212,75,3,1), 110px 130px 0 0 rgba(212,75,3,1), 120px 130px 0 0 rgba(212,75,3,1), 130px 130px 0 0 rgba(212,75,3,1), 140px 130px 0 0 rgba(0, 0, 0, 1), 150px 130px 0 0 rgba(212,75,3,1), 160px 130px 0 0 rgba(212,75,3,1), 170px 130px 0 0 rgba(212,75,3,1), 180px 130px 0 0 rgba(0, 0, 0, 1), 190px 130px 0 0 rgba(212,75,3,1), 200px 130px 0 0 rgba(212,75,3,1), 10px 140px 0 0 rgba(0, 0, 0, 1), 20px 140px 0 0 rgba(0, 0, 0, 1), 30px 140px 0 0 rgba(0, 0, 0, 1), 40px 140px 0 0 rgba(0, 0, 0, 1), 50px 140px 0 0 rgba(0, 0, 0, 1), 60px 140px 0 0 rgba(0, 0, 0, 1), 70px 140px 0 0 rgba(0, 0, 0, 1), 80px 140px 0 0 rgba(0, 0, 0, 1), 90px 140px 0 0 rgba(0, 0, 0, 1), 100px 140px 0 0 rgba(0, 0, 0, 1), 110px 140px 0 0 rgba(0, 0, 0, 1), 120px 140px 0 0 rgba(0, 0, 0, 1), 130px 140px 0 0 rgba(0, 0, 0, 1), 140px 140px 0 0 rgba(0, 0, 0, 1), 150px 140px 0 0 rgba(0, 0, 0, 1), 160px 140px 0 0 rgba(0, 0, 0, 1), 170px 140px 0 0 rgba(0, 0, 0, 1), 180px 140px 0 0 rgba(0, 0, 0, 1), 190px 140px 0 0 rgba(0, 0, 0, 1), 200px 140px 0 0 rgba(0, 0, 0, 1);
  height: 10px;
  width: 10px;
  left: -30em;
}

.wall:nth-child(1) {
  left: -12.5em;
}

.wall:nth-child(2) {
  left: -0.8em;
}

.wall:nth-child(3) {
  left: 2.2em;
}

.wall:nth-child(4) {
  left: 14em;
}

.wall:nth-child(5) {
  top: 3.7em;
  left: -27em;
}

.wall:nth-child(6) {
  top: 3.72em;
  left: -15.2em;
}

.wall:nth-child(7) {
  top: 3.72em;
  left: -3.5em;
}

.wall:nth-child(8) {
  top: 3.72em;
  left: 8em;
}

.wall:nth-child(9) {
  top: 3.72em;
  left: 12em;
}

.text {
  box-shadow: 15px 25px 0 0 rgba(255, 255, 255, 1), 20px 25px 0 0 rgba(255, 255, 255, 1), 25px 25px 0 0 rgba(255, 255, 255, 1), 30px 25px 0 0 rgba(255, 255, 255, 1), 40px 25px 0 0 rgba(255, 255, 255, 1), 45px 25px 0 0 rgba(255, 255, 255, 1), 50px 25px 0 0 rgba(255, 255, 255, 1), 60px 25px 0 0 rgba(255, 255, 255, 1), 65px 25px 0 0 rgba(255, 255, 255, 1), 70px 25px 0 0 rgba(255, 255, 255, 1), 85px 25px 0 0 rgba(255, 255, 255, 1), 90px 25px 0 0 rgba(255, 255, 255, 1), 95px 25px 0 0 rgba(255, 255, 255, 1), 100px 25px 0 0 rgba(255, 255, 255, 1), 105px 25px 0 0 rgba(255, 255, 255, 1), 115px 25px 0 0 rgba(255, 255, 255, 1), 120px 25px 0 0 rgba(255, 255, 255, 1), 125px 25px 0 0 rgba(255, 255, 255, 1), 130px 25px 0 0 rgba(255, 255, 255, 1), 15px 30px 0 0 rgba(255, 255, 255, 1), 30px 30px 0 0 rgba(255, 255, 255, 1), 40px 30px 0 0 rgba(255, 255, 255, 1), 60px 30px 0 0 rgba(255, 255, 255, 1), 95px 30px 0 0 rgba(255, 255, 255, 1), 115px 30px 0 0 rgba(255, 255, 255, 1), 130px 30px 0 0 rgba(255, 255, 255, 1), 15px 35px 0 0 rgba(255, 255, 255, 1), 30px 35px 0 0 rgba(255, 255, 255, 1), 40px 35px 0 0 rgba(255, 255, 255, 1), 45px 35px 0 0 rgba(255, 255, 255, 1), 50px 35px 0 0 rgba(255, 255, 255, 1), 60px 35px 0 0 rgba(255, 255, 255, 1), 65px 35px 0 0 rgba(255, 255, 255, 1), 70px 35px 0 0 rgba(255, 255, 255, 1), 95px 35px 0 0 rgba(255, 255, 255, 1), 115px 35px 0 0 rgba(255, 255, 255, 1), 130px 35px 0 0 rgba(255, 255, 255, 1), 15px 40px 0 0 rgba(255, 255, 255, 1), 30px 40px 0 0 rgba(255, 255, 255, 1), 40px 40px 0 0 rgba(255, 255, 255, 1), 60px 40px 0 0 rgba(255, 255, 255, 1), 95px 40px 0 0 rgba(255, 255, 255, 1), 115px 40px 0 0 rgba(255, 255, 255, 1), 130px 40px 0 0 rgba(255, 255, 255, 1), 15px 45px 0 0 rgba(255, 255, 255, 1), 20px 45px 0 0 rgba(255, 255, 255, 1), 25px 45px 0 0 rgba(255, 255, 255, 1), 30px 45px 0 0 rgba(255, 255, 255, 1), 40px 45px 0 0 rgba(255, 255, 255, 1), 60px 45px 0 0 rgba(255, 255, 255, 1), 95px 45px 0 0 rgba(255, 255, 255, 1), 115px 45px 0 0 rgba(255, 255, 255, 1), 120px 45px 0 0 rgba(255, 255, 255, 1), 125px 45px 0 0 rgba(255, 255, 255, 1), 130px 45px 0 0 rgba(255, 255, 255, 1), 20px 55px 0 0 rgba(255, 255, 255, 1), 40px 55px 0 0 rgba(255, 255, 255, 1), 50px 55px 0 0 rgba(255, 255, 255, 1), 55px 55px 0 0 rgba(255, 255, 255, 1), 60px 55px 0 0 rgba(255, 255, 255, 1), 65px 55px 0 0 rgba(255, 255, 255, 1), 75px 55px 0 0 rgba(255, 255, 255, 1), 95px 55px 0 0 rgba(255, 255, 255, 1), 105px 55px 0 0 rgba(255, 255, 255, 1), 110px 55px 0 0 rgba(255, 255, 255, 1), 115px 55px 0 0 rgba(255, 255, 255, 1), 120px 55px 0 0 rgba(255, 255, 255, 1), 125px 55px 0 0 rgba(255, 255, 255, 1), 20px 60px 0 0 rgba(255, 255, 255, 1), 25px 60px 0 0 rgba(255, 255, 255, 1), 40px 60px 0 0 rgba(255, 255, 255, 1), 50px 60px 0 0 rgba(255, 255, 255, 1), 80px 60px 0 0 rgba(255, 255, 255, 1), 90px 60px 0 0 rgba(255, 255, 255, 1), 115px 60px 0 0 rgba(255, 255, 255, 1), 20px 65px 0 0 rgba(255, 255, 255, 1), 30px 65px 0 0 rgba(255, 255, 255, 1), 40px 65px 0 0 rgba(255, 255, 255, 1), 50px 65px 0 0 rgba(255, 255, 255, 1), 55px 65px 0 0 rgba(255, 255, 255, 1), 60px 65px 0 0 rgba(255, 255, 255, 1), 85px 65px 0 0 rgba(255, 255, 255, 1), 115px 65px 0 0 rgba(255, 255, 255, 1), 20px 70px 0 0 rgba(255, 255, 255, 1), 35px 70px 0 0 rgba(255, 255, 255, 1), 40px 70px 0 0 rgba(255, 255, 255, 1), 50px 70px 0 0 rgba(255, 255, 255, 1), 80px 70px 0 0 rgba(255, 255, 255, 1), 90px 70px 0 0 rgba(255, 255, 255, 1), 115px 70px 0 0 rgba(255, 255, 255, 1), 20px 75px 0 0 rgba(255, 255, 255, 1), 40px 75px 0 0 rgba(255, 255, 255, 1), 50px 75px 0 0 rgba(255, 255, 255, 1), 55px 75px 0 0 rgba(255, 255, 255, 1), 60px 75px 0 0 rgba(255, 255, 255, 1), 65px 75px 0 0 rgba(255, 255, 255, 1), 75px 75px 0 0 rgba(255, 255, 255, 1), 95px 75px 0 0 rgba(255, 255, 255, 1), 115px 75px 0 0 rgba(255, 255, 255, 1), 15px 90px 0 0 rgba(255, 255, 255, 1), 40px 90px 0 0 rgba(255, 255, 255, 1), 45px 90px 0 0 rgba(255, 255, 255, 1), 50px 90px 0 0 rgba(255, 255, 255, 1), 55px 90px 0 0 rgba(255, 255, 255, 1), 65px 90px 0 0 rgba(255, 255, 255, 1), 80px 90px 0 0 rgba(255, 255, 255, 1), 90px 90px 0 0 rgba(255, 255, 255, 1), 95px 90px 0 0 rgba(255, 255, 255, 1), 100px 90px 0 0 rgba(255, 255, 255, 1), 105px 90px 0 0 rgba(255, 255, 255, 1), 115px 90px 0 0 rgba(255, 255, 255, 1), 15px 95px 0 0 rgba(255, 255, 255, 1), 40px 95px 0 0 rgba(255, 255, 255, 1), 65px 95px 0 0 rgba(255, 255, 255, 1), 80px 95px 0 0 rgba(255, 255, 255, 1), 90px 95px 0 0 rgba(255, 255, 255, 1), 115px 95px 0 0 rgba(255, 255, 255, 1), 15px 100px 0 0 rgba(255, 255, 255, 1), 40px 100px 0 0 rgba(255, 255, 255, 1), 45px 100px 0 0 rgba(255, 255, 255, 1), 50px 100px 0 0 rgba(255, 255, 255, 1), 65px 100px 0 0 rgba(255, 255, 255, 1), 80px 100px 0 0 rgba(255, 255, 255, 1), 90px 100px 0 0 rgba(255, 255, 255, 1), 95px 100px 0 0 rgba(255, 255, 255, 1), 100px 100px 0 0 rgba(255, 255, 255, 1), 115px 100px 0 0 rgba(255, 255, 255, 1), 15px 105px 0 0 rgba(255, 255, 255, 1), 40px 105px 0 0 rgba(255, 255, 255, 1), 65px 105px 0 0 rgba(255, 255, 255, 1), 80px 105px 0 0 rgba(255, 255, 255, 1), 90px 105px 0 0 rgba(255, 255, 255, 1), 115px 105px 0 0 rgba(255, 255, 255, 1), 15px 110px 0 0 rgba(255, 255, 255, 1), 20px 110px 0 0 rgba(255, 255, 255, 1), 25px 110px 0 0 rgba(255, 255, 255, 1), 30px 110px 0 0 rgba(255, 255, 255, 1), 40px 110px 0 0 rgba(255, 255, 255, 1), 45px 110px 0 0 rgba(255, 255, 255, 1), 50px 110px 0 0 rgba(255, 255, 255, 1), 55px 110px 0 0 rgba(255, 255, 255, 1), 70px 110px 0 0 rgba(255, 255, 255, 1), 75px 110px 0 0 rgba(255, 255, 255, 1), 90px 110px 0 0 rgba(255, 255, 255, 1), 95px 110px 0 0 rgba(255, 255, 255, 1), 100px 110px 0 0 rgba(255, 255, 255, 1), 105px 110px 0 0 rgba(255, 255, 255, 1), 115px 110px 0 0 rgba(255, 255, 255, 1), 120px 110px 0 0 rgba(255, 255, 255, 1), 125px 110px 0 0 rgba(255, 255, 255, 1), 130px 110px 0 0 rgba(255, 255, 255, 1);
  height: 5px;
  width: 5px;
  opacity: 1;
  position: relative;
  top: -8em;
  left: -8em;
  z-index: -2;
}

@keyframes move {
  20% {
    top: -1.25em;
    left: -12em;
    opacity: 1;
  }

  30% {
    top: -1.25em;
  }

  40% {
    top: -5.5em;
    opacity: 1;
  }

  50% {
    top: -6em;
    left: -1em;
    opacity: 1;
  }

  60% {
    top: -6em;
    left: 4em;
    opacity: 1;
  }

  70% {
    top: -1.25em;
  }

  80% {
    top: -1.25em;
    left: 12em;
    opacity: 1;
  }

  90% {
    top: -1.25em;
    left: 25em;
    opacity: 1;
  }

  100% {
    left: 28em;
    opacity: 0;
  }
}

@keyframes run {
  5% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  10% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  15% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  20% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  25% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  30% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  35% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  40% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  45% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  50% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  55% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  60% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  65% {
    box-shadow: 75px 20px 0 0 rgba(250,184,2,1), 80px 20px 0 0 rgba(250,184,2,1), 85px 20px 0 0 rgba(250,184,2,1), 90px 20px 0 0 rgba(250,184,2,1), 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 75px 25px 0 0 rgba(250,184,2,1), 80px 25px 0 0 rgba(250,184,2,1), 85px 25px 0 0 rgba(250,184,2,1), 90px 25px 0 0 rgba(250,184,2,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 80px 30px 0 0 rgba(250,184,2,1), 85px 30px 0 0 rgba(250,184,2,1), 90px 30px 0 0 rgba(250,184,2,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 75px 35px 0 0 rgba(132,122,0,1), 80px 35px 0 0 rgba(132,122,0,1), 85px 35px 0 0 rgba(132,122,0,1), 90px 35px 0 0 rgba(132,122,0,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 85px 40px 0 0 rgba(132,122,0,1), 90px 40px 0 0 rgba(132,122,0,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 90px 45px 0 0 rgba(132,122,0,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 85px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 25px 60px 0 0 rgba(132,122,0,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 70px 60px 0 0 rgba(225,31,3,1), 75px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(132,122,0,1), 25px 65px 0 0 rgba(132,122,0,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(225,31,3,1), 85px 65px 0 0 rgba(132,122,0,1), 90px 65px 0 0 rgba(132,122,0,1), 15px 70px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(225,31,3,1), 85px 70px 0 0 rgba(132,122,0,1), 90px 70px 0 0 rgba(132,122,0,1), 15px 75px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(250,184,2,1), 35px 75px 0 0 rgba(225,31,3,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(250,184,2,1), 70px 75px 0 0 rgba(225,31,3,1), 75px 75px 0 0 rgba(250,184,2,1), 80px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 90px 75px 0 0 rgba(132,122,0,1), 20px 80px 0 0 rgba(250,184,2,1), 25px 80px 0 0 rgba(250,184,2,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(132,122,0,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(225,31,3,1), 85px 80px 0 0 rgba(132,122,0,1), 90px 80px 0 0 rgba(132,122,0,1), 20px 85px 0 0 rgba(132,122,0,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(132,122,0,1), 40px 85px 0 0 rgba(132,122,0,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(225,31,3,1), 85px 85px 0 0 rgba(132,122,0,1), 90px 85px 0 0 rgba(132,122,0,1), 15px 90px 0 0 rgba(132,122,0,1), 20px 90px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(132,122,0,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 15px 95px 0 0 rgba(132,122,0,1), 20px 95px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(225,31,3,1), 40px 95px 0 0 rgba(225,31,3,1), 45px 95px 0 0 rgba(225,31,3,1), 50px 95px 0 0 rgba(225,31,3,1), 55px 95px 0 0 rgba(225,31,3,1);
  }

  70% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  75% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  80% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  85% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }

  90% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 35px 70px 0 0 rgba(132,122,0,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(225,31,3,1), 60px 70px 0 0 rgba(250,184,2,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(132,122,0,1), 45px 75px 0 0 rgba(132,122,0,1), 50px 75px 0 0 rgba(132,122,0,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(132,122,0,1), 45px 80px 0 0 rgba(132,122,0,1), 50px 80px 0 0 rgba(250,184,2,1), 55px 80px 0 0 rgba(250,184,2,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(132,122,0,1), 50px 85px 0 0 rgba(250,184,2,1), 55px 85px 0 0 rgba(250,184,2,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 50px 90px 0 0 rgba(225,31,3,1), 55px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(132,122,0,1), 65px 90px 0 0 rgba(132,122,0,1), 70px 90px 0 0 rgba(132,122,0,1), 75px 90px 0 0 rgba(132,122,0,1), 45px 95px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1);
  }

  95% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(132,122,0,1), 55px 60px 0 0 rgba(132,122,0,1), 60px 60px 0 0 rgba(225,31,3,1), 65px 60px 0 0 rgba(132,122,0,1), 75px 60px 0 0 rgba(250,184,2,1), 35px 65px 0 0 rgba(250,184,2,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(132,122,0,1), 55px 65px 0 0 rgba(132,122,0,1), 60px 65px 0 0 rgba(132,122,0,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(250,184,2,1), 75px 65px 0 0 rgba(250,184,2,1), 80px 65px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 35px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(225,31,3,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(132,122,0,1), 55px 70px 0 0 rgba(132,122,0,1), 60px 70px 0 0 rgba(132,122,0,1), 65px 70px 0 0 rgba(132,122,0,1), 70px 70px 0 0 rgba(250,184,2,1), 75px 70px 0 0 rgba(250,184,2,1), 30px 75px 0 0 rgba(132,122,0,1), 35px 75px 0 0 rgba(132,122,0,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 30px 80px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 25px 85px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(132,122,0,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 25px 90px 0 0 rgba(132,122,0,1), 50px 90px 0 0 rgba(132,122,0,1), 55px 90px 0 0 rgba(132,122,0,1), 60px 90px 0 0 rgba(132,122,0,1), 50px 95px 0 0 rgba(132,122,0,1), 55px 95px 0 0 rgba(132,122,0,1), 60px 95px 0 0 rgba(132,122,0,1), 65px 95px 0 0 rgba(132,122,0,1);
  }

  100% {
    box-shadow: 45px 25px 0 0 rgba(225,31,3,1), 50px 25px 0 0 rgba(225,31,3,1), 55px 25px 0 0 rgba(225,31,3,1), 60px 25px 0 0 rgba(225,31,3,1), 65px 25px 0 0 rgba(225,31,3,1), 40px 30px 0 0 rgba(225,31,3,1), 45px 30px 0 0 rgba(225,31,3,1), 50px 30px 0 0 rgba(225,31,3,1), 55px 30px 0 0 rgba(225,31,3,1), 60px 30px 0 0 rgba(225,31,3,1), 65px 30px 0 0 rgba(225,31,3,1), 70px 30px 0 0 rgba(225,31,3,1), 75px 30px 0 0 rgba(225,31,3,1), 40px 35px 0 0 rgba(132,122,0,1), 45px 35px 0 0 rgba(132,122,0,1), 50px 35px 0 0 rgba(132,122,0,1), 55px 35px 0 0 rgba(250,184,2,1), 60px 35px 0 0 rgba(250,184,2,1), 65px 35px 0 0 rgba(132,122,0,1), 70px 35px 0 0 rgba(250,184,2,1), 35px 40px 0 0 rgba(132,122,0,1), 40px 40px 0 0 rgba(250,184,2,1), 45px 40px 0 0 rgba(132,122,0,1), 50px 40px 0 0 rgba(250,184,2,1), 55px 40px 0 0 rgba(250,184,2,1), 60px 40px 0 0 rgba(250,184,2,1), 65px 40px 0 0 rgba(132,122,0,1), 70px 40px 0 0 rgba(250,184,2,1), 75px 40px 0 0 rgba(250,184,2,1), 80px 40px 0 0 rgba(250,184,2,1), 35px 45px 0 0 rgba(132,122,0,1), 40px 45px 0 0 rgba(250,184,2,1), 45px 45px 0 0 rgba(132,122,0,1), 50px 45px 0 0 rgba(132,122,0,1), 55px 45px 0 0 rgba(250,184,2,1), 60px 45px 0 0 rgba(250,184,2,1), 65px 45px 0 0 rgba(250,184,2,1), 70px 45px 0 0 rgba(132,122,0,1), 75px 45px 0 0 rgba(250,184,2,1), 80px 45px 0 0 rgba(250,184,2,1), 85px 45px 0 0 rgba(250,184,2,1), 35px 50px 0 0 rgba(132,122,0,1), 40px 50px 0 0 rgba(132,122,0,1), 45px 50px 0 0 rgba(250,184,2,1), 50px 50px 0 0 rgba(250,184,2,1), 55px 50px 0 0 rgba(250,184,2,1), 60px 50px 0 0 rgba(250,184,2,1), 65px 50px 0 0 rgba(132,122,0,1), 70px 50px 0 0 rgba(132,122,0,1), 75px 50px 0 0 rgba(132,122,0,1), 80px 50px 0 0 rgba(132,122,0,1), 45px 55px 0 0 rgba(250,184,2,1), 50px 55px 0 0 rgba(250,184,2,1), 55px 55px 0 0 rgba(250,184,2,1), 60px 55px 0 0 rgba(250,184,2,1), 65px 55px 0 0 rgba(250,184,2,1), 70px 55px 0 0 rgba(250,184,2,1), 75px 55px 0 0 rgba(250,184,2,1), 30px 60px 0 0 rgba(132,122,0,1), 35px 60px 0 0 rgba(132,122,0,1), 40px 60px 0 0 rgba(132,122,0,1), 45px 60px 0 0 rgba(132,122,0,1), 50px 60px 0 0 rgba(225,31,3,1), 55px 60px 0 0 rgba(225,31,3,1), 60px 60px 0 0 rgba(132,122,0,1), 65px 60px 0 0 rgba(132,122,0,1), 20px 65px 0 0 rgba(250,184,2,1), 25px 65px 0 0 rgba(250,184,2,1), 30px 65px 0 0 rgba(132,122,0,1), 35px 65px 0 0 rgba(132,122,0,1), 40px 65px 0 0 rgba(132,122,0,1), 45px 65px 0 0 rgba(132,122,0,1), 50px 65px 0 0 rgba(225,31,3,1), 55px 65px 0 0 rgba(225,31,3,1), 60px 65px 0 0 rgba(225,31,3,1), 65px 65px 0 0 rgba(132,122,0,1), 70px 65px 0 0 rgba(132,122,0,1), 75px 65px 0 0 rgba(132,122,0,1), 80px 65px 0 0 rgba(250,184,2,1), 85px 65px 0 0 rgba(250,184,2,1), 90px 65px 0 0 rgba(250,184,2,1), 20px 70px 0 0 rgba(250,184,2,1), 25px 70px 0 0 rgba(250,184,2,1), 30px 70px 0 0 rgba(250,184,2,1), 40px 70px 0 0 rgba(132,122,0,1), 45px 70px 0 0 rgba(132,122,0,1), 50px 70px 0 0 rgba(225,31,3,1), 55px 70px 0 0 rgba(250,184,2,1), 60px 70px 0 0 rgba(225,31,3,1), 65px 70px 0 0 rgba(225,31,3,1), 70px 70px 0 0 rgba(225,31,3,1), 75px 70px 0 0 rgba(132,122,0,1), 80px 70px 0 0 rgba(132,122,0,1), 85px 70px 0 0 rgba(250,184,2,1), 90px 70px 0 0 rgba(250,184,2,1), 20px 75px 0 0 rgba(250,184,2,1), 25px 75px 0 0 rgba(250,184,2,1), 40px 75px 0 0 rgba(225,31,3,1), 45px 75px 0 0 rgba(225,31,3,1), 50px 75px 0 0 rgba(225,31,3,1), 55px 75px 0 0 rgba(225,31,3,1), 60px 75px 0 0 rgba(225,31,3,1), 65px 75px 0 0 rgba(225,31,3,1), 70px 75px 0 0 rgba(225,31,3,1), 85px 75px 0 0 rgba(132,122,0,1), 35px 80px 0 0 rgba(225,31,3,1), 40px 80px 0 0 rgba(225,31,3,1), 45px 80px 0 0 rgba(225,31,3,1), 50px 80px 0 0 rgba(225,31,3,1), 55px 80px 0 0 rgba(225,31,3,1), 60px 80px 0 0 rgba(225,31,3,1), 65px 80px 0 0 rgba(225,31,3,1), 70px 80px 0 0 rgba(225,31,3,1), 75px 80px 0 0 rgba(225,31,3,1), 80px 80px 0 0 rgba(132,122,0,1), 85px 80px 0 0 rgba(132,122,0,1), 30px 85px 0 0 rgba(225,31,3,1), 35px 85px 0 0 rgba(225,31,3,1), 40px 85px 0 0 rgba(225,31,3,1), 45px 85px 0 0 rgba(225,31,3,1), 50px 85px 0 0 rgba(225,31,3,1), 55px 85px 0 0 rgba(225,31,3,1), 60px 85px 0 0 rgba(225,31,3,1), 65px 85px 0 0 rgba(225,31,3,1), 70px 85px 0 0 rgba(225,31,3,1), 75px 85px 0 0 rgba(225,31,3,1), 80px 85px 0 0 rgba(132,122,0,1), 85px 85px 0 0 rgba(132,122,0,1), 25px 90px 0 0 rgba(132,122,0,1), 30px 90px 0 0 rgba(132,122,0,1), 35px 90px 0 0 rgba(225,31,3,1), 40px 90px 0 0 rgba(225,31,3,1), 45px 90px 0 0 rgba(225,31,3,1), 60px 90px 0 0 rgba(225,31,3,1), 65px 90px 0 0 rgba(225,31,3,1), 70px 90px 0 0 rgba(225,31,3,1), 75px 90px 0 0 rgba(225,31,3,1), 80px 90px 0 0 rgba(132,122,0,1), 85px 90px 0 0 rgba(132,122,0,1), 25px 95px 0 0 rgba(132,122,0,1), 30px 95px 0 0 rgba(132,122,0,1), 35px 95px 0 0 rgba(132,122,0,1), 25px 100px 0 0 rgba(132,122,0,1), 30px 100px 0 0 rgba(132,122,0,1), 35px 100px 0 0 rgba(132,122,0,1), 40px 100px 0 0 rgba(132,122,0,1);
  }
}
</style>

<div class="notification">
  <div class="shinner">
    <div class="mover"></div>
    <div class="mover2"></div>
  </div>
  <svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>

<svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing1">
 <g>
  <g id="svg_1">
   <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path>
  </g>
 </g>
</svg>
  <div></div>
  <p class="levelup">LEVEL UP!</p>
  <p class="congrats">Congratulations!</p>
  <div class="bg"></div>
    
</div>
<style>
/* From Uiverse.io by Sameer2244 - Tags: notification */
.notification {
  width: 250px;
  height: 60px;
  background: rgb(255, 255, 255);
  border-radius: 14px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.377);
}

.shinner {
  position: absolute;
  width: 250px;
  height: 60px;
  overflow: hidden;
  top: 0;
  left: 0;
  border-radius: 0.5rem;
}

.mover {
  position: absolute;
  border-top: 60px solid rgba(255, 255, 255, 0.4);
  border-right: 30px solid transparent;
  left: 50px;
  filter: blur( 4px );
  animation: shine 2s infinite ease-in-out;
}

.mover2 {
  content: "";
  position: absolute;
  border-top: 60px solid rgba(255, 255, 255, 0.4);
  border-left: 30px solid transparent;
  transform: scaleY(-1);
  left: 20px;
  filter: blur( 4px );
  animation: shine2 2s infinite ease-in-out;
}

.levelup {
  color: rgb(18, 175, 4);
  text-align: center;
  padding-top: 0.6rem;
  font-weight: bolder;
  font-size: 1.8rem;
  z-index: 3;
}

.congrats {
  font-family: cursive;
  font-size: 1.5rem;
  color: rgb(240, 240, 240);
  text-align: center;
  padding-top: 1rem;
  text-shadow: 1px 4px 7px rgb(7, 7, 7);
}

.wing {
  transform: translate(150px,-100px);
  position: absolute;
  z-index: -1;
  animation: winganime 2s ease-in-out infinite;
}

.wing1 {
  transform: translate(-30px,-100px) scaleX(-1);
  position: absolute;
  z-index: -1;
  animation: winganime2 2s ease-in-out infinite;
}

.bg {
  background: rgb(223, 223, 105);
  width: 130px;
  height: 130px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
  z-index: -2;
  border-radius: 50%;
  box-shadow: rgb(252, 255, 54,0.7) 0px 4px 105px, rgb(252, 255, 54,0.7) 0px -24px 130px, rgb(252, 255, 54,0.7) 0px 4px 446px, rgb(252, 255, 54,0.7) 0px 12px 13px, rgb(252, 255, 54,0.7) 0px -3px 5px;
  animation: rot 2.5s infinite ease-in-out;
  transform-origin: center;
}

@keyframes rot {
  0% {
    transform: translate(50%,-50%) rotate(0deg);
  }

  100% {
    transform: translate(50%,-50%) rotate(360deg);
  }
}

@keyframes winganime {
  0% {
    transform: translate(150px,-100px) rotateY(0deg);
  }

  50% {
    transform: translate(150px,-95px) rotateY(25deg);
  }

  100% {
    transform: translate(150px,-100px) rotateY(0deg);
  }
}

@keyframes winganime2 {
  0% {
    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
  }

  50% {
    transform: translate(-30px,-95px) rotateY(-25deg) scaleX(-1);
  }

  100% {
    transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1);
  }
}

@keyframes shine {
  0% {
    left: -50px;
  }

  100% {
    left: 300px;
  }
}

@keyframes shine2 {
  0% {
    left: -20px;
  }

  100% {
    left: 270px;
  }
}
</style>

<div class="bannerContainer">
      
      <div class="banner">
        
        <div class="loader loader1"></div>
        <div class="loader loader2"></div>
        <div class="loader loader3"></div>
        

        
        <div class="loader mainCard">
          <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
          </svg>
          <span>Well done</span>
          <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path fill="#393E41" d="M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z"></path>
          </svg>

          
          <div class="loader secondCard">

            <span>Next Level</span>

          </div>
          
        </div>
      </div>
      
    </div>
    
<style>
/* From Uiverse.io by Santaval - Tags: notification */
/*Container*/

.bannerContainer {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Banner */

.bannerContainer .banner {
  background-color: #e7e5df;
  height: 70px;
  width: 250px;
  border-radius: 10px;
  position: relative;
  overflow-y: hidden;
}

/*Loaders */

.bannerContainer .banner .loader {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  position: absolute;
}

.bannerContainer .banner .loader1 {
  background-color: #393e41;
  animation: loader 0.5s linear 0s;
}

.bannerContainer .banner .loader2 {
  background-color: #44bba4;
  animation: loader 0.5s linear 0.2s;
}

.bannerContainer .banner .loader3 {
  background-color: #e7bb41;
  animation: loader 0.5s linear 0.3s;
}

/*Main card*/

.bannerContainer .banner .mainCard {
  width: 100%;
  background-color: #e7e5df;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #393e41;
  font-weight: bolder;
  animation: loader 0.5s linear 0.4s;
  border-radius: 10px;
}

.bannerContainer .banner span {
  font-size: 29px;
  font-weight: 900;
  transform: translateY(-120px);
  animation: appear 0.1s ease-in 0.9s forwards;
}

.bannerContainer .banner svg {
  width: 30px;
  transform: translateY(-100px);
  animation: appear 0.1s ease-in 0.9s forwards;
}

.bannerContainer .banner .mainCard:hover > .secondCard {
  height: 100%;
  color: #e7e5df;
}

/* Second card */

.bannerContainer .banner .secondCard {
  background-color: #393e41;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: transparent;
  height: 0px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Animations */

@keyframes loader {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes appear {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0px);
  }
}

</style>

<div class="notification">
  <div class="text">
    <strong>LEVEL UP !!!</strong>
    <strong>CONGRATULATIONS !!!</strong>
  </div>

  <div class="crystal-border">
    <div class="crystal">
    </div>
  </div>

  <div class="progress-ring-m7">
  </div>
  <div class="progress-ring-m7-inner">
  </div>

  <svg height="100" width="100" class="progress-ring">
    <circle cy="50" cx="50" r="38" fill="transparent" stroke-width="7"></circle>
  </svg>

  <svg height="100" width="104" class="progress-ring-two">
    <circle cy="50" cx="50" r="45" fill="transparent" stroke-width="13"></circle>
  </svg>
  <svg height="100" width="100" class="progress-ring-two">
    <circle cy="50" cx="50" r="37" fill="transparent" stroke-width="10"></circle>
  </svg>

  <div class="wings">
  </div>

  <div class="shield">
    <div class="shield-up">
      <div class="shield-top-right">
        <div class="shield-top-right-inside">
        </div>
      </div>
      <div class="shield-top-left">
        <div class="shield-top-left-inside">
        </div>
      </div>
    </div>

    <div class="shield-down">
      <div class="shield-bottom-right">
        <div class="shield-bottom-right-inside">
        </div>
      </div>
      <div class="shield-bottom-left">
        <div class="shield-bottom-left-inside">
        </div>
      </div>
    </div>
  </div>

  <div class="line-center-border">
    <div class="line-center"></div>
  </div>
</div>


<style>
/* From Uiverse.io by StealthWorm - Tags: notification */
.notification {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 0.3rem;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  transition: all 3s ease;
}

.text {
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 300px;
  height: 200px;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  top: 1.5rem;
}

strong {
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.438);
  animation: gradient 5s ease infinite;
}

.notification:hover .text {
  opacity: 1;
  transition: 1s;
  transition-delay: 3s;
  transform: translateY(-1.5rem);
}

.notification:hover .crystal {
  animation: pulse_crystal 1s ease;
  transition: 1s;
  transform: scale(1.3);
  box-shadow: 0 0 5px rgb(255, 255, 255);
  background: conic-gradient(#3fb2ff 0%, #261caf 45%, #44d2eb 50%, #fdfdfd 100%);
  clip-path: polygon(50% 0, 84% 30%, 84% 70%, 50% 100%, 15% 70%, 15% 30%);
}

.notification:hover .crystal-border {
  transition: 1s;
  clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%);
}

.crystal-border {
  z-index: 3;
  display: flex;
  position: absolute;
  width: 45px;
  height: 45px;
  background: #000000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.crystal {
  inset: 12px;
  position: absolute;
  width: 20px;
  height: 20px;
  background: conic-gradient(#ca22b9 0%, #792e83 45%, #ff26e9 50%, #ffffff 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: all 1s ease;
}

.line-center-border {
  z-index: 2;
  display: flex;
  position: absolute;
  width: 10rem;
  height: 10rem;
  align-items: center;
  justify-content: center;
  background: #000000;
  clip-path: polygon(50% 20%, 60% 18%, 60% 80%, 50% 90%, 40% 80%, 40% 18%);
}

.line-center {
  display: flex;
  position: absolute;
  margin: 4px;
  width: 3rem;
  top: 1.8rem;
  height: 7.7rem;
  transition: 2s;
  opacity: 0;
  background: linear-gradient(90deg, #796f1c 50%, #c7b82f 50%);
  clip-path: polygon(50% 5%, 60% 8%, 60% 87%, 50% 90%, 40% 87%, 40% 8%);
}

.notification:hover .line-center {
  z-index: 1;
  opacity: 1;
}

.progress-ring {
  z-index: 2;
  position: absolute;
  top: 22%;
  stroke-dasharray: 135 120%;
  stroke: #113736;
  border-radius: 50%;
  transform: rotate(-12deg);
  transition: all 4s ease;
}

.notification:hover .progress-ring__blue {
  transition: all 2s ease;
  stroke-dasharray: 13 5;
}

.progress-ring-m7 {
  z-index: 1;
  visibility: hidden;
  width: 7rem;
  height: 5.5rem;
  top: 28%;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: double;
  border: 8px solid #b9a80f;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.progress-ring-m7-inner {
  z-index: 1;
  visibility: hidden;
  display: flex;
  box-sizing: content-box;
  width: 6rem;
  height: 4.5rem;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  border: 6px dashed #113736;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.notification:hover .progress-ring-m7 {
  visibility: visible;
  animation: pulse_m7 1.5s ease-in-out;
}

.notification:hover .progress-ring-m7-inner {
  visibility: visible;
  transition: all 3s ease;
  animation: pulse_m7 1.5s ease-in-out;
}

.progress-ring-two:nth-of-type(2) {
  z-index: 1;
  position: absolute;
  top: 20%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(27deg);
}

.progress-ring-two:nth-of-type(3) {
  z-index: 1;
  position: absolute;
  top: 22%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(-20deg);
}

.notification:hover svg {
  animation: pulse_svg 3s ease;
}

.wings {
  z-index: 1;
  position: absolute;
  top: 20%;
  width: 10rem;
  height: 8rem;
  clip-path: polygon(
  0% 0%, 28% 27%, 32% 31%, 27% 40%, 25% 50%, 
  30% 60%, 47% 67%, 45% 67%, 57% 66%, 64% 64%, 
  70% 59%, 70% 46%, 70% 46%, 75% 40%, 

  70% 26%, 100% 0%, 100% 10%, 95% 14%,

  95% 19%, 90% 23%, 90% 29%, 69% 50%, 
  72% 56%, 69.38% 62%, 65% 65%, 57.5% 66%, 50% 67%, 41% 67%, 
  32% 64%, 
  
  28% 49%, 10% 30%, 10% 22%, 5% 18%, 5% 13%, 0% 9%
  );
  background-color: #b9a80f;
  transition: all px2s ease;
}

.notification:hover .wings {
  transform: scale(1.2);
  animation: pulse_wing 3s ease;
}

.notification:hover .shield {
  animation: pulse 2s ease;
}

.notification:hover .shield-bottom-left {
  left: 3.5rem;
}

.notification:hover .shield-bottom-right {
  left: 6.2rem;
}

.shield {
  z-index: 4;
  display: flex;
  position: absolute;
  width: fit-content;
  top: 19%;
  left: 17%;
  flex-direction: column;
  gap: 3rem;
  transition: all 2s ease;
}

.shield-up, 
.shield-down {
  display: flex;
  position: relative;
}

.shield-bottom-left {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 4rem;
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
  background-color: #696115;
}

.shield-bottom-right {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 5.7rem;
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
  background-color: #696115;
}

.shield-bottom-right-inside {
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
}

.shield-bottom-left-inside {
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
}

.shield-bottom-left-inside,
.shield-bottom-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 5px;
}

.shield-top-left {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 4rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
  background-color: #696115;
}

.shield-top-right {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 5rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
  background-color: #696115;
}

.notification:hover .shield-top-left {
  left: 3.6rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.notification:hover .shield-top-right {
  left: 5.4rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-left-inside,
.shield-top-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 4px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    left: 7%;
    filter: brightness(150%);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse_wing {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    filter: brightness(150%);
  }

  100% {
    transform: scale(1.2);
    filter: brightness(100%);
  }
}

@keyframes pulse_svg {
  0% {
    filter: brightness(100%);
  }

  70% {
    filter: brightness(150%);
  }

  100% {
    filter: brightness(100%);
  }
}

@keyframes pulse_m7 {
  0% {
    filter: brightness(100%);
    visibility: hidden;
    transform: scale(1);
  }

  70% {
    filter: brightness(150%);
    visibility: visible;
    transform: scale(1.3);
  }

  100% {
    filter: brightness(100%);
    visibility: visible;
    transform: scale(1);
  }
}

@keyframes pulse_crystal {
  0% {
    transform: scale(1);
    transform: rotateY(3rad);
  }

  70% {
    transform: scale(1.5);
    filter: brightness(180%);
    transform: rotateY(10rad);
  }

  100% {
    transform: scale(1.3);
    filter: brightness(100%);
    transform: rotateY(80rad);
  }
}

@keyframes show {
  0% {
    visibility: hidden;
    transform: translateY(0);
  }

  100% {
    visibility: visible;
    transform: translateY(5rem);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

</style>

<div class="notification">
  <div class="notification-top">
    <span class="level-up">Level Up!</span>
  </div>
  <div class="notification-bottom">
    <span class="level">Level 5</span>
    <button class="next-level-button">Next Level</button>
  </div>
</div>
<style>
/* From Uiverse.io by WittyHydra - Tags: notification */
.notification {
  --bg-color: #fff;
  --text-color: #1c1f2b;
  --highlight-color: #fc9a32;
  --button-color: #3d3f4e;
  --button-color-hover: #27282f;
  position: relative;
  width: 300px;
  height: 100px;
  background-color: var(--bg-color);
  border-radius: 10px;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .notification {
    --bg-color: #1c1f2b;
    --text-color: #fff;
    --highlight-color: #fc9a32;
    --button-color: #3d3f4e;
    --button-color-hover: #27282f;
  }
}

.notification-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--highlight-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation: slide-down 1s ease-out forwards;
  animation: slide-down 1s ease-out forwards;
}

.notification-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--bg-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
}

.level-up {
  color: var(--text-color);
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-animation: rotate-text 1s ease-in-out;
  animation: rotate-text 1s ease-in-out;
}

.level {
  color: var(--text-color);
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.next-level-button {
  background-color: var(--button-color);
  color: var(--text-color);
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}

.next-level-button {
  background-color: #efefef;
  color: #000;
  font-weight: 600;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 10px #888888;
  box-shadow: 0px 0px 10px #888888;
}

@-webkit-keyframes slide-down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes rotate-text {
  0% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

@keyframes rotate-text {
  0% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}

.next-level-button:hover {
  background-color: aqua;
  color: #000;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 15px #888888;
  box-shadow: 0px 0px 15px #888888;
}

.notification {
  background-color: #1e2b3c;
  color: #c3daf6;
}

.notification:hover {
  background-color: #c3daf6;
  color: #1e2b3c;
}

.next-level-button:hover {
  background-color: #1e2b3c;
  color: #c3daf6;
}

/* Light Mode */
.notification {
  background-color: #c3daf6;
  color: #1e2b3c;
}

.notification:hover {
  background-color: #1e2b3c;
  color: #c3daf6;
}

.next-level-button:hover {
  background-color: #c3daf6;
  color: #1e2b3c;
}
</style>

<div class="notification">
  <div class="icon">
    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" viewBox="0 0 1024 1024"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"><path fill="#E9E8FF" d="M512 512m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z"></path><path fill="#8880FE" d="M723.2 704c-25.6 0-51.2-12.8-70.4-32L582.4 582.4H435.2l-38.4 64c-19.2 32-51.2 57.6-89.6 57.6-57.6 0-102.4-44.8-102.4-102.4v-12.8V576l25.6-166.4c6.4-70.4 57.6-121.6 128-121.6 32 0 70.4 12.8 89.6 38.4 25.6 0 89.6-6.4 128 0 25.6-25.6 57.6-32 89.6-32 51.2 0 96 32 115.2 83.2v12.8l38.4 179.2c0 6.4 6.4 19.2 6.4 32 0 51.2-44.8 102.4-102.4 102.4z"></path><path fill="#FFFFFF" d="M716.8 460.8c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m-108.8 0c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m51.2 57.6c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2z m0-115.2c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2zM345.6 416h-51.2V448h51.2v51.2h32V448h51.2v-32h-51.2v-51.2h-32z"></path></g></svg>
  </div>
  <div class="messages">
    <span class="title">Well done!</span>
    <span class="description">New level reached.</span>
    <span class="level">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 16L12.1937 13.1937V13.1937C12.0867 13.0867 11.9133 13.0867 11.8063 13.1937V13.1937L9 16"></path> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 11L12.1505 8.15049V8.15049C12.0674 8.06738 11.9326 8.06738 11.8495 8.15049V8.15049L9 11"></path> </g></svg>
      lvl. 8
      </span>
      
  </div>
  <div class="action">
    <button>Next</button>
  </div>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: notification */
.notification {
  width: 300px;
  height: 70px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #212121;
  box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1);
  padding: 2px;
  position: relative;
  animation: appear .6s linear alternate-reverse infinite;
  transition: all .6s ease;
}

.icon {
  height: 100%;
  transition: transform .6s ease;
}

.messages {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px;
}

.title {
  font-size: 0.95rem;
  line-height: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #494949;
}

.description {
  font-size: 13px;
  margin-bottom: 4px;
}

.level {
  color: #7d5cf5;
  font-weight: 600;
  background-color: #7d5cf53f;
  display: flex;
  align-items: center;
  flex: 1;
  height: 0;
  width: max-content;
  padding: 4px;
  border-radius: 10px;
}

.level svg {
  height: 140%;
  background-color: #7d5cf5;
  border-radius: 6px;
  margin-right: 4px;
}

.action {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action button {
  padding: 0.5rem  1rem;
  background-color: #7d5cf5;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  height: 40px;
  transition: all .6s ease;
  margin-right: 6px;
}

.notification:hover .icon {
  transform: rotate(45deg);
}

.action button:hover {
  height: 100%;
  margin-right: 0;
}

.action button:active {
  background-color: #4dec48;
}

@keyframes appear {
  from {
    transform: scale(0.98);
  }

  to {
    transform: scale(1);
  }
}
</style>

<div class="notification">
  <svg viewBox="0 0 200 200">
    <path id="star" d="M100,25 L129,79 L186,79 L139,119 L158,173 L100,137 L42,173 L61,119 L14,79 L71,79 z"></path>
    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central">Level Up!</text>
  </svg>
</div>

<style>
/* From Uiverse.io by ahmed150up - Tags: notification */
.notification {
  background-color: #FFF;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.notification svg {
  width: 140px;
  height: 140px;
  fill: #FFD700;
  animation: rotate 3s ease-in-out infinite;
}

.notification #star {
  animation: fill 3s ease-in-out infinite;
  transform-origin: center;
}

.notification text {
  font-size: 30px;
  font-weight: bold;
  fill: #000;
}

@keyframes fill {
  0% {
    fill: transparent;
    transform: scale(1);
  }

  50% {
    fill: #FFD700;
    transform: scale(1.2);
  }

  100% {
    fill: transparent;
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


</style>

<div class="box-avatar">
  <div class="avatar">
      <svg class="avatar-icon" viewBox="0 0 17 15">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
      </svg>
    </div>
</div>
  <div class="notification">    
    <div class="notification-info">
      <p class="notification-text"> <span class="highlight">Player</span> reached <b>level 15!</b> </p>
    </div>
  </div>
<style>
/* From Uiverse.io by alexruix - Tags: notification */
.notification {
  display: flex;
  width: 0;
  background: #ddd;
  border-radius: 10px;
  animation: slideIn 1s ease-in-out 1.25s forwards;
}

.notification-info {
  display: inline-flex;
  overflow: hidden;
  background-color: #181818;
  color: #fff;
  width: 100%;
  border-radius: 12px 8px 8px 12px;
  padding-left: 16px;
  align-items: center;
}

.notification-text {
  opacity: 0;
  padding: 10px 8px;
  white-space: nowrap;
  animation: textInfo 1s ease-in-out 1.5s forwards;
}

.highlight {
  color: #ffc300;
}

.box-avatar {
  background-color: #181818;
  padding: 6px;
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  margin-right: -20px;
  box-shadow: 6.2px 3.1px 38.2px -6px rgba(0, 0, 0, 0.2), 63px 32px 176px -6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.avatar {
  background-color: #FDA203;
  padding: .6em;
  border-radius: 50%;
}

.avatar-icon {
  width: 100%;
  height: 100%;
  fill: white;
  animation: grow 2s ease-in-out 3;
}

/*Animations*/
@keyframes slideIn {
  0% {
    width: 0;
    padding: 2px;
  }

  100% {
    width: 250px;
    padding: 2px;
  }
}

@keyframes textInfo {
  0% {
    opacity: 0%;
    margin-left: -20em;
  }

  100% {
    opacity: 100%;
    margin-left: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale(100%) translateY(0%);
  }

  50% {
    transform: scale(100%) translateY(-10%);
  }

  100% {
    transform: scale(100%) translateY(0%);
  }
}
</style>

<div class="notification">
  <span class="star star1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>    
  <span class="star star2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>
  <span class="star star3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>   
  <div class="ribbon">
  <div class="ribbon-content">Level up!</div>
  <div class="start"> press start</div>
</div>
</div>
<style>
/* From Uiverse.io by andrew-demchenk0 - Tags: notification */
.notification {
  position: relative;
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.start {
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  animation: animate4 5s forwards infinite ease-in-out;
}

.ribbon-content {
  font-size: 35px;
  text-shadow: 1.5px 1.5px 0 #680638,
    -1.5px -1.5px 0 #680638,
    1.5px -1.5px 0 #680638,
    -1.5px 1.5px 0 #680638;
}

.ribbon {
  position: relative;
  width: 300px;
  height: 50px;
  line-height: 50px;
  background-color: #CC014D;
  color: #fff;
  text-align: center;
  font-size: 20px;
}

.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  top: 20px;
  border: 25px solid #DB0F5A;
  z-index: -1;
}

.ribbon::before {
  left: -30px;
  border-left-color: transparent;
}

.ribbon::after {
  right: -30px;
  border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  content: '';
  position: absolute;
  border-style: solid;
  bottom: -20px;
}

.ribbon .ribbon-content:before {
  left: 0;
  border-width: 0 20px 20px 0;
  border-color: transparent #6B043A transparent transparent;
}

.ribbon .ribbon-content:after {
  right: 0;
  border-width: 20px 20px 0 0;
  border-color: #6B043A transparent transparent transparent;
}

.star svg {
  width: 100px;
  height: 100px;
}

.star {
  position: absolute;
}

.star1 {
  top: -85px;
  left: 0;
  transform: rotate(-15deg);
  animation: animate1 5s forwards infinite ease-in-out;
}

.star2 {
  top: -100px;
  left: 50%;
  transform: translate(-50%);
  animation: animate2 5s forwards infinite ease-in-out;
}

.star3 {
  top: -85px;
  left: 100%;
  transform: translateX(-100%) rotate(15deg);
  animation: animate3 5s forwards infinite ease-in-out;
}

@keyframes animate1 {
  0% {
    transform: rotate(-15deg) translateY(0);
  }

  25% {
    transform: rotate(-15deg) translateY(10px);
  }

  50% {
    transform: rotate(-15deg) translateY(0px);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(-15deg);
  }
}

@keyframes animate3 {
  0% {
    transform: translateX(-100%) translateY(0) rotate(15deg);
  }

  25% {
    transform: translateX(-100%) translateY(10px) rotate(15deg);
  }

  50% {
    transform: translateX(-100%) translateY(0) rotate(15deg);
  }

  75% {
    transform: translateX(-100%) rotate(5deg);
  }

  100% {
    transform: translateX(-100%) rotate(15deg);
  }
}

@keyframes animate2 {
  0% {
    transform: translate(-50%) translateY(0);
  }

  25% {
    transform: translate(-50%) translateY(10px);
  }

  50% {
    transform: translate(-50%) translateY(0px) scale(1);
  }

  75% {
    transform: translate(-50%) scale(1.1);
  }

  100% {
    transform: translate(-50%) scale(1);
  }
}

@keyframes animate4 {
  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
</style>

<div class="notification">
  <svg viewBox="0 0 100 100" class="trophy">
    <g>
      <path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
      <path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
      <path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
      <path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
      <path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
      <path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
    </g>
  </svg>
  <p>Congratulations!
  </p><p>You reached level 10!</p>
</div>

<style>
/* From Uiverse.io by devsleonardo - Tags: notification */
.notification {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px;
  color: white;
}

.trophy {
  fill: gold;
  width: 80px;
  height: 80px;
  animation: bounce 0.5s ease-in-out 1;
}

.trophy:hover {
  animation: spin 1s ease-in-out 1;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

</style>

<div class="level-up-notification">
  <p class="kdkkkd">Congratulations! You have reached level 10!</p>
</div>

<style>
/* From Uiverse.io by guilhermeyohan - Tags: notification */
.level-up-notification {
  width: 330px;
  margin: auto;
  background-color: #2ed603a1;
  border-radius: 10px;
  padding: 20px;
  animation: pulse 2s ease infinite, slide-in 1.5s ease;
}

.level-up-notification p.kdkkkd {
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 2px rgba(60, 59, 59, 0.754);
}

@keyframes slide-in {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

</style>

<button class="btn">
  <span class="default-text">New Level Unlocked!</span>
  <span class="hover-text">Congrats!</span>
</button>

<style>
/* From Uiverse.io by jyefu013 - Tags: notification */
.btn {
  padding: 10px;
  border-radius: 5px;
  font-size: 15px;
  background-color: black;
  color: rgb(238, 255, 0);
  position: relative;
  overflow: hidden;
}

.default-text {
  z-index: 1;
}

.hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.btn:hover .default-text {
  opacity: 0;
}

.btn:hover .hover-text {
  opacity: 1;
  animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.btn:hover::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: fireworks 1s linear forwards;
}

@keyframes fireworks {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(4);
    opacity: 0;
  }
}

</style>

<div class="container"></div>
<style>
/* From Uiverse.io by 16alves02 - Tags: simple, green, blue, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #3498db, #3498db 30px, #2ecc71 30px, #2ecc71 60px),
    repeating-linear-gradient(135deg, #e74c3c, #e74c3c 30px, #f1c40f 30px, #f1c40f 60px);
}

</style>

<div class="container"></div>

<style>
/* From Uiverse.io by 16alves02  - Tags: red, green, css, pattern */
.container {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    #289a6a 0%,
    #289a6a 30%,
    #ffcd00 30%,
    #ffcd00 70%,
    #ef3340 70%,
    #ef3340 100%
  );
  background-size: 120px 100%;
  background-repeat: repeat;
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by AmruthGowda91200  - Tags: simple, blue, minimalist, html, css, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      -45deg,
      #ff7e5f,
      #ff7e5f 10px,
      #3f51b5 10px,
      #3f51b5 20px
    ),
    repeating-linear-gradient(
      45deg,
      #3f51b5,
      #3f51b5 10px,
      #ff7e5f 10px,
      #ff7e5f 20px
    ),
    repeating-linear-gradient(
      -30deg,
      #3f51b5,
      #3f51b5 10px,
      #ff7e5f 10px,
      #ff7e5f 20px
    ),
    repeating-linear-gradient(
      30deg,
      #ff7e5f,
      #ff7e5f 10px,
      #3f51b5 10px,
      #3f51b5 20px
    );
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by ArnavK-09  - Tags: simple, white, black, css, pattern, notebook, lines */
.container {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    black,
    1px,
    white 1px,
    white
  );
  background-size: 100% 30px;
  background-color: white;
}

</style>
    

<div class="container"></div>
<style>
/* From Uiverse.io by AspenBranch - Tags: simple, light, pattern */
.container {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #92c9b1, #92c9b1 20px, #b3e0d2 20px, #b3e0d2 40px);
}
</style>

<div class="container"></div>

<style>
/* From Uiverse.io by AspenBranch  - Tags: simple, white, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-color: white;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by BadlyWrittenStylesheet  - Tags: gradient, dark, colorful, rainbow, multicolor, pattern, background */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  /* background-color: lightblue; */
  background-image: radial-gradient(black 55%, #0000),
    /* radial-gradient(black 55%, #0000), */
      linear-gradient(
        135deg,
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        indigo,
        deeppink
      );
  background-size: 100% 0.5%, contain;
  /* background-blend-mode: hard-light; */
  /* background-position: 0 0, 1em 1em, 0 0; */
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by BadlyWrittenStylesheet  - Tags: simple, gradient, modern, light&dark, clean, pattern */
.container {
  --bg: radial-gradient(#000 5%, #0000 6%);
  --size: 3rem;
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  /* background-color: lightblue; */
  background-image: radial-gradient(#000 5%, #0000 6%),
    radial-gradient(#000 5%, #0000 6%);
  background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
  background-size: var(--size) var(--size);
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Cybercom682  - Tags: simple, green, retro, pattern, analog */
.container {
  width: 100%;
  height: 100%;
  --color: rgba(0, 115, 19, 0.3);
  background-color: #191a1a;
  background-image: linear-gradient(
      180deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      45deg,
      transparent 24%,
      var(--color) 35%,
      var(--color) 26%,
      transparent 17%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    );
  background-size: 55px 55px;
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Deri-Kurniawan  - Tags: simple, material design, pattern */
.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 10%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 90% 10%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 90% 90%, #3e73f0 5%, transparent 5%),
    radial-gradient(circle at 10% 90%, #3e73f0 5%, transparent 5%);
  background-size: 20px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: simple, white, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 150px; /* control the size */
  --color: #d1bdbd;

  background: radial-gradient(
      circle at 15% 30%,
      transparent 40%,
      var(--color) 41%
    ),
    radial-gradient(circle at 85% 30%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 50% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 15% 70%, transparent 40%, var(--color) 41%),
    radial-gradient(circle at 85% 70%, transparent 40%, var(--color) 41%),
    linear-gradient(
      45deg,
      var(--color) 25%,
      rgba(0, 0, 0, 0.067) 0,
      rgba(0, 0, 0, 0.067) 50%,
      var(--color) 0,
      var(--color) 75%,
      #1111 0,
      #1111 100%,
      var(--color) 0
    );
  background-size: var(--size) var(--size);
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: simple, blue, white, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 80px; /* control the size */
  --color: #add8e6;

  background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      #add8e6 41%,
      #add8e6 60%,
      transparent 61%,
      transparent 100%
    ),
    linear-gradient(
      45deg,
      #add8e6 25%,
      transparent 25%,
      transparent 50%,
      #add8e6 50%,
      #add8e6 75%,
      transparent 75%,
      transparent
    );
  background-size: var(--size) var(--size);
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Efrain2112  - Tags: circle, css, multicolor, pattern */
.container {
  width: 100%;
  height: 100%;
  --size: 80px; /* control the size */
  --color1: #f29c9c;
  --color2: #ffd700;
  --color3: #7ec8e3;
  --cone: #8b4513;

  background: radial-gradient(
      circle at 50% 30%,
      transparent 30%,
      var(--color1) 31%
    ),
    radial-gradient(circle at 30% 70%, transparent 30%, var(--color2) 31%),
    radial-gradient(circle at 70% 70%, transparent 30%, var(--color3) 31%),
    linear-gradient(to bottom, var(--cone) 50%, transparent 50%);
  background-size: var(--size) var(--size);
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by HarryHeywood04  - Tags: simple, dark, pattern, tile */
.container {
  width: 100%;
  height: 100%;
  background-color: #111111;
  background-image: linear-gradient(
    32deg,
    rgba(8, 8, 8, 0.74) 30px,
    transparent
  );
  background-size: 60px 60px;
  background-position: -5px -5px;
}

</style>
    

<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: black, gradient, dark, pattern, radial, radial-gradient */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #0c0a0a 80%,#2f312f 90%,#3f4549 90%);
  background-size: 65px 65px;
}
</style>

<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: blue, gradient, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #f8f1f1ee 87%,#3fa7b4 90%);
  background-size: 50px 50px;
}
</style>

<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: orange, gradient, gradients, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: repeating-radial-gradient(  #e2d1d1 50%, #e7d2d2ee 70%,#f5c7a1 95%);
  background-size: 50px 50px;
}
</style>

<div class="container"></div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: blue, gradient, diamond, pattern */
.container {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: radial-gradient( #173d49 85%, #36a6f1 90%,#0d1725 20%);
  background-size: 50px 50px;
}
</style>

<div class="container"></div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: simple, html, css, pattern */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  background: linear-gradient(45deg, #000000 25%, transparent 25%),
    linear-gradient(
      -135deg,
      #000000 25%,
      transparent 25%,
      transparent 75%,
      #000000 75%,
      #000000
    );
  background-size: 50px 50px;
}

</style>
    

<div class="container"></div>

<style>
/* From Uiverse.io by Juanes200122  - Tags: simple, blue, pattern */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  background: linear-gradient(45deg, #3498db 25%, transparent 25%),
    linear-gradient(
      -45deg,
      #3498db 25%,
      transparent 25%,
      transparent 75%,
      #3498db 75%,
      #3498db
    );
  background-size: 50px 50px;
}

</style>