body {
    font-family: 'Pacifico', cursive;
    background: linear-gradient(135deg, #2e2a25, #4a443d); /* Dark earthy gradient */
    color: #f5f5dc; /* Light beige for text */
    margin: 0;
}

header {
    width: 60%; /* Set width to 80% for a more compact look */
    background-color: rgba(59, 58, 48, 0.8); /* Dark base color */
    padding: 10px; /* Corrected padding */
    text-align: center;
    position: sticky; /* Makes the header sticky */
    top: 0; /* Sticks to the top of the page */
    z-index: 1000; /* Ensures it stays on top of other elements */
    /* border-bottom: 1px solid #fff; /* Optional border for visibility */
    margin: 0 auto; /* Centering the header */
}

.nav-button {
    background-color: #8B4513; /* Saddle brown */
    color: #fff;
    padding: 10px 20px; /* Adjusted padding */
    border: 2px solid #d2b48c; /* Tan border */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
    margin: 5px; /* Reduced margin for compactness */
    transition: all 0.3s ease; /* Smooth transition */
}

.nav-button:hover {
    background-color: #d2b48c; /* Tan on hover */
    color: #3b3a30; /* Dark olive green text on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

section {
    width: 60%; /* Set width to 60% */
    background-color: #5a4e40; /* Dark brown */
    padding: 20px;
    margin: 20px auto; /* Centered with auto horizontal margins */
    border: 2px solid #3b3a30; /* Match header color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    border-radius: 10px; /* Rounded corners */
}

h1 {
    color: #faf0e6; /* Floral white */
}

p {
    color: #ddd; /* Lighter gray for better readability */
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

input, textarea {
    width: calc(100% - 20px); /* Adjusted for padding */
    padding: 10px;
    margin: 10px;
    border: 2px solid #8B4513; /* Saddle brown */
    border-radius: 5px; /* Rounded corners */
    background-color: #404040; /* Dark gray */
    color: #f5f5dc; /* Light beige */
}

button[type="submit"] {
    background-color: #8B4513; /* Saddle brown */
    color: #FFF;
    padding: 10px 20px; /* Consistent button height */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #d2b48c; /* Tan on hover */
    color: #3b3a30; /* Dark olive green on hover */
}

/* New style for the profile photo */
.profile-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-bottom: 20px;
}

.profile-container .profile-photo {
    width: 150px !important; /* Use !important to override any conflicting styles */
    height: 150px !important;
    max-width: 150px; /* Add max-width to prevent expansion */
    max-height: 150px; /* Add max-height to prevent expansion */
    border-radius: 50%;
    object-fit: cover;
    margin-left: 50px;
    flex: 0 0 auto; /* Prevent the image from flexing */
}

.profile-info {
    flex: 1;
}

/* Ensure images don't exceed their container width */
img {
    max-width: 100%;
    height: auto;
}