.banner {
    height: 200px;
    display: flex;
    width: 90%; /* Takes 90percent width on small screens */
    max-width: 1170px; /* Prevents it from getting too wide */
    flex-wrap: wrap; /* Allows stacking when needed */
    justify-content: space-between;
    background-color: yellow; /* Temporary color */
    margin: 0 auto;
}

/* Left & Right divs take up 50% of the banner */
.banner-left, .banner-right {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    font-style: italic;
}

/* Example Background Images (Replace with actual images) */
.banner-left {
  width: 50%;
  height: 100%;
  position: relative; /* Allows positioning of text */
  background-image: url('../images/Banner_02_01.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}


.banner-right {
    width: 50%;
    height: 100%;
    position: relative; /* Allows positioning of text */
    background-image: url('../images/Banner_01_01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-text {
    position: absolute;
    bottom: 0%;
    right: 5%; /* Adjust left positioning */
    transform: translateY(-50%); /* Adjust to perfect center */
    font-size: clamp(16px, 4vw, 25px); /* Minimum 16px, scales with viewport, max 40px */
    color: white; /* Make text stand out */
    text-shadow: 2px 2px 8px black; /* Add readability effect */
    font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
    font-weight: bold;
}

.banner-text-left {
    position: absolute;
    bottom: 0%;
    right: 5%; /* Adjust left positioning */
    transform: translateY(-50%); /* Adjust to perfect center */
    font-size: clamp(16px, 4vw, 25px); /* Minimum 16px, scales with viewport, max 40px */
    color: white; /* Make text stand out */
    text-shadow: 2px 2px 8px black; /* Add readability effect */
    font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
    font-weight: bold;
}




/* Keyframes for the animation */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Content container styling */
.content-container {
    width: 90%; /* Takes 90percent width on small screens */
    max-width: 1170px; /* Prevents it from getting too wide */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/* News box styling */
.news-box {
    width: 780px;
    background:
        url('/public/images/newsboxgradient.png') center/cover no-repeat,
        #b2f2ff;
    border: 2px solid #00008b;
    margin-top: 0;
    padding: 15px;
}

.news-box h2 {
    font-family: "Times New Roman", serif;
    margin-bottom: 10px;
}

.news-box .news-date {
    font-family: "Times New Roman", serif;
    font-style: italic;
    margin-bottom: 15px;
}

.news-box .news-content {
    font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
    font-size: 25px;

}



#news-content-wrapper {
  max-height: 200px; /* adjust until the full news-box stays under 487px total */
  overflow: hidden;
  position: relative;
}

#news-content::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 10px;
  background: linear-gradient(to right, rgba(255,255,255,0), #b2f2ff 90%);
  color: black;
  font-weight: bold;
  display: block;
  height: 3rem;
  width: 100%;
  text-align: right;
}

#read-post-link {
  display: block;
  text-align: right;
  margin-top: 10px;
  font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
  font-size: 1.4rem;
  color: blue;
  text-decoration: underline;
}





.fanart-box {
    width: 390px;
    height: 487px;
    background:
        url('/public/images/fanartgradient.png') center/cover no-repeat,
        yellow;
    margin-top: 0;
    padding: 15px;
    font-size: 24px;
    color: black;
    border: 2px solid #00008b;

}

#fanart-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#latest-fanart {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#fanart-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#latest-fanart {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.fanart-title {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  font-family: "Book Antiqua", "Times New Roman", serif;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}



.read-post-archive {
  display: block;
  text-align: center;
  font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: #00008b;
  text-decoration: underline;
  margin: 10px auto 5px auto; /* top & bottom spacing */
}



/*<!--
Todo: Change the background color for each device
Mobile Devices: 319px — 480px
iPads and Tablets: 481px — 1200px
Laptops: 1201px — 1600px
Desktops: 1601px and more
-->*/



/* 📱📟 iPads and Tablets: 481px - 1200px */
@media screen and (min-width: 481px) and (max-width: 1200px) {
    /* Add tablet-specific styles here */
}

/* 💻 Laptops: 1201px - 1600px */
@media screen and (min-width: 1201px) and (max-width: 1600px) {
    /* Add laptop-specific styles here */
}

/* 🖥️ Desktops: 1601px and more */
@media screen and (min-width: 1601px) {
    /* Add desktop-specific styles here */
}

/* 📱 Mobile-Friendly Adjustments */
@media screen and (max-width: 768px) {


    .banner {

        width: 100%;
        flex-direction: column; /* Stack them vertically */
        height: auto; /* Adjust height automatically */

        }

    .banner-left, .banner-right {

        width: 100%; /* Each div takes full width when stacked */
        height: 100px; /* Adjust height as needed */
        min-height: 200px; /* Ensures banner is at least 330px tall */

        }




    .content-container {
        flex-direction: column; /* Stack sections */
        width: 100%;
    }

    .news-box, .fanart-box {
        width: 100%; /* Reduce width for better fit */
        margin: 0px auto; /* Keep centered */
    }

    #mountain-tile, #grass-tile, #clouds-corner, #clouds-corner-right {
        background-size: cover; /* Make sure backgrounds fill mobile */
    }
}


/* News Title */
#news-title {
  font-family: "Book Antiqua", "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #222;
}

/* News Date */
#news-date {
  font-family: "Book Antiqua", "Times New Roman", serif;
  font-size: 2rem;
  font-style: italic;
  color: #555;
  margin-bottom: 1em;
}

/* News Content */
#news-content {
  font-family: "ChalkboardSE", "Comic Sans MS", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #333;
}