/* Page Style Setup */
body {
  font-family: 'Trebuchet MS', sans-serif;
  background-color: #000;           /* black background */
  color: #fff;                      /* white text color */
  text-align: center;                 /* center text elements */
  margin: 0;                          /* remove default margin around the body */
}

/* Banner */
header {
  background-image: url('Scott pilgrim.jpg');
  background-size: cover;              /* make the image fill header */
  background-position: center;         /* keep image centered */
  height: 350px;                       /* banner height */
  display: flex;
  align-items: center;                 /* center text in banner */
  justify-content: center;
  color: white;
  text-shadow: 2px 2px 8px #000;
}

header h1 {
  font-size: 2.5em;
  background-color: rgba(0, 0, 0, 0.6); 
  padding: 10px 20px;                  /* spacing around text */
  border-radius: 10px;                 /* rounded corners */
  border: 2px solid #e50914;         /* Scott Pilgrim red */
}

/* === TABLE === */
table {
  margin: 40px auto;                   /* centers table horizontally */
  border-collapse: collapse;           /* removes gap in tables */
  width: 70%;                          
  background-color: #696969;         /* dark gray background */
  border: 3px solid #e50914;         /* red border */
  box-shadow: 0 0 20px #e50914;      /* red shadow */
}

th, td {
  border: 1px solid #e50914;         /* Thin red lines between cells */
  padding: 15px;                       /* space inside cells */
  text-align: left;                    /* align text to left */
  color: #fff;
}

th {
  background-color: #e50914;         /* red background for header row */
  color: #fff;
  font-size: 1.2em;
}

td {
  background-color: #222;            /* dark gray background for contrast */
}

/* Hyperlinks */
a {
  color: #ff4081;                   /* pink link color */
  text-decoration: none;              /* remove underline */
  font-weight: bold;                 /* bold for emphasis */
}

/* Hover effect for links */
a:hover {
  text-decoration: underline;        /* underline when hovered */
  color: #ff79c6;                 /* lighter pink when hovered */
}

/* Footer */
footer {
  margin-top: 40px;                /* space above the footer */
  font-size: 0.9em;               /* slightly smaller text */
  color: #d3d3d3;                  /* light gray text */
  padding: 1em;                   /* space inside footer */
  border-top: 1px solid #e50914; /* red top border to match theme */
}