:root {
    /* Farbschema */
    --background-color: #FFFAF0; /* Light background */
    --header-background: rgba(255, 165, 0, 0.85); /* Semi-transparent orange */
    --header-title-color: #4B2E1D; /* Dark autumn color */
    --search-button-color: #8B4513; /* Brown for search */
    --menu-button-color: #CD853F; /* Warmer orange-brown for menu */
    --hover-button-color: #DAA520; /* Golden tone on hover */
    --dropdown-background: rgba(255, 239, 213, 0.95); /* Warm, semi-transparent background */
    --dropdown-text-color: #4B2E1D; /* Dark autumn color for dropdown links */
    --timeline-color: #CD853F; /* Warm orange-brown for the timeline */
    --timeline-entry-background: #FFF9E8; /* Soft background color for cards */
    --profile-title-color: #4B2E1D; /* Dark autumn color for title */
    --description-color: #555; /* Darker gray color for better readability */
    --modal-header-background: #FFFAF0; /* Light background for header */
    --suggestion-hover-color: rgba(255, 165, 0, 0.1); /* Light orange on hover */
}

/* Body */
body {
    background-color: var(--background-color); /* Use the variable */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 70px; /* Equal to the header height */
}

/* Sticky and transparent header */
header {
    background-color: var(--header-background); /* Use the variable */
    backdrop-filter: blur(8px); /* Adds a blur effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    padding: 15px 20px;
    position: fixed; /* Make it stick to the top */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    z-index: 1000; /* On top of other elements */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px; /* Fixed height */
}

/* Header title styling */
header h1 a {
    color: var(--header-title-color); /* Use the variable */
    text-decoration: none;
    font-size: 24px;
}

/* CSS for text wrapping */
.entry-title,
.entry-description {
    overflow-wrap: break-word; /* Break long words */
    word-wrap: break-word; /* Old browsers */
    white-space: normal; /* Allow wrapping */
}

/* Menu button and search button styles */
.menu-btn, #searchButton {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

#searchButton {
    background-color: var(--search-button-color); /* Use the variable */
}

#menuButton {
    background-color: var(--menu-button-color); /* Use the variable */
}

.menu-btn:hover, #searchButton:hover {
    background-color: var(--hover-button-color); /* Use the variable */
}

/* Dropdown menu styling */
.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 70px; /* Ensure it opens below the header */
    right: 0; /* Aligns it to the right of the menu button */
    left: auto; /* Reset left to auto to avoid conflicts */
    background-color: var(--dropdown-background); /* Use the variable */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Deeper shadow */
    border-radius: 8px; /* Rounded corners */
    min-width: 180px; /* Minimum width */
    max-height: 300px; /* Set a max height to prevent overflowing */
    overflow-y: auto; /* Allow scrolling if content exceeds max height */
    z-index: 1100; /* Ensure it stays on top of other elements */
}

/* Dropdown links */
.dropdown-menu a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--dropdown-text-color); /* Use the variable */
    text-decoration: none;
    font-weight: 500;
}

.dropdown-menu a:hover {
    background-color: var(--hover-button-color); /* Use the variable */
}

/* Dropdown icons */
.dropdown-menu img {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

/* Profile Banner */
.profile-banner {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Default to row layout */
    align-items: center; /* Center align items */
    justify-content: center; /* Center horizontally */
    margin-bottom: 20px; /* Spacing below */
    background-color: #f8f9fa; /* Light background */
    padding: 10px; /* Inner padding */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Profile Picture */
.profile-picture {
    flex: 0 0 auto; /* Prevent flex from growing or shrinking */
    margin-right: 15px; /* Space between image and text */
}

.profile-banner img {
    width: 150px; /* Increased width for better visibility */
    height: 150px; /* Increased height for better visibility */
    border-radius: 50%; /* Round image */
    object-fit: cover; /* Avoid distortion */
}

/* Profile Details */
.profile-details {
    flex: 1; /* Allow this to grow and take remaining space */
    text-align: center; /* Center text on small screens */
}

/* Center profile title and description for better visibility */
.profile-title {
    font-size: 1.5rem; /* Adjust font size for the title */
    margin-bottom: 0.5rem; /* Space below title */
    color: var(--profile-title-color); /* Use the variable */
    margin: 0; /* Remove default margin */
}

.profile-description {
    font-size: 1rem; /* Font size for description */
    color: var(--description-color); /* Use the variable */
    margin: 0; /* Remove default margin */
}

/* Timeline */
.timeline {
    position: relative; /* Position relative for vertical line */
    margin-top: 20px; /* Spacing above timeline */
}

/* Vertical Timeline Line */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%; /* Center it */
    top: 0; /* Start from the top */
    bottom: 0; /* Extend to the bottom */
    width: 4px; /* Width of the line */
    background-color: var(--timeline-color); /* Use the variable */
    transform: translateX(-50%); /* Center the line */
}

/* Timeline Entries */
.timeline-entry {
    word-break: break-all;
    background-color: var(--timeline-entry-background); /* Use the variable */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Inner padding */
    margin: 10px 0; /* Spacing between entries */
    position: relative; /* Needed for absolute positioning */
    display: flex; /* Use flexbox for layout */
    align-items: flex-start;  /*Align items to the top */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

/* Scroll Animation */
.timeline-entry.in-view {
    transform: translateY(0); /* Slide into place */
    opacity: 1; /* Fully visible */
}

/* Entry Text */
.entry-text {
    padding: 10px; /* Inner padding */
    word-wrap: break-word; /* Allow breaking long words */
    overflow-wrap: break-word; /* Standard way to break long words */
    white-space: normal; /* Ensure text wraps normally */
    max-width: 600px; /* Set a max width to help with wrapping */
    display: inline-block; /* Allows proper width management */
}

/* Additional styling for entry text */
.entry-text h5 {
    color: var(--profile-title-color); /* Use the variable */
    margin: 0; /* Remove default margin */
}

/* Ensure description paragraphs wrap */
.entry-text p {
    margin: 0; /* Remove default margin */
    line-height: 1.5; /* Improve readability */
}

/* Timeline Image */
.timeline-image {
    max-width: 150px; /* Set a max width for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1200; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
}

.modal-content {
    margin: auto; /* Center the modal */
    display: block; /* Show the image */
    width: 80%; /* Smaller than full width */
    max-width: 600px; /* Maximum width */
    background-color: white; /* White background */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Space inside modal */
}

/* Close Button Styles */
.close {
    color: #aaa; /* Close button color */
    position: absolute; /* Position absolute for precise placement */
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    font-size: 28px; /* Close button size */
    font-weight: bold; /* Close button weight */
}

.close:hover,
.close:focus {
    color: black; /* Change color on hover */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Pointer on hover */
}

/* Caption styles */
#caption {
    text-align: center; /* Center the caption */
    margin-top: 10px; /* Space above caption */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-banner {
        flex-direction: column; /* Stack on small screens */
        align-items: center; /* Center items */
    }

    .profile-title,
    .profile-description {
        text-align: center; /* Center text */
    }

    .timeline-entry {
        flex-direction: column; /* Stack text and image */
        align-items: center; /* Center align items */
    }
}