* {
    background-color: #f6f2f7;
    font-family: arial;
}

h1 {
    color: blueviolet;
    text-align: center;
    font-size: 3em;
    font-style: italic;
    background-color: #d8cae6;
}

#heading {
    text-align: center;
    margin-top: 20px; /* Adjusted for better alignment */
}

.button-container {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background-color: #cae6e4;
}

.custom-button {
    padding: 10px 20px;
    background-color: darkturquoise;
    color: black;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    text-decoration: none; /* Ensure buttons are not underlined */
}

.custom-button:hover {
    color: cyan;
    background: darkturquoise;
}

a {
    text-decoration: none; /* Remove underlines from links */
    color: black; /* Ensure link text color is consistent */
}

a:hover {
    color: cyan;
    background: darkturquoise;
}

/* Media query for hover effects on touch devices */
@media (hover: hover) {
    .custom-button:hover {
        color: cyan;
        background: darkturquoise;
    }
    a:hover {
        color: cyan;
        background: darkturquoise;
    }
}

.fit-picture {
    align-items: center;
    width: 75%; /* Ensures the image never exceeds the width of its container */
    height: 85%; /* Maintains the aspect ratio of the image */
    display: block; /* Removes extra space below the image */
    margin: 5% ; /* Centers the image horizontally with vertical margins */
}

.photo{
    align-items:center;
    height: 90%;
    width:75%;
    margin:5%;
    border-style: solid;
    border-width:5px;
    border-color: black;
}