:root {
    --darkcolor: #0D1821;
    --lightcolor: #F0F4EF;
    --keycolor1: #BFCC94;
    --keycolor2: #B4CDED;
    --mainfont: "placeholder";
    --headfont: "placeholder";
}
html * {box-sizing: border-box;}

body {
    font-family: var(--mainfont), system-ui,Sans-Serif;
    font-size: 100%;
    line-height: 130%;
    background-color: var(--darkcolor);
    color: var(--lightcolor);
    margin: 0;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    min-height: 50vh;
    background-image: url("images/bg.JPG");
    background-size: cover;
    background-position: center 70%;
    color: var(--lightcolor);

}
z

h1{
    font-size: 1.5rem;
    margin: 0;
    line-height: 1em;
}
h2 {
    font-size: 10vw;
    margin: 0;
    line-height: 1em;
    text-shadow: -4px 4px 0 var(--darkcolor);
}

footer {
    text-align: center; 
    color: var(--lightcolor);
}

/*header * {outline: 1px dotted red;}*/

ul.topnav {
    list-style: none;
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .2em;
    width: 100vw;
}
ul.topnav li {
    border: 1px solid var(--keycolor1);
    min-width: 9em;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;

}
ul.topnav a {
    background-color: var(--keycolor2);
    display: block;
    padding: .1em 0 .3em;
    color: var(--darkcolor);
    text-decoration: none;
    /*box-shadow: 4px 4px 10px inset #fff8; */
}

ul.topnav a.current {pointer-events: none;}

main, footer {margin: 0 2em;}
figure {display: inline-block;}
figure img {
    width: 100%;
    display: inline-block;
}

@media (min-width: 500px) {
    ul.topnav {
        flex-direction: row;
    }
    main {
        display: flex;
        flex-direction: row;
        gap: 2em;
    }
    section:nth-child(1) {flex: 3;}
    section:last-child {flex: 2;}
    
    section {
        max-width: 50%;
        margin: 0 auto;
    }
    
    .drawings figure {
        max-width: 20%;
    }
}