body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #e5f4e3; 
    color: #2d4739; 
}

h1 {
    color: #2d4739;
}

.subtitle {
    color: #4a683f; 
    font-weight: bold;
}

#titles-container {
    margin-top: 20px;
}

.title {
    color: #2d4739;
    cursor: pointer;
    margin: 5px 0;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
}

.title:hover {
    color: #1b3c28; 
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f0e6d2; 
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(117, 76, 36, 0.3); 
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    border: 2px solid #2d4739; 
}

#popup.hidden {
    display: none;
}

#close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #754c24; 
}

#close:hover {
    color: #4a2f18; 
}

#popup img {
    max-width: 300px;
    margin-top: 10px;
}

a {
    color: #2d4739;
    text-decoration: none;
}

a:hover {
    color: #1b3c28;
}