*{
    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(3px + 1vw);
}

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

.input, .button, .result{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.input{
    display: block;
    text-align: center;
    margin:2%;
}

#first-input, #second-input{
    margin:1%;
}

.input input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1.88%;
    width:40%;
}

button{
    margin:1%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 9px;
    width:8%;
    height:8%;
    font-size:calc(7px + 1vw);
}

#cal{
    background-color: rgba(144, 161, 125, 0.66);
    border: solid #5F7161;
    padding: 3%;
    transition: transform 0.5s, background-color 0.5s;
    transform: scale(1);
    z-index: 1;
    position: relative;
}

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

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;
    }

    main h4{
        text-align: center;

    }

}