:root {
--pink:#ff00cc;
--cyan:#00ffff;
--yellow:#fff700;
--purple:#9d00ff;
--bg:#060018;
}

body {
margin:0;
background:var(--bg);
color:white;
font-family:Orbitron;
text-align:center;
}

header {
padding:60px 20px;
background:radial-gradient(circle,#220044,#000);
}

h1 {
font-family:'Press Start 2P';
color:var(--pink);
text-shadow:0 0 15px var(--pink),0 0 30px var(--purple);
}

nav {
background:black;
padding:15px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

nav a {
color:var(--cyan);
text-decoration:none;
font-weight:bold;
}

.section {
padding:60px 10%;
position: relative;
margin-bottom:40px;
}

.section-title {
display:inline-block;
padding:10px 20px;
border:2px solid var(--cyan);
color:var(--cyan);
font-family:'Press Start 2P';
font-size:1em;
margin-bottom:30px;
}

.year-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
gap:12px;
max-width:600px;
margin:30px auto;
}

button {
background:black;
border:2px solid var(--cyan);
color:var(--cyan);
padding:10px;
cursor:pointer;
font-family:'Press Start 2P';
font-size:0.7em;
}

button:hover {
border-color:var(--pink);
color:var(--pink);
}

.big-link {
display:block;
margin-top:20px;
font-size:1.2em;
color:var(--yellow);
text-decoration:none;
}

.hidden {
display:none;
}

.card-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.card {
border:2px solid var(--cyan);
padding:25px;
}

.card a {
color:var(--yellow);
text-decoration:none;
}

input {
padding:10px;
width:80%;
max-width:400px;
}

ul {
list-style:none;
padding:0;
}