body {
    background-image: url('/Visuals/Images/ShoreDistant.jpg');
    background-size: 100% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    color: white;
    min-height: 80vh;
    font-family: 'Bilbo', serif;
}



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


.PoemContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 10vw;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}


.PoemBox {
    display: inline-block;
    max-width: none;
    flex-grow: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
    margin-bottom: 2vh;
}

@media screen and (max-width: 700px) {
    .PoemBox {
        flex-basis: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
      }
}


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



.TitleLeft, .TitleRight {
    font-size: 3.2rem;
    color: #a8c9ff;
    text-align: center;
    font-weight: bold; 
    cursor: pointer;
    animation: Pulse 3s ease 0s infinite normal none; 
}

@keyframes Pulse {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.1);
    }
  
    100% {
      transform: scale(1);
    }
  }

.TitleLeft.stop-animation, .TitleRight.stop-animation {
    animation: none;
}

.TitleLeft:hover,
.TitleRight:hover {
    text-decoration: underline;
    font-size: 3.5rem; 
}


.MainLeft, .MainRight {
    font-size: 1.8rem;
    color: #d6e0ff  ;
    text-align: left;
    padding: 0 0.2rem;
    box-sizing: border-box;
}

.InfoLeft, .InfoRight {
    font-size: 1.2rem;
    font-style: italic;
    color: #d1c3e4 ;
}


.PoemContent {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.6s ease, padding 0.6s ease;
    background: none; 
    padding: 0 2rem;
}

.PoemContent.open {
    max-height: none; 
    opacity: 1;
    transition: opacity 0.6s ease, padding 0.6s ease;
}


.PoemContainer h2 {
    cursor: pointer;
}