*{
    margin:0;
    box-sizing: border-box;
}

body{
    width: 100%;
    margin:auto;
    font-family: "Metal Mania", system-ui;
}

@font-face {
    font-family: "Metal Mania";
    src: url(../src/PlaywriteDEGrund-Regular.ttf);
}

#page-wrapper{
    display: flex;
    flex-direction: row;
}

header{
    background-color: #739072;
    color:#F2F1EB;
    padding: 1%;
}

header h1{
    font-size: calc(30px + 2vw);
    font-weight:bold;
    padding-top:3%;
}

header p{
    font-size: calc(10px + 1vw);
    font-variant: small-caps;
}

nav{
    background-color: #D2E3C8;
    padding: 2%;
    width:30%;
    text-align: center;
}

nav ul{
    list-style: none;
    padding-left: 0;
}

nav li{
    margin: 25% 0;
    padding: 3% 0;
    background-color: #90A17D;
    border: solid #5F7161;
    font-size: calc(2px + 1vw);
}

nav li:hover{
    transform: scale(1.02);
    background-color: #90A17D;
    z-index: 2;
}

nav li a{
    padding: 1%;
    text-decoration: none;
    color: #F2F1EB;
}

main{
    background-color: #F2F1EB;
    padding:2%;
    width:70%;
    justify-content: space-around;
}

main h2{
    color: #3C4048;
    font-size:calc(12px + 1vw);

}
main h3{
    color:#3C4048;
    font-variant: small-caps;
    font-size:calc(9px + 1vw);
}

main h3 a{
    text-decoration: none;
    color:#3C4048;
}

main h4{
    color: #3C4048;
    font-size:calc(7px + 1vw);
}


main li{
    color: #3C4048;
    text-decoration: none;
    font-size:calc(5px + 1vw);
}

footer{
    background-color: #739072;
    padding: 1%;
}

footer p{
    color:#F2F1EB;
    font-size: calc(5px + 1vw);
}

footer a{
    color: #F2F1EB;
}


@media screen and (max-width: 750px) {
    #page-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    header {
        text-align: center;
    }
    header h1 {
        padding-right: 0;
        padding-left: 0;
        text-align: center;
        margin: auto;
    }
    nav {
        width: 100%;
        text-align: center;
        padding: 2%;
    }
    nav ul {
        text-align: center;
        list-style: none;
        padding-left: 0;
    }
    nav li {
        display: inline-block;
        margin: 2% 0;
        padding: 2%;
        width: auto;
    }
    main {
        padding: 2%;
        width: 100%;
        height:100vh;
        box-sizing: border-box;
        align-items: center;
        overflow: hidden;
    }

    main h2 {
        color: #3C4048;
        font-variant: small-caps;
        font-size: calc(12px + 1vw);
        text-align: center;
    }

}