* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body { background-color: #000; color: white; font-family: Arial, sans-serif; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background-color: #111; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 24px; font-weight: bold; }
.navigation a { color: white; text-decoration: none; margin-left: 30px; font-size: 14px; letter-spacing: 2px; transition: color 0.3s ease; }
.navigation a:hover { color: #a100ff; }
.hero { height: 400px; background-color: #222; display: flex; justify-content: center; align-items: center; }
.tiles { display: flex; justify-content: center; gap: 40px; padding: 80px 20px; flex-wrap: wrap; }
.tile { background-color: #111; width: 40%; height: 250px; text-align: center; padding: 20px; font-size: 24px; font-weight: bold; border: 2px solid #333; transition: background-color 0.3s ease; }
.tile:hover { background-color: #a100ff; color: black; }
ul { list-style: none; margin-top: 10px; }
.merch-placeholder { background-color: #333; color: #aaa; width: 100%; height: 150px; display: flex; justify-content: center; align-items: center; }
.triple-tiles { display: flex; justify-content: center; gap: 40px; padding: 80px 20px; }
.tile-small {
    background-color: #111;
    width: 30%;
    height: auto;
    border: 2px solid #333;
    padding: 0;
}

.tile-small img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.slideshow { height: 400px; background-color: #222; margin-top: 80px; }
.footer { display: flex; justify-content: center; gap: 50px; padding: 40px 20px; background-color: #111; }
.footer a { color: white; text-decoration: none; font-size: 16px; transition: color 0.3s ease; }
.footer a:hover { color: #a100ff; }
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.header-image {
    width: 100%;
    height: auto;
    display: block;
}
.slideshow-image {
    width: 100%;
    height: auto;
    display: block;
}
.merch-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .navigation {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
  
    .tiles, .triple-tiles {
      flex-direction: column;
      align-items: center;
    }
  
    .tile, .tile-small {
      width: 90%;
    }
  
    .logo {
      font-size: 20px;
    }
  
    .navigation a {
      font-size: 12px;
    }
  
    .footer {
      flex-direction: column;
      gap: 20px;
    }
  }