@font-face {
    font-family: 'Figtree';
    src: url('css/font/Figtree-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} 





:root{
    --header-width: 15%;
}

body, html { 
    height: 100%;
}

body{ 
    margin: 0;
    background-color: #3c4a5e;

}

*{ 
    box-sizing:border-box;
}

#main-nav {
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction:column;
    justify-content: center;
    padding: auto;
    background-image: url(../images/zach-lieberman-2.jpg);
    background-color: #443d2d;
    text-align: center;
    padding: 30px;
    gap: 8px;

    /*background: repeat-y;*/
    /*background-image: url(../images/Zach-Lieberman-4.jpeg);*/

    color:white;
    width: var(--header-width);; 
}

#main-nav h1,
#main-nav h2{
    margin: 0;
}

a {
    text-decoration: none;
    color: white;
    border: solid 1px white;
    border-radius: 4px;
    padding: 5px;
    background-color: #637a9a;
}

a:hover {
    background-color:#364254 ;
}
h2, h3 {
    margin-left: var(--header-width);
}

section {
    background-color:#aaa69d;
    margin-left: var(--header-width);
    /* padding-left:250px; */
    padding: 20px;
    /* text-align: right; */
}

section figure {
    background-color:#625a47;

    padding: 20px;
    /* margin:  0 0 0 -250px;  */
    margin: 0;
    text-align: left;

}

img{ 
    width: 100%;
}

h1 {
    font-family:'Lucida Sans';
    background-color: rgb(255, 255, 255);
    background-image: url(../images/generative_art.avif);
    background-repeat: repeat;
    padding: 5px;
    font-size: 4rem;
    padding: 2rem 2rem;
    margin-left: var(--header-width);
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
}

h2, h3{
    padding: 5px;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}


p{
    color: white;
}

li{
    color: white;
}

figcaption{
    color: white;
}

.image {
    figure { 
        margin: 0;
    }
    img {
        display: block;
    }
    figcaption {
        margin-top: 1em;
    }
    iframe {
        width: 100%;
    }
}


.text-image {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    figure { 
        margin: 0;
    }
    img {
        display: block;
    }
    figcaption {
        margin-top: 1em;
    }
}

.text-image-parcours {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    figure { 
        
        margin: 0;
    }
    img {
        width: 50%;
        display: block;
    }
    figcaption {
        margin-top: 1em;
    }
}