.elementor-165 .elementor-element.elementor-element-0e90738{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-dd056f1 */@import url(https://fonts.googleapis.com/css?family=Passion+One);

:root {
  --hue: 0deg;
}

body, html {
  height: 100%;
  display: grid;
  padding: 0;
  margin: 0;
  background: radial-gradient(
      farthest-corner at bottom right,
      rgba(2, 50, 50, 1),
      transparent 50%
    ),
    linear-gradient(
      to right top,
      #3c3f60,
      #41486f,
      #46517f,
      #495a8f,
      #4c649f,
      #426faa,
      #3579b3,
      #2384bb,
      #008fb9,
      #0399b4,
      #2da2ac,
      #4caaa4
    );
  filter: hue-rotate(var(--hue));
  overflow: hidden;
}

#container {
  margin: auto;
  border-radius: 100%;
  transition: all 0.4s ease-in-out;
  &:hover {
    transform: scale(1.03);
  }
  @media (max-width: 468px) {
    width: 80%;
  }
}

button {
  --filter-hue-rotate: 0deg;
  --filter-brightness: 1;
  --filter-shadow: 0 0 0 transparent;
  aspect-ratio: 1;
  width: min(40vw, 40vh);
  background: radial-gradient(40vh, rgba(49, 54, 109, 0.5), transparent),
    radial-gradient(
      circle 30vw at top,
      rgba(1, 180, 210, 0.3),
      #638ad4,
      transparent
    ),
    radial-gradient(circle 20vw at bottom, #2c305a, transparent);
  font-family: "Passion One";
  font-size: min(8vw, 8vh);
  color: white;
  cursor: pointer;
  border-radius: 100%;
  border: none;
  opacity: 0.4;
  box-shadow: -10px 14px 24px -7px rgba(55, 254, 255, 0.82) inset,
    5px -10px 18px 4px rgba(55, 254, 255, 0.22) inset;
  animation: 6s ease-in reshape, 1.4s ease-in 5 color,
    6s cubic-bezier(0.2, -2, 0, 0.5) 15s infinite reshape,
    0.8s cubic-bezier(0.01, -0.5, 0, 0) 10s infinite color;
  animation-play-state: paused;
  transition: all 1s ease-in-out;
  &:hover {
    --filter-hue-rotate: 20deg;
    box-shadow: -10px 14px 24px -7px rgba(55, 254, 255, 0.82) inset,
      5px -10px 18px 4px rgba(55, 254, 255, 0.22) inset,
      0 0 30px 0 rgba(14, 64, 76, 0.5);
    animation-duration: 8s, 1s;
    & span {
      animation-play-state: running;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  @media (max-width: 468px) {
    width: 100%;
    font-size: max(22px, 18vw);
  }
}

span {
  font-weight: bold;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.4) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 2s;
  animation: 2s gradient infinite paused;
}

@keyframes reshape {
  0% {
    background-position: left 50%, 0, 0%;
    transform: normal;
  }
  10% {
    transform: scaleX(0.95) skewy(-4deg);
  }
  20% {
    transform: scaleX(0.98) scaleY(0.93) skew(1deg -1deg);
  }
  30% {
    transform: scaleX(0.94) scaleY(1);
  }
  50% {
    background-position: right top 20%, top 5vw, 20%;
    transform: scaleX(1.02) scaleY(0.95) skewx(2deg);
  }
  70% {
    transform: scaleX(0.95) skewY(2deg) skewx(-2deg);
  }
  90% {
    transform: scaleY(1.01) skewX(2deg);
  }
  100% {
    transform: normal;
    background-position: left 50%, 0, 20%;
  }
}

@keyframes color {
  0%,
  100% {
    filter: brightness(var(--filter-brightness))
      drop-shadow(var(--filter-shadow)) hue-rotate(var(--filter-hue-rotate));
  }
  50% {
    --filter-brightness: 1.05;
    --filter-shadow: 0 0 10px rgba(55, 254, 255, 0.2);
    filter: brightness(var(--filter-brightness))
      drop-shadow(var(--filter-shadow)) hue-rotate(var(--filter-hue-rotate));
    background-color: rgba(26, 30, 79, 0.5);
    opacity: 0.5;
  }
}

@keyframes gradient {
  to {
    background-position: 200% center;
  }
}/* End custom CSS */