/* General Body Styling */
body {
  background-color: #1a1a2e;
  color: #e0e0e0;
  font-family: 'Cinzel', serif;
}

h1, h2, h3 {
  font-family: 'Cinzel', serif;
}

a {
  color: #bb86fc;
}

/* Header Styling */
.header {
  background-color: #22223b;
  color: #f2e9e4;
}

/* Footer Styling */
.footer {
  background-color: #2e2e3a;
  color: #f0a500;
}

/* Avatar Styling */
.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #bb86fc;
}

/* Navigation Bar Styling */
.nav-header {
  background-color: #22223b;
  color: #f2e9e4;
  text-align: center;
  padding: 10px 0;
}

.nav-header ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-header li {
  display: inline;
  margin: 0 15px;
}

.nav-header a {
  color: #f2e9e4;
  text-decoration: none;
  font-weight: bold;
}

.nav-header a:hover {
  color: #bb86fc;
}

/* Main Content Flexbox Layout */
.main-content {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Left Column Styling */
.left-column {
  flex: 0 0 20%; /* Reduced to 20% width */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.left-column .profile-picture {
  margin-bottom: 10px;
}

.left-column .flavor-text {
  font-size: 18px;
  color: #f2e9e4;
  text-align: center;
  margin: 10px 0;
}

/* Right Column Styling */
.right-column {
  flex: 1; /* The rest of the space */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to start instead of center */
  margin-top: 150px; /* Adjust this value to move it down in alignment with avatar */
}

/* Debut Text Section */
.right-column .debut-text {
  margin-bottom: 20px;
}

/* Banner Image Centered */
.debut-banner {
  width: 100%; 
  text-align: center; /* Center the banner image */
  margin-top: 40px; /* Optional: Adjust to add spacing above the banner */
}

.debut-banner img {
  max-width: 1000px;
  height: auto;
}

/* Subathon Info */
.subathon-info {
  text-align: center;
  margin-top: 20px;
}

/* Button Styling */
.button {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #4a4a9e;
  border: none;
  border-radius: 25px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 0 15px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #6a6aacc;
  transform: scale(1.05);
}

/* Thumbnail image style */
.thumbnail {
  width: 150px;
  height: auto;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.thumbnail:hover {
  transform: scale(2.0);
}

/* Custom styling for the SnootyDeath logo */
.home-logo {
  max-width: 150px;
  max-height: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Ensure the subathon graphic fits well on the screen */
.subathon-graphic {
    width: 90%;
    max-width: 100%; /* Ensures it doesn't exceed the container */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Centers the image */
    margin-left: auto;  /* Centers the image */
    margin-right: auto; /* Centers the image */
}

.lightbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px; /* space between thumbnails and footer */
}

.lightbox::after {
  content: "";
  display: table;
  clear: both;
}


/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    align-items: center;
  }

  .left-column {
    margin-bottom: 20px;
  }

  .right-column {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .debut-banner img {
    width: 100%;
  }

  .button {
    width: auto;
    margin-top: 10px;
  }

  .nav-header ul {
    padding: 0;
    margin: 10px 0;
  }

  .nav-header li {
    display: inline;
    margin: 0 10px;
  }
}