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

body {
    background-color: #5a8d80ff;
}

#info_heading {
    text-align: center;
    text-justify: auto;
    font-size: 25pt;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color:#e5ffd5;
    padding-bottom: 5pt;
}

#info_text {
    text-align: left;
    text-justify: auto;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 15pt;
    color: #e5ffd5;
    padding-top: 5pt;
    padding-bottom: 5pt;
}

#contact_text {
    text-align: right;
    text-justify: auto;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 15pt;
    color: #e5ffd5;
    padding-top: 5pt;
    padding-bottom: 5pt;
}

/* Container styling to keep columns in a row */
.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 30pt;
    min-width: 100%;
    width: 300pt;
}

/* Container styling for centering the content */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 300pt;
    height: 400pt;
}

/* Main heading styling */
.main-heading {
    padding: 2rem 0;
    text-align: center;
}

/* General information */
.general_info {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    margin: auto;
    width: 50%;
    min-width: 100pt;
    max-width: 250pt;
    height: 400pt;
}

/* Contact information */
.contact_info {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: right;
    margin: auto;
    width: 300pt;
    height: 400pt;
    padding-right: 15pt;
}

/* Carousel content positioning */
.carousel-content {
    position: absolute;
    top: 100%;
    left: 100%;
    padding-top: 15pt;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 50;
}
.carousel-heading {
    font-size: 2rem;
    color: #308d46;
    margin-bottom: 1rem;
}

/* Slideshow styling */
.slideshow {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Wrapper for the slideshow images */
.slideshow-wrapper {
    display: flex;
    width: 1000%; /* 4 images -> 400% width */
    height: 100%;
    position: relative; /* Ensure keyframes 'left' works */
    left: 0;
    animation: slideshow 90s infinite;
}

.slide {
    width: 100%;
    height: 100%;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keyframe animations */
    @keyframes slideshow {
        0%, 5% { left: 0; }
        5%, 10% { left: -100%; }
        10%, 15% { left: -200%; }
        15%, 20% { left: -300%; }
        20%, 25% { left: -400%; }
        25%, 30% { left: -500%; }
        30%, 35% { left: -600%; }
        35%, 40% { left: -700%; }
        40%, 45% { left: -800%; }
        45%, 50% { left: -900%; }
        50%, 55% { left: -900%; }
        55%, 60% { left: -800%; }
        60%, 65% { left: -700%; }
        65%, 70% { left: -600%; }
        70%, 75% { left: -500%; }
        75%, 80% { left: -400%; }
        80%, 85% { left: -300%; }
        85%, 90% { left: -200%; }
        90%, 95% { left: -100%}
        95%, 100% { left: 0; }
    }

/* Carousel control buttons */
.slide-btn {
    background-color: #bbb;
    border-radius: 50%;
    border: .2rem solid #d38800;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
}

/* Position each button individually */
.slide-btn-1 { left: 9%; }
.slide-btn-2 { left: 18%; }
.slide-btn-3 { left: 27%; }
.slide-btn-4 { left: 36%; }
.slide-btn-5 { left: 45%; }
.slide-btn-6 { left: 54%; }
.slide-btn-7 { left: 63%; }
.slide-btn-8 { left: 72%; }
.slide-btn-9 { left: 81%; }
.slide-btn-10 { left: 90%; }

/* Stop animation when focused on buttons */
.slide-btn-1:focus ~ .slideshow-wrapper { animation: none; left: 0; }
.slide-btn-2:focus ~ .slideshow-wrapper { animation: none; left: -100%; }
.slide-btn-3:focus ~ .slideshow-wrapper { animation: none; left: -200%; }
.slide-btn-4:focus ~ .slideshow-wrapper { animation: none; left: -300%; }
.slide-btn-5:focus ~ .slideshow-wrapper { animation: none; left: -400%; }
.slide-btn-6:focus ~ .slideshow-wrapper { animation: none; left: -500%; }
.slide-btn-7:focus ~ .slideshow-wrapper { animation: none; left: -600%; }
.slide-btn-8:focus ~ .slideshow-wrapper { animation: none; left: -700%; }
.slide-btn-9:focus ~ .slideshow-wrapper { animation: none; left: -800%; }
.slide-btn-10:focus ~ .slideshow-wrapper { animation: none; left: -900%; }

/* Button focus styling */
.slide-btn:focus {
    background-color: #308d46;
}