/*
  NEON MAXIMA Website Stylesheet

  This stylesheet defines the dark, high‑contrast look of the Neon Maxima
  universe. It leans on a Y2K cyberpunk palette of deep blacks and fiery
  reds, accented by glowing highlights. Typography is set in the MS Gothic
  family to evoke an old Macintosh or Windows interface from the early
  2000s while remaining legible on modern devices. Scrollbars, buttons
  and widgets are all customized to reinforce the 90s‑era web aesthetic.
*/

/* Color variables and font settings */
:root {
  --bg-color: #010101;          /* nearly black background */
  --primary-color: #ff0033;     /* intense neon red */
  --secondary-color: #330010;   /* dark maroon for subtle contrast */
  --accent-color: #ffcc00;      /* golden highlight */
  --font-main: "MS Gothic", "Arial", sans-serif;
}

/* Global resets and body styles */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-color);
  color: #eeeeee;
  font-family: var(--font-main);
  line-height: 1.5;
  scroll-behavior: smooth;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
}

/* Header and navigation */
header {
  background: linear-gradient(90deg, #100010, #200012);
  padding: 10px 5%;
  border-bottom: 2px solid var(--primary-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 25px;
  align-items: center;
}

nav li {
  position: relative;
}

nav li a {
  padding: 10px 15px;
  font-weight: bold;
  display: block;
}

/* Dropdown menu styling */
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-color);
  border: 1px solid var(--primary-color);
  min-width: 180px;
  padding: 0;
  list-style: none;
  z-index: 999;
}

nav li:hover ul {
  display: block;
}

nav li ul li a {
  padding: 10px;
  border-bottom: 1px solid var(--secondary-color);
}

nav li ul li:last-child a {
  border-bottom: none;
}

/* Hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  background-image: url('images/hero.png');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #ffffff;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
}

.hero-content {
  position: relative;
  text-align: center;
  z-index: 1;
  padding: 20px;
}

.neon-title {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 40px var(--primary-color);
}

.neon-subtitle {
  font-size: 1.5rem;
  color: var(--accent-color);
  text-shadow: 0 0 10px var(--accent-color);
  margin-bottom: 20px;
}

/* Generic section wrapper */
.section {
  padding: 50px 8%;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-color);
}

.section p {
  margin-bottom: 15px;
}

/* Cards used on the home page */
.card {
  background: rgba(20, 0, 20, 0.5);
  padding: 20px;
  margin: 20px 0;
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 15px rgba(255, 0, 50, 0.4);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(255, 0, 50, 0.6);
}

/* Buttons */
.button {
  background: var(--primary-color);
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
}

/* Modal windows */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
}

.modal-content {
  background: #111111;
  padding: 20px 30px;
  border: 2px solid var(--primary-color);
  max-width: 600px;
  width: 100%;
  color: #ffffff;
  position: relative;
  overflow: auto;
  max-height: 90vh;
}

.modal-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 15px;
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--primary-color);
  line-height: 1;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tab-button {
  background: var(--secondary-color);
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  flex: 1;
  min-width: 120px;
  text-align: center;
}

.tab-button.active,
.tab-button:hover {
  background: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-color);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Scrollable box (timeline and other lists) */
.scrollbox {
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(10, 0, 10, 0.5);
  border: 1px solid var(--primary-color);
}

.scrollbox::-webkit-scrollbar {
  width: 8px;
}

.scrollbox::-webkit-scrollbar-track {
  background: #200010;
}

.scrollbox::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 10px rgba(255, 0, 50, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.gallery-item:hover {
  box-shadow: 0 0 15px rgba(255, 0, 50, 0.6);
}

/* Forms */
form {
  max-width: 600px;
  margin: 0 auto;
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: #200010;
  color: #ffffff;
  border: 1px solid var(--primary-color);
  font-family: var(--font-main);
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  box-shadow: 0 0 10px var(--primary-color);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* Footer */
.footer {
  background: #100010;
  padding: 20px;
  text-align: center;
  color: #aaaaaa;
  border-top: 2px solid var(--primary-color);
  font-size: 0.9rem;
}

/* Clock display */
.clock {
  font-size: 1.6rem;
  color: var(--accent-color);
  text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
  margin-top: 20px;
  text-align: center;
}

/* Quote section */
.quote-box {
  margin-top: 20px;
  font-style: italic;
  color: #dddddd;
  text-align: center;
}