body {
    background: #d1e8d2;
    color: #4b634c;
    font-size: 120%;
}

h1,h2,h3 {
    text-align: center;
}


.container {
    padding: 5px;
    border: 3px solid #4b634c;
    margin: 5px;
    margin-top: 75px;
    border-radius: 20px;
}

main {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    width: 100%;
    height: 60%;
}

.base {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 3px solid #4b634c;
    margin: 2px;
    border-radius: 20px;
}

nav {
    background-color: rgb(123, 171, 146);
    color: #4b635b;
    position: fixed;  
    left: 0;  
    right: 0;  
    top: 0;  
    height: auto;  
    display: flex; 
    box-shadow: 0 0 10px 0 black;  
}
nav * {  
    display: inline;  
}  
nav li {  
    margin: 12px; 
    white-space: nowrap; 
}  
nav li a {  
    padding: 2px;
}
.active {
    background-color: rgb(84, 119, 101); 
    color: #acc7be; 
}  
nav a:hover {
    background-color: rgb(100, 136, 122);
    color: #374a4a;  
}




@media only screen and (max-width: 768px) {
    
    main {
        flex-direction: column;
        align-items: center;
    }

    nav {
        flex-wrap: wrap;
    }
}