body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--color-deep-gray);
    color: var(--color-white);
}

/* ---------- START: Typography ---------- */

h1, h2, h3, h4, h5, h6, p, a {
    color: var(--color-white);
    font-size: 10px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

/* ---------- START: Wrapper ---------- */
.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  justify-content: center;
  overflow: hidden;
  width: 100dvw;
}

/* ---------- END: Wrapper ---------- */

/* ---------- START: Elements ---------- */

.element-top {
    position: absolute;
    top: 15px;
    left: 15px;
}

.square {
  align-items: center;
  background: var(--color-white);
  border-radius: var(--border-radius-14);
  display: flex;
  height: 200px;
  justify-content: center;
  position: relative;
  width: 200px;
}

.logo {
  height: 100px;
  width: 100px;
}

/* ---------- END: Elements ---------- */




/* ---------- START: Neon Rainbow ---------- */
.neonRainbow::before,
.neonRainbow::after {
  border-radius: var(--border-radius-16);
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  background: conic-gradient(
    from var(--angle),
    var(--color-red),
    var(--color-orange),
    var(--color-yellow),
    var(--color-green),
    var(--color-blue),
    var(--color-indigo),
    var(--color-violet),
    var(--color-red)
  );
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  z-index: -1;
  animation: spinAngle 3s linear infinite;
}

.neonRainbow::before {
  box-shadow: 0 0 30px -10px rgba(0,0,0, .2);
}

.neonRainbow::after {
  filter: blur(40px);
  z-index: -2;
}
/* ---------- END: Neon Rainbow ---------- */

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

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

@keyframes neonPulse {
  0% {
    box-shadow:
      0 0 45px -8px rgba(var(--rgb-red), 0.6),
      0 0 70px -4px rgba(var(--rgb-red), 0.4),
      0 0 95px 0px rgba(var(--rgb-red), 0.2);
  }
  20% {
    box-shadow:
      0 0 55px -2px rgba(var(--rgb-orange), 0.6),
      0 0 80px 2px rgba(var(--rgb-orange), 0.4),
      0 0 105px 6px rgba(var(--rgb-orange), 0.2);
  }
  40% {
    box-shadow:
      0 0 45px -8px rgba(var(--rgb-yellow), 0.6),
      0 0 70px -4px rgba(var(--rgb-yellow), 0.4),
      0 0 95px 0px rgba(var(--rgb-yellow), 0.2);
  }
  60% {
    box-shadow:
      0 0 55px -2px rgba(var(--rgb-green), 0.6),
      0 0 80px 2px rgba(var(--rgb-green), 0.4),
      0 0 105px 6px rgba(var(--rgb-green), 0.2);
  }
  80% {
    box-shadow:
      0 0 45px -8px rgba(var(--rgb-blue), 0.6),
      0 0 70px -4px rgba(var(--rgb-blue), 0.4),
      0 0 95px 0px rgba(var(--rgb-blue), 0.2);
  }
  100% {
    box-shadow:
      0 0 45px -8px rgba(var(--rgb-red), 0.6),
      0 0 70px -4px rgba(var(--rgb-red), 0.4),
      0 0 95px 0px rgba(var(--rgb-red), 0.2);
  }
}

@keyframes rainbowBackground {
  0% {
    background: var(--color-red);
  }
  16.6% {
    background: var(--color-orange);
  }
  33.3% {
    background: var(--color-yellow);
  }
  50% {
    background: var(--color-green);
  }
  66.6% {
    background: var(--color-blue);
  }
  83.3% {
    background: var(--color-violet);
  }
  100% {
    background: var(--color-red);
  }
}

/* ---------- END: Helpers ---------- */

/* ---------- START: Safari Fix ---------- */
/* Safari (iOS + macOS): remove blur and use shadow-based glow */
@supports (-webkit-touch-callout: none) or (-webkit-backdrop-filter: blur(0)) {
  .neonRainbow::after {
    filter: none !important;
    -webkit-filter: none !important;
    z-index: -2;
    animation: neonPulse 10s ease-in-out infinite;  
  }

  .neonRainbow::before {
    background: var(--color-red);
    animation: rainbowBackground 10s ease-in-out infinite;
  }
}
/* ---------- END: Safari Fix ---------- */