/*CUSTOM CSS FOR STEAM COMIC*/

@import url(https://fonts.bunny.net/css?family=fredericka-the-great:400);
.fredericka-the-great-regular {font-family: 'Fredericka the Great', serif; font-weight: 400; font-style: normal;}

.steam h1 {font-size: 6rem; color: #7f3303;}
.steam h2 {font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 100; line-height: 2.5rem; font-size: 1.5rem; opacity: 0.8;}
.steam h2 a {color: #a95f80; text-decoration: none;}
.container-fluid-steam {width: 90%; margin: 0 auto;}
.steam header {width: 60%; margin: 0 auto;}
.steam-icon {background-size: cover; height: 150px;width: 150px; border-radius: 50%;}

/* Ensure images fill their containers */
.comic-panel {width: 100%; height: auto; display: block;}
/* Optional: Add some breathing room */
.comic-page {padding: 20px 0; background-color: #f5f5f5;}
.panel-10 {object-fit: cover; object-position: 20%; /* or: left, right, 30% 50%, etc. */ height: 600px; /* adjust to match height of other panels */}
.panel-10-bg {background-size: cover; background-position: 66% center; /* adjust: left center, 40% center, etc. */height: 600px; /* match other panel heights */width: 100%;}

/* Optional: Max width for very large screens */
@media (min-width: 1400px) {
  .comic-page .container-fluid-steam {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/*MOBILE*/
@media only screen and (max-width: 768){
    .container-fluid-steam {width: 100;}
    .steam-header {width: 100;}
    .steam h1 {font-size: 3rem;}
    .steam h2 {font-size: 1rem;}
}
@media only screen and (max-width: 576px){
.steam header {width: 90%; margin: 0 auto;}
.panel-10 {object-fit: cover; object-position: 20%; /* or: left, right, 30% 50%, etc. */ height: 450px; /* adjust to match height of other panels */}
.panel-10-bg {background-size: cover; background-position: 70% center; /* adjust: left center, 40% center, etc. */height: 450px; /* match other panel heights */width: 100%;}


}