body {
  background-color:#1f1d1d;
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    margin: 0;
    padding: 0
}

a {
  color:#de451b;
}

a:hover {
    text-decoration: solid;
    color: white;
}

.button-container {
  text-align: center;
}

.button {
  background-color: #de451b; /* your orange */
  color: #1f1d1d;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 25px; /* rounded */
  cursor: pointer;
  text-decoration: none; /* remove underline for links */
  display: inline-block;
  font-size: 0.8rem;
  transition: background-color 0.2s ease;
  text-align: center;
}

/* CLEAR and SPACE*/

.clear{
  clear: both;
  height: 0;
  visibility: hidden;
}

.spacer {
  height: 20px;
  width: 100%;
}

/* site title */

h1.sitetitle {
    font-size: clamp(1.5rem, 5vw, 6rem);       /* Large text */
    font-weight: bold;     /* Bold */
    text-align: center;    /* Centered */
    margin: 1.5rem 0;        /* Space above & below */
    letter-spacing: 0px;   /* Optional: spaced-out letters */
    color: #f2f2f2;
}

p.sitetitle {
    font-size: clamp(12px, 5vw, 20px);       /* Large text */
    font-weight: thin;     /* Bold */
    text-align: center;    /* Centered */
    margin: 1rem 1rem;        /* Space above & below */
    color: #f2f2f2;
}

/* Nav Bar */

.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #de451b;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #EBE1E1;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  background-color: #555;
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Banner */

.banner-img {
    display: block;              /* Lets margin: auto work */
    margin: 0;               /* Centers the image horizontally */
    width: 100%;                   /* 80% of the page width */
    height: 300px;                /* Fixed height (adjust as needed) */
    object-fit: cover;            /* Crops instead of stretching */
    border-radius: 0px;          /* Rounded corners */
}

.color-bar {
    height: 50px;
    background-color: #333;
}

.color-bar p {
    font-style: italic;
    font-size: small;
    padding: 15px;
    text-align: right;
    margin: 0;
}

/* Release Gallery */

.release-gallery {
  display: flex;
  flex-wrap: wrap;           /* Wrap to new lines on small screens */
  gap: 10px;                  /* Space between images */
  justify-content: center;    /* Center the row */
}

.release-gallery a {
  flex: 1 1 50px;            /* Grow/shrink, minimum 200px */
  max-width: 200px;           /* Optional max size */
}

.release-gallery img {
  width: 100%;                /* Fill container */
  min-height: auto;               /* Keep aspect ratio */
  border-radius: 8px;         /* Rounded corners */
  transition: transform 0.2s ease;
}

.release-gallery img:hover {
  transform: scale(1.05);     /* Subtle zoom on hover */
}

#releases {
    float: right;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
}
/* CONTENT WRAPPER */

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  line-height: 1.6;
}

hr {
  border: none;          /* remove default style */
  height: 2px;           /* thickness */
  background-color: #777; /* line color */
  margin: 20px 0;        /* space above & below */
  border-radius: 5px;
}

hr.short {
  width: 50%; 
  margin: 20px auto;
  border: none;
  height: 2px;
  border-radius: 5px;
  background-color: #777; /* your orange color */
}

#homepage {
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}

#homepage h1 {
  font-size: 2rem;
}

@media(max-width:800px){
    #homepage{
        width: 100%;
        float: none;
    }
    #releases{
        width: 100%;
        float: none;
    }
}

/* MASTHEAD GALLERY */

.masthead-image-text {
  display: flex;
  align-items: center;   /* Vertically center image and text */
  gap: 15px;             /* Space between image and text */
  flex-wrap: wrap;       /* Allow stacking on small screens */
}

.masthead-image-text img {
  max-width: auto;          /* Fixed image width */
  max-height: 300px;          /* Keep proportions */
  border-radius: 8px;    /* Optional rounded corners */
}

.masthead-image-text .masthead-text {
  flex: 1;               /* Take remaining space */
}


/* Footer */

footer {
    background: black;
    overflow: hidden;
}

footer img {
    object-fit: cover;
    opacity: 0.4;
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.footer-banner {
  position: relative;
  display: flex;
}

.footer-text {
  position: absolute; /* keep it above image */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* adjust for the element’s size */
  color: white;
  text-align: center;
}

/* Featured STORY */

.feature-image-text {
  display: flex;
  align-items: center;   /* Vertically center image and text */
  gap: 15px;             /* Space between image and text */
  flex-wrap: wrap;       /* Allow stacking on small screens */
}

.feature-image-text img {
  max-width: auto;          /* Fixed image width */
  max-height: 300px;          /* Keep proportions */
  border-radius: 8px;    /* Optional rounded corners */
}

.feature-image-text .feature-text {
  flex: 1;               /* Take remaining space */
}

.feature-image-text h2 {
  text-align: center;
  font-size: larger;
  margin: 0;
}

.feature-image-text h3 {
  text-align: center;
  font-size: medium;
  font-weight: bolder;
 margin: 0%;
}

/* AUTHORS */

#magazine-cover {
    float: right;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
}

#magazine-cover img {
  max-width: 75%;
  height: auto;
  border-radius: 8px;
}

#contrib-list {
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}

#contrib-list h1 {
  font-size: 2rem;
}

@media(max-width:800px){
    #contrib-list{
        width: 100%;
        float: none;
    }
    #magazine-cover{
        width: 100%;
        float: none;
    }
}

/* BOOK PAGES */

.center {
  align-items: center;
  text-align: center;
}

.center img {
  max-height: 800px;
  width: auto;
  border-radius: 8px;
}