body {   
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    
}

a {
    color: black;
    text-decoration: underline;
}

a:hover {
    background-color: tomato;
}

.main {
    display: flex;
}

.sidebar {
    min-width: 220px;
    width: 220px;
    padding: 2rem 1rem;
}

.sidebar .logo {
    display: block;
}

.sidebar .logo img {
    margin: 0 0 1rem 0;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

.sidebar h1 {
    font-weight: 700;
}

.sidebar ul {
    margin: 2rem 0;
}

.sidebar li {
    margin: 0.5rem 0;
}

.sidebar .active {
    font-weight: 700;
}

.content {
    height: 100vh;
    width: 100%;
    min-width: 800px;
    display: flex;
    flex-direction: column;
}

.copyright {
    color: #bbb;
    font-size: .75rem;
    border-top: 1px solid #bbb;
    padding: 0.5rem 0 2rem 0;
    margin: 2rem;
}


.gallery {
    --thumbHeight: 24rem;
    --fullHeight: 60rem;
    position: relative;
}

.gallery ul {
    margin: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap:  calc(var(--thumbHeight) * 0.1) calc(var(--thumbHeight) * 0.16);
}

.gallery:has(.active) {
    height: 100%;
    overflow: hidden;
}

.gallery.mono img {
    filter: saturate(0);
}

.gallery.mono img:hover {
    filter: none;
}

.gallery .active {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery .active img {
    height: auto;
    max-width: 100%;
    max-height: var(--fullHeight);
    filter: none;
}

.gallery img {
    display: block;
    height: var(--thumbHeight);
    width: auto;
}

.about {
    padding: 2rem;
}

.portraits {
    display: flex;
    width: 50%;
    gap: 1rem;
}
.portraits li img {
    display: block;
    max-width: 100%;
}

.bio {
    margin-top: 2rem;
    width: 720px;
}

.bio p, 
.bio blockquote p {
    margin: 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.bio blockquote {
    margin: 0 0 2rem 0;
    border-left: 4px solid #ddd;
    padding-left: 1rem;
}

@media (max-width: 1200px) {
    .main {
        display: block;
    }
    .sidebar {
        display: flex;
        flex-direction: column;
        width: auto;
    }
    .name {
        display: flex;
        gap: 1rem;
        width: auto;
        align-items: center;
    }
    .navs {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         width: auto;
     }
    .sidebar ul {
        display: flex;
        margin: 0 0 0 0;
        gap: 1rem;
    }

    .gallery {
        width: auto;
    }

    .gallery ul {
        margin: 0;
        justify-content: center;
    }

    .gallery:has(.active) {
        height: auto;
        overflow: visible;
    }
    .gallery .active {
        position: static;
        width: auto;
        height: auto;
        background: white;
    }

    .gallery .active img,
    .gallery img {
        width: auto;
        height: auto;
        max-height: var(--thumbHeight);
        max-width: 100%;
    }

    .content {
        min-width: 0;
        width: auto;
    }

    .about {
        padding: 1rem;
    }

    .copyright {
        margin: 2rem 1rem;
    }

    .portraits {
        width: 100%;
    }

    .bio {       
        width: auto;
    }
}