@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --percent {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
:root {
  --color-background: #050816;
  --color-surface: #080B19;
  --color-primary: #00f5ff;
  --color-secondary: #7c3aed;
  --color-accent: #ff2e63;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
}

body .section {
  background: linear-gradient(var(--angle), var(--color) 0%, rgb(255, 255, 255) 120%);
  position: relative;
  animation: rotateGradient 10s linear infinite;
  height: fit-content;
  padding: 1px;
}
body .section .sectionInside {
  background-color: var(--color-surface);
}
body .container .mask {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgb(124, 58, 237) var(--percent), rgb(0, 245, 255) 100%);
  animation: pulseGradient 15s linear infinite;
  -webkit-mask-image: var(--link);
  -webkit-mask-position: center, center;
  -webkit-mask-size: 100% 100%, 21px 21px;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-image: var(--link);
  mask-position: center, center;
  mask-size: 100% 100%, 21px 21px;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
}
body form input {
  width: calc(100% - 1rem);
}
body form textarea {
  width: calc(100% - 1rem);
}

@media (width >= 64rem) {
  body form input {
    width: calc(100% - 2rem);
  }
  body form textarea {
    width: calc(100% - 1rem);
  }
}
@keyframes rotateGradient {
  to {
    --angle: 360deg;
  }
}
@keyframes pulseGradient {
  0% {
    --percent: -10%;
  }
  50% {
    --percent: 45%;
  }
  100% {
    --percent: -10%;
  }
}

/*# sourceMappingURL=main.css.map */