body, html {
    height: 100%;
    margin: 0;
    font-family: 'Arial';
      background-color: #323232;
      overflow-x: hidden;
      font-weight: lighter;
      -webkit-transition: fadeIn 2s;
      -moz-transition: fadeIn 2s;
      -o-transition: fadeIn 2s;
      -ms-transition: fadeIn 2s;
      transition: fadeIn 2s;
      scroll-behavior: smooth;
      -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
  }
  
  .hero-image {
    background-image: linear-gradient(rgba(255, 255, 255, 0), #262726), url("IMG_Hero_Image.jpg");
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
    
    .hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      border-color: white;
      padding: 10px 10px;
      font-weight: 100;
    }
    
    @keyframes swipe {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
    
        100% {
            opacity: 1;
        }
        
    }
    .hero-text h1 {
        font-size: 50px;
        animation: swipe 0.6s;
    }
    
    .hero-text p {
      animation: swipe 0.6s;
    }
  
  .footer {
      text-align: center;
      font-size: 20px;
      margin-top: 100px;
      height: auto;
      color: white;
  }
  
  .footer p {
      color: white;
  }
  
  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }
  








  .history-container {
    text-align: center;
    width: 100%;
    margin: 30px auto;
    background-color: #262726;
    padding: 20px;
    box-sizing: border-box; /* include padding in width calculation */
}

.history-container h1 {
    font-size: 36px;
    color: white;
    margin: 20px auto;
}

.history-container i {
    font-size: 3em;
    margin-bottom: 10px;
}

.history-container img {
    margin-top: 20px;
}

.history-container {
    list-style: none;
    padding: 0;
    margin: 0; /* reset margin */
    text-align: center; /* center the list */
}

.history-container li {
    margin: 20px auto; /* increased margin for more spacing */
    width: 70%;
    list-style: none;
}

.history-container a {
    display: block;
    padding: 15px 30px; /* increased padding for larger clickable area */
    border: 0.5px solid grey;
    border-radius: 25px;
    text-decoration: none;
    color: #ffffff;
    transition: background-color 0.3s, color 0.3s;
}

.history-container a:hover {
    background-color: #ffffff;
    color: #1c1c1c;
}

/* Media queries for mobile devices */

/* For screens with a maximum width of 768px (e.g., iPads) */
@media only screen and (max-width: 768px) {
    .history-container {
        margin: 20px 0;
    }
    .history-container h1 {
        font-size: 28px;
        color: white;
        text-align: center;
    }
    .history-container li {
        margin: 15px auto; /* increased margin for more spacing */
        width: 80%; /* adjust width to reduce offset */
    }
    .history-container a {
        padding: 10px 20px; /* adjusted padding */
        font-size: 14px;
    }
}

/* For screens with a maximum width of 480px (e.g., smartphones) */
@media only screen and (max-width: 480px) {
    .history-container {
        margin: 15px 0;
        padding: 10px;
    }
    .history-container h1 {
        font-size: 22px;
    }
    .history-container li {
        margin: 10px auto; /* increased margin for more spacing */
        width: 90%; /* adjust width to reduce offset */
    }
    .history-container a {
        padding: 8px 15px; /* adjusted padding */
        font-size: 12px;
    }
}