body, html, #app { margin: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.5) 200%); font-family: 'Orbitron', sans-serif; }
#app { height: 100%; }
.hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; padding: 1rem; }
.text-shadow { text-shadow: 4px 4px 8px rgb(11, 233, 48); }
.no-select { -webkit-user-select: none; user-select: none; }
h1 { margin: 0; padding: 0; text-transform: uppercase; line-height: 100%; font-size: clamp(3rem, 10vw, 10rem); font-weight: 900; letter-spacing: clamp(0.2rem, 1vw, 0.5rem); display: inline-block; text-align: center; }
h1 span { display: inline-block; transition: transform 0.2s ease-in-out; }
h1 span:nth-child(1) { color: #ffffff; }
h1 span:nth-child(2) { color: #f8f6f6; }
h1 span:nth-child(3) { color: rgb(250, 248, 248); }
h1 span:hover { transform: translate3d(0, -15px, 0); }
h2 { margin: 0; padding: 0; color: #95fc7b; text-transform: uppercase; line-height: 100%; font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; letter-spacing: clamp(0.15rem, 0.5vw, 0.3125rem); -webkit-text-stroke: 0.1rem #0e0d0d; text-align: center; }
#webgl-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; }
.click-area { position: absolute; width: clamp(2.5rem, 8vw, 4rem); height: clamp(2.5rem, 8vw, 4rem); background-color: rgba(16, 85, 246, 0.2); border-radius: 50%; cursor: pointer; pointer-events: auto; z-index: 10; border: 0.125rem solid #00ffff; box-shadow: 0 0 0.625rem #00ffff, 0 0 1.25rem #00ffff, 0 0 1.875rem #00ffff; transition: box-shadow 0.15s ease-in-out, transform 0.1s ease-in-out; display: flex; align-items: center; justify-content: center; will-change: box-shadow, transform; }
.click-area:hover { box-shadow: 0 0 1.25rem #00ff73, 0 0 2.5rem #00ff73, 0 0 3.75rem #00ff37; transform: scale(1.2); }
.click-area .material-icons { font-size: clamp(1.5rem, 5vw, 2.5rem); color: #00ffff; }
.modal { display: none; position: fixed; z-index: 11; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal-content { background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 255, 255, 0.05)); margin: 15% auto; padding: clamp(1rem, 3vw, 1.25rem); border: 0.0625rem solid rgba(0, 255, 255, 0.3); width: 90%; max-width: 37.5rem; position: relative; box-shadow: 0 0 1.25rem rgba(0, 255, 255, 0.5), 0 0 2.5rem rgba(0, 255, 255, 0.3); border-radius: 0.625rem; }
.close-button { color: rgba(0, 255, 255, 0.8); float: right; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: bold; cursor: pointer; text-shadow: 0 0 0.3125rem rgba(0, 255, 255, 0.5); }
.close-button:hover, .close-button:focus { color: rgba(0, 255, 255, 1); text-decoration: none; cursor: pointer; }
.modal-content p { color: rgb(65, 59, 59); text-shadow: 0 0 0.3125rem rgba(0, 255, 255, 0.5); font-size: clamp(0.875rem, 2vw, 1rem); }

@media screen and (max-width: 768px) {
    .modal-content { margin: 30% auto; }
}

@media screen and (max-width: 480px) {
    h1 span:hover { transform: none; }
    .click-area:hover { transform: scale(1.1); }
}