@import url('https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@700&family=Poppins:wght@600&display=swap'); :root { --background: #0D0D0D; --neon-blue: #00A8FF; --neon-purple: #A55BFF; --red: #FF4B4B; --text: #FFFFFF; } body { background-color: var(--background); color: var(--text); font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-purple); } .logo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.5rem; color: var(--text); text-shadow: 0 0 8px var(--neon-purple); margin-bottom: 2rem; } .workshop-box { border: 1px solid var(--neon-purple); padding: 1.5rem; margin: 2rem auto; max-width: 450px; border-radius: 8px; background-color: rgba(13, 13, 13, 0.8); box-shadow: 0 0 15px var(--neon-purple); } .workshop-box p { margin: 0.5rem 0; font-size: 1.1rem; } .btn-primary { font-family: 'Poppins', sans-serif; font-weight: 600; background: var(--neon-blue); border: none; border-radius: 5px; padding: 12px 30px; color: var(--background); text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); } .btn-primary:hover { background: var(--neon-purple); color: var(--text); box-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple); } .form-control { background-color: #1a1a1a; border: 1px solid var(--neon-purple); color: var(--text); border-radius: 5px; } .form-control:focus { background-color: #1a1a1a; border-color: var(--neon-blue); color: var(--text); box-shadow: 0 0 8px var(--neon-blue); } .form-label { font-family: 'Poppins', sans-serif; color: var(--neon-purple); } .container { max-width: 600px; }