body, html {
      height: 100%;
      margin: 0;
      font: 400 15px/1.8 "Lato", sans-serif;
      color: #777;
      scroll-behavior: smooth;
    }

    .bgimg-1, .bgimg-2, .bgimg-3 {
      position: relative;
      opacity: 0.65;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .bgimg-1 {
      background-image: url("/public/background.jpg");
      min-height: 75%;
    }

    .bgimg-2 {
      background-image: url("/public/2022huskyhack.jpg");
      min-height: 400px;
    }

    .caption {
      position: absolute;
      left: 0;
      top: 40%;
      width: 100%;
      text-align: center;
      font-size: 10vh;
      color: #ffffff;
    }

    @media (max-width: 1007px) {
      .caption {
        position: absolute;
        left: 0;
        top: 40%;
        text-align: center;
        display:flex;
        justify-content: center;
        font-size: 6vw;
        color: #ffffff;
      }
    }

      .wrap-text {
        white-space: normal;
        word-wrap: break-word;
        width: 80%;
        overflow-wrap: break-word;
      }

    .caption span {
      font: "Lato", sans-serif;
      letter-spacing: 5px;
      text-transform: uppercase;
    }

    h3 {
      letter-spacing: 5px;
      text-transform: uppercase;
      font: 20px "Lato", sans-serif;
      color: #111;
    }

    @media only screen and (max-device-width: 1024px) {
      .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
      }
    }
            
        /* Timeline Section */
        .timeline {
        position: relative;
        max-width: 700px;
        margin: auto;
        padding: 20px 10px 20px 60px;
        }


        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #ddd;
            top: 0;
            bottom: 0;
            left: 4%;
            margin-left: -3px;
        }


        .timeline-event {
        position: relative;
        margin-bottom: 20px;
        color: gray;
        font-size: 16px;
        padding-left: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease forwards;
        }

        .timeline-event::before {
        content: '';
        position: absolute;
        left: -11px;
        top: 10px;
        width: 10px;
        height: 10px;
        background-color: #007BFF;
        border-radius: 50%;
        }

        /* Entry animation */
        @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }