/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #2c2c2c;
    background-color: #fafafa;
    font-size: 16px;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: normal;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 2.5rem;
    color: #1a1a1a;
}

h2 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
}

p {
    margin-bottom: 1.2rem;
    color: #444;
}

/* Header - Clean and minimal */
header {
    background-color: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

header h1 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

nav a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
}

nav a:hover {
    color: #666;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 50%;
    background-color: #333;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

nav a:hover::after {
    width: 100%;
}

/* Main Content */
main {
    margin-top: 120px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

section {
    margin-bottom: 5rem;
    padding: 2rem 0;
}

/* Home Section */
#home {
    text-align: center;
    padding: 4rem 0;
}

#home h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

#home p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    color: #555;
    line-height: 1.8;
}

/* Image Styles - Following Willem's clean presentation */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figure {
    margin-bottom: 3rem;
    background-color: white;
    padding: 1rem;
    border-radius: 3px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figure:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

figcaption {
    padding: 1rem;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    text-align: center;
}

figcaption strong {
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}

figcaption em {
    color: #888;
    font-style: italic;
    font-size: 0.85rem;
}

/* Photo Gallery Grid */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0 4rem;
}

/* Featured Photo */
#home figure {
    max-width: 800px;
    margin: 0 auto;
}

#home figure img {
    width: 100%;
    height: auto;
}

/* About Section */
#about img {
    float: left;
    margin: 0 2rem 1rem 0;
    max-width: 300px;
    border-radius: 3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#about ul {
    margin: 1rem 0;
    padding-left: 2rem;
}

#about li {
    margin-bottom: 0.5rem;
    color: #555;
}

/* Contact Section */
address {
    font-style: normal;
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    margin: 2rem 0;
    border-left: 4px solid #333;
}

address strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

address a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

address a:hover {
    color: #666;
}

/* Links */
a {
    color: #333;
    text-decoration: underline;
    text-decoration-color: rgba(51, 51, 51, 0.3);
    transition: all 0.3s ease;
}

a:hover {
    color: #666;
    text-decoration-color: rgba(102, 102, 102, 0.8);
}

/* Lists */
ul {
    margin: 1rem 0;
}

li {
    margin-bottom: 0.8rem;
    color: #555;
}

/* Footer */
footer {
    background-color: #1a1a1a;
    color: #ccc;
    text-align: center;
    padding: 3rem 0;
    margin-top: 5rem;
}

footer p {
    margin-bottom: 1rem;
    color: #ccc;
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ccc;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav ul {
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    
    nav a {
        font-size: 0.9rem;
    }
    
    main {
        margin-top: 140px;
        padding: 0 1rem;
    }
    
    .photo-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    #about img {
        float: none;
        margin: 0 auto 2rem;
        display: block;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    main {
        padding: 0 0.5rem;
    }
    
    section {
        padding: 1rem 0;
    }
    
    nav ul {
        gap: 1rem;
    }
    
    nav a {
        font-size: 0.8rem;
    }
    
    figure {
        padding: 0.5rem;
    }
    
    address {
        padding: 1.5rem;
    }
}

/* Subtle animations and interactions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeInUp 0.6s ease-out;
}

/* Print styles */
@media print {
    header {
        position: static;
    }
    
    main {
        margin-top: 0;
    }
    
    .photo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    figure:hover {
        transform: none;
        box-shadow: none;
    }
}