.intro {
    position: relative;
    width: auto;
    align-items: center;
    align-content: center;
}

.intro h1,
.intro p {
    font-family: 'Times New Roman', Times, serif;
    border: 2px solid #0E202D;
    box-shadow: 2vw 2vw 2vw rgba(0, 0, 0, 0.3);
    padding: 12px;
}

.intro h1 {
    position: relative;
    color: white;
    font-size: 4rem;
}

.intro p {
    font-family: Garamond, 'Times New Roman', Times, serif;
}

.introduction {
    position: relative;  /* Add this to create stacking context */
    background-image: url('../img/upside_down_trees.svg');
    background-size: 120% !important;
    width: 100vw;
    background-position: center center !important;
    display: flex;
    background-color: floralwhite;
    padding-bottom: 5vh;
    flex-direction: column;
    align-items: center;
    z-index: 1;  /* Lower z-index for background */
}

.introduction h1, p {
    width: 50vw;
    margin: 0;
    text-align: center;
    position: relative;  /* Add this to lift above background */
    z-index: 2;  /* Higher z-index to appear above background */
}

.introduction h1 {
    margin-top: 15vh;
    color: #0E202D;
}

#whatis {
    background-color: floralwhite;  /* Optional: add slight white background for better readability */
    margin: 20px;
    border-radius: 8px;  /* Optional: rounded corners */
    color: #0E202D;
    overflow-y: auto;
    font-size: clamp(16px, 3vh, 68px);
    z-index: 7;
}

@media (max-width: 600px) {
    .intro {
        position: relative;
        width:auto;
        align-items: center;
        align-content: center;
    }

    #whatis {
        background: none;
        font-size: clamp(16px, 2vh, 68px);
        top: 7vh;
        width: 90vw;
        position: relative;
        color: white;
        text-align: center;
        overflow-y: auto;
        border: white 2px solid;
        background-color: none;
    }

    
    .introduction{
        background-image: url('background_images/homeheadbckrnd.jpg');
        background-size: cover !important;
        position: flex;
        height: 100%;
        top: 50%;
    }

    .introduction::before{
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: black;
        opacity: .6;
        height: 100%;
    }
    
    .introduction h1 {
        position: relative;
        color: white;
        font-family:Georgia, 'Times New Roman', Times, serif;
        top: 13.5vh;
        font-size: 4vh;
        width: 90vw;
        border: white 2px solid;
        height: 15vh;
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}