body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  /* Base font, overridden for H1/H2 */
  /* The random gradient script in index.html will set/override background properties */
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

/* Container for centering the content */
.container {
  max-width: 600px;
  width: 100%;
  padding: 20px;
}

/* Style for the logo */
.logo {
  /* Original: max-width: 300px; */
  max-width: 225px;
  /* Scaled down to ~75% (300 * 0.75) */
  width: 100%;
  height: auto;
  /* Original: margin-bottom: -20px; */
  margin-bottom: -15px;
  /* Scaled down to ~75% (-20 * 0.75) */
  /* Original: padding: 20px; */
  padding: 15px;
  /* Scaled down to ~75% (20 * 0.75) */
  /* NEW: Disable dragging and selection for the logo */
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  /* Also helps prevent selecting the image */
  -webkit-user-select: none;
  /* For older browsers */
}

/* ADDED: Styling for the H1 title part */
.container h1 {
  font-family: 'Teko', sans-serif;
  /* Use the podcast title font */
  /* Original: font-size: 2.5em; */
  font-size: 1.875em;
  /* Scaled down to ~75% (2.5 * 0.75) */
  margin-top: 0;
  /* Original: margin-bottom: -5px; */
  margin-bottom: -3.5px;
  /* Scaled down to ~75% (-5 * 0.75, adjusted slightly) */
  letter-spacing: 2px;
  /* Match spacing from podcast.css header */
  text-transform: uppercase;
  /* Match uppercase from podcast.css header */
  color: #ffffff;
  line-height: 1.1;
}

/* ADDED: Styling for the H2 host name part */
.container h2 {
  font-family: 'The Nautigal', cursive;
  /* Use the host name font */
  /* Original: font-size: 3.5em; */
  font-size: 2.625em;
  /* Scaled down to ~75% (3.5 * 0.75) */
  margin-top: 0;
  /* Original: margin-bottom: 20px; */
  margin-bottom: 15px;
  /* Scaled down to ~75% (20 * 0.75) */
  color: #ffffff;
  line-height: 1.1;
}


/* ADDED: Responsive adjustments for H1 and H2 */
@media (max-width: 600px) {
  .container h1 {
    /* Original: font-size: 2em; */
    font-size: 1.5em;
    /* Scaled down to ~75% (2 * 0.75) */
    /* Original: margin-bottom: -3px; */
    margin-bottom: -2.5px;
    /* Scaled down to ~75% (-3 * 0.75, adjusted slightly) */
  }

  .container h2 {
    /* Original: font-size: 2.5em; */
    font-size: 1.875em;
    /* Scaled down to ~75% (2.5 * 0.75) */
    /* Original: margin-bottom: 15px; */
    margin-bottom: 11.5px;
    /* Scaled down to ~75% (15 * 0.75, adjusted slightly) */
  }

  /* Adjusted logo margin in mobile view */
  .logo {
    /* Original: margin-bottom: -10px; */
    margin-bottom: -7.5px;
    /* Scaled down to ~75% (-10 * 0.75) */
  }

  /* Adjusted sub-heading size and margin in mobile view */
  /* Leaving these as is, as they were not part of the requested scaling */
  .sub-heading {
    font-size: 1em;
    margin-bottom: 10px;
  }

  /* Adjusted line margin in mobile view */
  /* Leaving this as is, as it was not part of the requested scaling */
  .line {
    margin: 20px 0 !important;
  }
}


/* Style for the description text (originally inside the glassmorphism div) */
/* NOTE: The inline styles on the div and p for the bio are still in index.html */
/* If you want to style them here, you'd need to remove the inline styles */
.description {
  font-size: 1em;
  margin-bottom: 20px;
}

.line {
  border: none !important;
  height: 1px !important;
  background-color: #ffffff !important;
  margin: 30px 0 !important;
  opacity: 0.2 !important;
  overflow: visible !important;
}

/* Container for the buttons */
.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Style for each button */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 10px;
  text-decoration: none;
  border-radius: 10px;
  font-size: 1em;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.3s, border 0.3s;
  min-width: 120px;
  text-align: center;
}

.button i {
  margin-right: 8px;
}

.button:hover {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Action buttons */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0;
}

.action-buttons .button {
  padding: 15px;
  font-size: 1em;
}

.action-buttons .button.small {
  padding: 6px;
  min-width: auto;
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.action-buttons .button.small:hover {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Social media icons - Not used in the current index.html */
.social-media {
  margin-bottom: 20px;
}

.social-icon {
  color: #ffffff;
  margin: 0 10px;
  font-size: 1.5em;
  text-decoration: none;
}

.social-icon:hover {
  color: #cccccc;
}

/* Copyright text */
.copyright {
  font-size: 0.8em;
  color: #ffffff;
}

/* Style for sub-headings */
.sub-heading {
  font-style: italic;
  font-size: 1.1em;
  margin-bottom: 15px;
}