html {
    margin: 4rem;
    padding: 0;
    box-sizing: border-box;
	        cursor: crosshair;
                animation: fadeIn 2s ease-in-out forwards;

}

        @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    
}
}
body {
    background:  radial-gradient(
      circle at 50% 30%,
      #c0eb04 0%,
      #8bff2d 35%,
      #3a9d23 60%,
      #0a2e02 85%,
      #0e3e04 100%
    );
  background-attachment: fixed;
  color: #fff;
    font-family:monospace;
    color: #00ff3c;
    overflow: hidden;
}


.intro {
  font-size: 30px;
  color:#ffffff; 
  font-family:monospace;
  transform: translate(-2px, -2px);
}

 :root{
    --bg: #061212;
    --glow: #3ee05e;
  }

  .sphere-stage {
    width:600px;
    height:600px;
    position:relative;
    user-select:none;
    touch-action:none;
  }


  .sphere-viewport {
    position:absolute;
    inset:0;
    overflow:hidden;
    perspective:1400px;
  }

  .point {
    position:absolute;
    left:0;
    top:0;
    transform-origin:center center;
    will-change: transform, opacity;
    pointer-events:none;
    white-space: pre;
    color:#a4ffa4;
    text-shadow: 0 0 8px rgba(50,255,80,0.18), 0 0 22px rgba(0,0,0,0.7);
    font-weight:600;
  }
    


.menu {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}



.button {
    display: block;
    width: 240px;
    padding: 18px;
    background: linear-gradient(#09c509, #002200);
    border: 2px solid #00ff3c;
    border-radius: 30px;
    text-decoration: none;
    color: #00ff3c;
    font-size: 1.3rem;
    text-align: center;
    transition: 0.18s;
    box-shadow:
        0 0 10px #00ff3c,
        inset 0 0 10px #00ff3c;
}

.button:hover {
    transform: scale(1.2);
    background: linear-gradient(#03dff7, #b09b15);
    box-shadow: 20px #7dd1ff;
    border-color: #ffffff;
    color: #99e1f9;
}

.button2 {
    display: block;
    width: 240px;
    padding: 18px;
    background: linear-gradient(#09c509, #002200);
    border: 2px solid #00ff3c;
    border-radius: 30px;
    text-decoration: none;
    color: #00ff3c;
    font-size: 1.3rem;
    text-align: center;
    transition: 0.18s;
    box-shadow:
        0 0 10px #00ff3c,
        inset 0 0 10px #00ff3c;
}

.button2:hover {
    transform: scale(1.2);
    background: linear-gradient(#ddff00, #d14900);
    box-shadow: 20px #ff6d6d;
    border-color: #feffa9;
    color:#efff7a;
}

.button3 {
    display: block;
    width: 240px;
    padding: 18px;
    background: linear-gradient(#09c509, #002200);
    border: 2px solid #00ff3c;
    border-radius: 30px;
    text-decoration: none;
    color: #00ff3c;
    font-size: 1.3rem;
    text-align: center;
    transition: 0.18s;
    box-shadow:
        0 0 10px #00ff3c,
        inset 0 0 10px #00ff3c;
}

.button3:hover {
    transform: scale(1.2);
    background: linear-gradient(#b74fe6, #440cc7);
    box-shadow: 20px #f4fff7;
    border-color: #fff6f6;
    color: #d396df;
}

.button4 {
    display: block;
    width: 240px;
    padding: 18px;
    background: linear-gradient(#09c509, #002200);
    border: 2px solid #00ff3c;
    border-radius: 30px;
    text-decoration: none;
    color: #00ff3c;
    font-size: 1.3rem;
    text-align: center;
    transition: 0.18s;
    box-shadow:
        0 0 10px #00ff3c,
        inset 0 0 10px #00ff3c;
}

.button4:hover {
    transform: scale(1.2);
    background: linear-gradient(#12e7ff, #281438);
    box-shadow: 20px #faf4ff;
    border-color: #d5edf5;
    color:#a1f6ff
}


.module1 {
        display: none; 
        border: 1px solid #ccc;
        padding: 20px;
        margin-top: 10px;
        background-color: #f9f9f9;

}


@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


@font-face {
  font-family: 'doto';
  font-style: italic;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/doto/v3/t5t6IRMbNJ6TQG7Il_EKPqP9zTnvqouPWhoxrW5OD5k.woff2) format('woff2');
    }