/* body {
      background: #111;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      flex-direction: column;
      font-family: Arial, sans-serif;
    } */

     .wrapper {
    position: relative;
    /* width: 90vw; */
    max-width: 300px;
    aspect-ratio: 1 / 1; /* keep circle */
    margin: 2rem auto;
  }

  /* Circle with smoke */
  .circle {
    position: absolute;
    inset: 0;
    filter: url(#wave);
    animation: rotate 30s linear infinite;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
  }

  .circle::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
    filter: blur(6vw);
    z-index: -1;
    
  }

  .circle::before {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 2vw solid #fff;
    box-shadow: 0 0 8vw #fff, inset 0 0 6vw #fff;
    filter: url(#wave) blur(2vw);
    animation: anim 4s linear infinite;
  }

  /* Symbols in center */
  .symbols {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }

  .symbol {
    font-size: clamp(8rem, 10vw, 10rem);
    cursor: pointer;
    animation: pulse 2s ease-in-out infinite alternate;
    user-select: none;
  }

  .pumpkin { animation-delay: 0s; }
  .bat     { animation-delay: 0s; }
  .spider  { animation-delay: 0s; }
 
  /* @keyframes float {
    0%   { transform: translateY(2); }
    50%  { transform: translateY(1vw); }
    100% { transform: translateY(2); }
  } */

 @keyframes pulse {
    from { transform: scale(4); }
    to { transform: scale(12); }
  }

  @keyframes anim {
    0%   { box-shadow: 0 0 8vw #fff, inset 0 0 6vw #fff; }
    20%  { box-shadow: 0 0 8vw #f00, inset 0 0 6vw #f00; }
    40%  { box-shadow: 0 0 8vw #ff0, inset 0 0 6vw #ff0; }
    60%  { box-shadow: 0 0 8vw #0ff, inset 0 0 6vw #0ff; }
    80%  { box-shadow: 0 0 8vw #f0f, inset 0 0 6vw #f0f; }
    100% { box-shadow: 0 0 8vw #fff, inset 0 0 6vw #fff; }
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Slide-down animation for modal */
  .modal.fade .modal-dialog {
    transform: translateY(-2rem);
    transition: transform 0.3s ease-out;
    justify-content: center;
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }

  svg { display: none; }

  .content-section {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
  }

    /* .modal-content {
    position: relative;
    background-color: #212529;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}



.modal-footer {
  border-top:none;
} */

.btn-warning {
   color: #fff;
    background-color: #fe00fe;
    border-color: #eea236;
}

.btn-primary {
  justify-content: center;
  align-items: center;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #d500d5;
    border-color: #d58512;
}

.globe {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, #3a0d5e, #000);
  box-shadow: 0 0 60px rgba(255, 100, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* fog layer 1 */
.globe::before {
  content: "";
  position: relative;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  background: repeating-radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(180, 100, 255, 0.08) 20%,
    transparent 40%
  );
  border-radius: 50%;
  animation: fogDrift 25s linear infinite;
  filter: blur(50px);
  opacity: 0.8;
  mix-blend-mode: screen;
}

/* fog layer 2 */
.globe::after {
  content: "";
  position: relative;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  background: repeating-radial-gradient(
  circle,
    rgba(200, 150, 255, 0.2) 0%,
    rgba(100, 50, 200, 0.1) 25%,
    transparent 50%
  );
  border-radius: 50%;
  animation: fogDriftReverse 40s linear infinite;
  filter: blur(60px);
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* @keyframes fogDrift {
  from { transform: translate(0,0) rotate(0deg); }
  to   { transform: translate(50px,-30px) rotate(360deg); }
}

@keyframes fogDriftReverse {
  from { transform: translate(0,0) rotate(360deg); }
  to   { transform: translate(-40px,30px) rotate(0deg); }
} */