/* Reset some default styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Use your custom font, Youth-Medium.woff2 (optional if you have it) */
@font-face {
  font-family: 'YouthMedium';
  src: url('fonts/Youth-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Body & Font */
body {
  font-family: 'YouthMedium', Arial, sans-serif;
  color: #333;
  background-color: #fff;
}

/* Wrapper: Slightly narrower page on large screens, but fluid on smaller screens */
.wrapper {
  width: 70%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Banner Header */
.banner-header {
  position: relative;
  width: 100%;
  background: url("images/2222.png") no-repeat center center;
  background-size: cover;
  min-height: 600px;
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
}

.banner-text h1 {
  font-size: 3em;
  margin: 0.2em;
}

/* Main Container for content + sidebar */
.main-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;  
  margin-bottom: 20px;
  /* 
    By default, two columns side-by-side.
    We'll let them shrink a bit on small screens
    without forcing a big layout change.
  */
  flex-wrap: nowrap;  /* Avoid stacking automatically */
  overflow-x: auto;   /* Allow horizontal scrolling if very narrow */
}

/* Content Area */
.content-area {
  flex: 2;
  margin-right: 20px;
  line-height: 1.4;
}

.content-area p {
  margin-bottom: 1em;
}

/* Sidebar: holds writer bios */
.sidebar {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Bio blocks: two-column layout inside each link */
.bio-block {
  display: flex;
  background-color: #fffc58;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  font-size: 0.9em;
  transition: background-color 0.2s ease, transform 0.1s ease;
  cursor: pointer;
  line-height: 1.2;
}

.bio-block:hover {
  background-color: #fffa20;
  transform: translateY(-2px);
}

/* Left column: name + image stacked */
.bio-left {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-right: 15px; /* Gap before the text column */
}

/* The small writer image inside the left column */
.bio-image {
  width: 80px;
  height: auto;
  margin-top: 8px; /* Little space beneath the name */
}

/* Right column: the actual text */
.bio-right {
  display: flex;
  align-items: center; /* Vertically center the text with the image (optional) */
}

/* Blank header to create extra space at the bottom of the page */
.blank-header {
  height: 50px;
}

/* Make the favicon / top-left logo smaller */
.top-left-logo {
  margin: 10px; /* Spacing from edges */
  position: absolute;
  top: 10px;
  left: 10px;
}

.top-left-logo img {
  width: 75px;
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  /* Let the wrapper take up more horizontal space on small screens */
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }

  /* Slightly reduce banner height and heading size */
  .banner-header {
    min-height: 300px;
  }
  .banner-text h1 {
    font-size: 2em;
  }

  /* Content can shrink slightly, but still side-by-side if there's room */
  .content-area {
    margin-right: 10px;
  }
}