/* ---------------------------------------------------------------
   styles.css  —  How the page LOOKS.
   Every rule has a "selector" (which elements it applies to)
   followed by { properties: values; }.
   --------------------------------------------------------------- */


/* 1. RESET + BASE
   Browsers add default spacing and fonts. We override a few so
   things look the same everywhere. */

* {
  /* The "*" selector means "every element on the page". */
  box-sizing: border-box;   /* makes width/padding behave intuitively */
  margin: 0;
  padding: 0;
}

body {
  /* The font stack: try the first one, fall back if missing. */
  font-family: 'Georgia', 'Times New Roman', serif;
  background-color: #0a0a0a;          /* near-black */
  color: #e8e6e3;                     /* off-white text */
  line-height: 1.6;                   /* space between lines */
  min-height: 100vh;                  /* always fill the screen */
  padding: 2rem 1.5rem;               /* breathing room on the edges */
}


/* 2. LAYOUT WRAPPER
   We center the content and stop it from getting too wide on
   big monitors. */

.hero,
main,
footer {
  max-width: 720px;
  margin: 0 auto;                     /* "auto" on left/right = center */
}


/* 3. HERO (top section) */

.hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 3rem;
}

.name {
  font-size: 3rem;                    /* big, dramatic */
  letter-spacing: 0.02em;
  color: #c8302c;                     /* horror-red accent */
  text-shadow: 0 0 12px rgba(200, 48, 44, 0.25);
}

.tagline {
  margin-top: 0.5rem;
  font-style: italic;
  color: #a09e9a;
  font-size: 1.1rem;
}


/* 4. PANELS (the three content sections) */

.panel {
  background-color: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  /* A subtle transition so hover feels smooth. */
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.panel:hover {
  border-color: #c8302c;              /* glow red on hover */
  transform: translateY(-2px);
}

.panel h2 {
  font-size: 1.5rem;
  color: #e8e6e3;
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}

.panel p {
  color: #b0aea9;
  margin-bottom: 1rem;
}


/* 5. LINK LISTS inside panels */

.links {
  list-style: none;                   /* remove bullet points */
  display: flex;                      /* lay items in a row */
  gap: 1.25rem;                       /* space between items */
  flex-wrap: wrap;                    /* wrap if the row is too long */
}

.links a {
  color: #c8302c;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.links a:hover {
  border-bottom-color: #c8302c;       /* underline appears on hover */
}


/* 6. FOOTER */

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2a2a;
  text-align: center;
  color: #6a6864;
  font-size: 0.9rem;
}

footer a {
  color: #a09e9a;
  text-decoration: none;
}

footer a:hover {
  color: #c8302c;
}


/* 7. RESPONSIVE — make it look right on phones
   "@media" rules apply only when a condition is true. */

@media (max-width: 480px) {
  .name {
    font-size: 2.25rem;               /* smaller name on small screens */
  }
  body {
    padding: 1rem;
  }
}