@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/orbitron-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/orbitron-900.woff2') format('woff2');
}

:root {
  --green: #00ff00;
  --green-dim: #00cc00;
  --bg: #000;
  --panel: #111;
  --panel-2: #222;
}

* { box-sizing: border-box; }

body.hack {
  font-family: 'Courier New', monospace;
  background: var(--bg);
  color: #fff;
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto;
  padding: 2em;
}

.hack-back {
  display: inline-block;
  color: #888;
  text-decoration: none;
  font-size: 0.85em;
  margin-bottom: 1.5em;
}
.hack-back:hover { color: var(--green); }

.hack-hero { text-align: center; margin-bottom: 2.5em; }

body.hack h1 {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 2.6em;
  font-weight: 900;
  color: var(--green);
  letter-spacing: 3px;
  margin: 0.2em 0;
  text-shadow: 0 0 12px rgba(0, 255, 0, 0.45);
}

.hack-sub { font-size: 1.15em; color: #ddd; }
.hack-when { margin-top: 1.2em; color: var(--green); font-size: 0.95em; }

body.hack h2 {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 2em;
  color: var(--green);
  letter-spacing: 1px;
}

body.hack h3 { color: var(--green); }

section { margin-bottom: 2em; }

a { color: var(--green); }

.hack-register {
  text-align: center;
  margin: 3em 0;
  padding: 2em;
  border: 2px solid var(--green);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0, 255, 0, 0.15) inset;
}

.hack-btn {
  display: inline-block;
  background: var(--green);
  color: #000;
  padding: 0.9em 2.2em;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  font-size: 1.2em;
  margin: 0.6em 0;
  font-family: 'Orbitron', 'Courier New', monospace;
  letter-spacing: 1px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.hack-btn:hover { background: var(--green-dim); transform: scale(1.05); }
.hack-btn.disabled {
  background: #444;
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.hack-note { color: #bbb; margin-top: 0.8em; font-style: italic; }

.hack-music {
  text-align: center;
  margin: 2em 0;
  padding: 1.5em;
  background: var(--panel);
  border-radius: 10px;
  border-left: 4px solid var(--green);
}
.hack-music h3 { margin-top: 0; }
.hack-music audio { width: 100%; max-width: 420px; margin-top: 0.5em; }

.hack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5em;
  margin: 2em 0;
}
.hack-card {
  background: var(--panel);
  padding: 1.5em;
  border-radius: 10px;
  border-left: 4px solid var(--green);
}
.hack-card h3 { margin-top: 0; }

.hack-faq .faq-item { margin-top: 1.2em; }
.hack-faq .faq-item h3 { font-size: 1.05em; color: #fff; }
.hack-faq .faq-item p { margin-left: 1em; }

.hack-contact {
  background: var(--panel);
  padding: 1.5em;
  border-radius: 10px;
  text-align: center;
  margin: 2em 0;
}
.hack-contact a { font-weight: 700; }

.hack-footer {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 2px solid var(--green);
}
.hack-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
}
.hack-footer-col { text-align: center; }
.hack-footer-col h4 {
  color: var(--green);
  margin-bottom: 1em;
  font-size: 0.85em;
  letter-spacing: 1px;
}
.hack-footer-col img {
  max-height: 70px;
  max-width: 170px;
  object-fit: contain;
}
.hack-org {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  flex-wrap: wrap;
}
.hack-org img { max-height: 56px; }
.hack-footer-text {
  display: block;
  margin-top: 0.8em;
  color: #ccc;
  font-size: 0.85em;
}
.hack-footer-col img[src*="learn-key"],
.hack-footer-col img[src*="timmagini"] {
  background: #d8d8d8;
  border-radius: 8px;
  padding: 8px;
}
.hack-footer-links {
  text-align: center;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #333;
}
.hack-footer-links a {
  color: #aaa;
  text-decoration: none;
  margin: 0 1em;
  font-size: 0.85em;
}
.hack-footer-links a:hover { color: var(--green); }

@media (max-width: 1024px) {
  .hack-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  body.hack { padding: 1.2em; }
  body.hack h1 { font-size: 1.9em; letter-spacing: 1px; }
  .hack-grid { grid-template-columns: 1fr; }
  .hack-footer-grid { grid-template-columns: 1fr; gap: 1.5em; }
}