@font-face {
  font-family: "Super Mario Maker 2";
  src: url("fonts/super-mario-maker-2.ttf") format("truetype");
}
body {
  margin: 0;
  padding: 24px;
  font-family: "Super Mario Maker 2";
  background: #000;
  color: #0000ff;
}

h1 {
  margin-bottom: 24px;
  color: #0000ff;
}

header img {
  width: 250px;
}

#video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.video-card {
  background: #0a0a0a;
  padding: 12px;
  border: 3px solid #0000ff;
  border-radius: 0px;
  text-align: center;
}

.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid #0000ff;     /* Blue border */
  border-radius: 0px;
}

.video-card :hover {
  box-shadow: 0 0 14px #0000ff;
}

.video-card h3 {
  margin-top: 10px;
  font-size: 16px;
  color: #0000ff;
}

a {
  text-decoration: none;
  color: inherit;
}

#category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.category-box {
  background: #0a0a0a;
  padding: 30px;
  border-radius: 0px;
  text-align: center;
  border: 3px solid #0000ff;
}

.category-box h2 {
  color: #0000ff;
}

/* Limit video size on page */
#player {
  width: 100%;              /* full width of container */
  max-width: 900px;         /* never wider than 900px */
  height: auto;             /* maintain aspect ratio */
  display: block;
  border-radius: 0px;       /* optional: rounded corners */
}