/* Basic Reset */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

/* Scrolling banner at top */
.banner {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 50px;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10;
     overflow: hidden;
 }

 .banner-text {
     font-family: 'Sacramento', cursive; /* Same as other text */
     font-size: 2rem; /* Bigger */
     color: white;
     white-space: nowrap;
     position: absolute;
     height: 50px;
     line-height: 50px; /* Vertical centering */
     animation: move 13s linear infinite; /* Slower by another 2 seconds */
 }

 @keyframes move {
     0% { left: -100%; }
     100% { left: 100%; }
 }

/* Set the background image with transparency */
body {
    font-family: Arial, sans-serif;
    color: white;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background%20.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.7;
    z-index: -1;
}

/* Date section */
.date {
         text-align: center;
         padding: 10px; /* Minimal padding */
         margin-top: 0; /* No gap between texts */
   }

/* Style for the date */
h2 {
        font-family: 'Sacramento', cursive; /* Handwritten font */
        font-size: 7.35rem; /* 30% smaller */
        color: white;
        letter-spacing: 2px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black; /* Black outline */
        margin: 0;
        user-select: none;
  }

/* Content section for top */
.content {
          text-align: center;
          padding: 20px; /* Reduced padding to minimize gap */
          margin-top: 50px; /* Space from top */
     }

/* Style for the header */
h1 {
       font-family: 'Sacramento', cursive; /* Handwritten font */
      font-size: 10.5rem;
      color: white;
      letter-spacing: 2px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black; /* Black outline */
      margin: 0;
      user-select: none;
   }

/* Images section */
.images {
      padding: 20px;
      margin: 50px auto 0; /* Center horizontally and space from top */
      max-width: 500px; /* Center the container */
      text-align: center;
  }

   .images img {
       width: 100%;
       max-width: 500px; /* Reduced by 50% */
       height: auto;
       display: block;
       margin: 0 auto 60px; /* Center each image and add bottom margin for gaps */
   }

    /* Responsive design for smaller screens */
    @media (max-width: 1200px) {
      h1 {
        font-size: 7rem;
      }
      h2 {
        font-size: 4.9rem; /* 30% smaller than 7rem */
      }
      .images {
        max-width: 400px;
      }
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 5rem;
      }
      h2 {
        font-size: 3.5rem; /* 30% smaller than 5rem */
      }
      .images {
        max-width: 300px;
      }
    }