body {
    background-image: url('/Visuals/Images/Tree.jpg');
    background-position: 0% 30%;
    background-repeat: no-repeat;
    margin: 0;
    color: white;
    min-height: 70vh;
    font-family: 'Rancho', serif;
}


/* -------------------------------------------------------------------------------------------- */




.PoemContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 9vw;
    max-width: 100%;
    flex-wrap: wrap;
}


.PoemLeft, .PoemRight {
    max-width: 40vw;
    text-align: center;
}

.TitleLeft, .TitleRight {
    font-size: 2.6rem;
    color: #c7c47a;
    text-align: center;
    font-weight: bold;
    text-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1),
                 -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                  0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                 -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1);

}

.MainLeft, .MainRight {
    font-size: 1.5rem;
    color: #eeefc2;
    text-align: center;
    text-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1),
                -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                 0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1);

}

.InfoLeft, .InfoRight {
    font-size: 1.1rem;
    font-style: italic;
    color: #e1dc6d;
    text-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1),
                 -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                 0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 1),
                 -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 1);

}


@media (max-width: 768px) {
    .PoemContainer {
        display: block;
        text-align: center;
    }

    .PoemLeft, .PoemRight {
        max-width: 90vw;
        margin: 0 auto 4vh auto;
    }
}