@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Cutive+Mono&family=Harting&display=swap');

body {
    margin: 0;
    font-family: 'Harting', sans-serif; /* Ensure Harting is correctly sourced */
    background: url('images/west.background.jpg') no-repeat center center fixed; /* Add your background image */
    background-size: cover; /* Ensure it covers the entire screen */
    color: #f5f5f5; /* Light text color for readability */
}

header.custom-header {
    background: url('images/west.header2.jpg') no-repeat center top; /* Adjusted background position */
    background-size: cover;
    width: 100%;
    height: 200px; /* Set the height to 200px */
    position: relative;
    text-align: center;
    color: #f5f5f5; /* Light text color for readability */
    font-family: 'Cinzel Decorative', cursive; /* Header font */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    position: relative;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.25rem;
    color: #e4c388; /* Updated menu text color */
    font-family: 'Cutive Mono', monospace; /* Menu font */
}

nav ul li a:hover {
    color: #cb9651; /* Hover color */
}

/* Positioning the navigation links */
.menu-consult {
    position: absolute;
    top: 150px;
    left: 50px; /* Adjust this value as needed to position below the man image */
}

.menu-about {
    position: absolute;
    top: 150px;
    left: 260px; /* Adjust left value to position under the compass */
}

.menu-know {
    position: absolute;
    top: 150px;
    left: 420px; /* Adjust left value to position under the Feynman diagram */
}

.menu-contact {
    position: absolute;
    top: 150px;
    left: 605px; /* Adjust left value to position under the question mark */
}

.menu-travel {
    position: absolute;
    top: 150px;
    left: 1260px; /* Adjust left value to position under the plane */
}

.menu-write {
    position: absolute;
    top: 150px;
    left: 1405px; /* Adjust left value to position under the feather */
}

.menu-music {
    position: absolute;
    top: 150px;
    left: 1590px; /* Adjust left value to position under the guitar */
}

.menu-shop {
    position: absolute;
    top: 150px;
    left: 1760px; /* Adjust left value to position under the shopfront */
}

/* Slideshow styles */
.slideshow {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 100px auto 0 auto; /* Add margin-top to move it down */
    overflow: hidden;
    height: 500px; /* Adjust the height as needed */
}

.slideshow-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.slideshow img, .slideshow .title {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain; /* Ensures the full image is shown */
    opacity: 0;
    transition: opacity 3s; /* Image transition duration */
}

/* Blurred Edges Effect */
.slideshow img {
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    /* The mask-image property is used to create a radial gradient that makes the edges of the image blur into transparency */
}

/* Uncomment this section for a different effect */
/*
.slideshow img {
    border-radius: 20px;  // Rounded corners
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  // Shadow effect
}
*/

/* Uncomment this section for a Polaroid effect */
/*
.slideshow img {
    border: 10px solid white;  // White border like a Polaroid photo
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  // Shadow effect
    transform: rotate(-5deg);  // Slight rotation for a more realistic effect
}
*/

.slideshow .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Harting', sans-serif; /* Font family for title */
    color: #e4c388;
    font-size: 1.5rem; /* Slightly smaller font size */
    letter-spacing: 0.1rem; /* Increase letter spacing */
    text-transform: lowercase; /* Make text lowercase */
    z-index: 1; /* Ensure title is in front */
    transition: opacity 2s; /* Title transition duration */
}

.slideshow .title.active {
    opacity: 1;
}

.slideshow img.active {
    opacity: 1;
    transition: opacity 4s; /* Image transition duration */
}

/* Responsive Design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin: 1rem 0;
    }
    .menu-consult,
    .menu-about,
    .menu-know,
    .menu-contact,
    .menu-travel,
    .menu-write,
    .menu-music,
    .menu-shop {
        position: static;
        margin: 1rem 0;
    }
}