*{
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
body{
    width: 80vw;
    margin: auto;
    background-color: #F6F0D7;
    color: #1f1f1f;
    font-size: calc(6px + 1vw);
}
header{
    background-color: #9CAB84;
    color: white;
    padding: 4%;
    text-align: center;
}
header p{
    margin-top: 3%;
}
nav{
    background-color: #89986D;
    padding: 2%;
    text-align: center;
}
nav a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 5px;
    font-size: calc(5px + 1vw);
}
nav a:hover{
    color: #F6F0D7;
}
main{
    padding: 4%;
}
main p {
    margin-bottom: 15px;
}
main div{
    margin-bottom: 3%;
    padding: 2%;
    background-color: white;
    border: 1px solid lightgrey;
}
h1{
    margin-bottom: 3%;
}
h2{
    margin-bottom: 10px;
}
h3{
    margin-top: 10px;
    margin-bottom: 5px;
}
ul{
    margin-left: 20px;
    margin-top: 10px;
}
table{
    width: 100%;
    margin-top: 10px;
}
th, td{
    padding: 10px;
    text-align: left;
    border: 1px solid #9CAB84;
}
th{
    background-color: #C5D89D;
    color: #2f3e2f;
}
label{
    display: block;
    margin-top: 10px;
}
input{
    width: 100%;
    padding: 5px;
    margin-top: 5px;
}
#result{
    margin-top: 10px;
    font-weight: bold;
}
button{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px;
    background-color: #9CAB84;
    color: white;
    border: none;
}
button:hover{
    background-color: darkolivegreen;
}
footer{
    text-align: center;
    padding: 2%;
    background-color: #9CAB84;
    color: white;
}
footer a{
    color: white;
}
@media (max-width: 900px){
    body{
        width: 85vw;
    }
    nav{
        padding: 1%;
    }
    nav a{
        display: inline;
        margin: 0 2px;
        padding: 3px;
    }
    table{
        font-size: 14px;
    }
    input{
        width: 100%;
    }
}