* {
    box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
    background-color: rgb(240, 243, 205);
}

/*div elements*/
.nav, .contbox, .footer {
    margin: 0;
    border: 1px solid rgb(221, 230, 102);
}
/*grid*/
.container {
    display: grid;
    grid-template-areas:
    "nav contbox"
    "footer footer";
    grid-template-columns: 6rem 40vw;
    max-width: calc(6rem + 40vw);
    margin: auto auto auto auto;
}
.container.nav {grid-area: nav;}
.container.contbox {grid-area: contbox;}
.container.footer {grid-area: footer;}

/*header*/
.header {
    margin: 0;
    margin-bottom: 6px;
    padding: 5px 5px;
    text-align: left;
    background-color: rgb(230, 227, 74);
    position: sticky;
}

/*navigation*/
.nav {
    background-color: rgb(237, 240, 189);
    padding: 0;
    text-align: center;
}
.nav a {
    /*background-color: blueviolet;*/
    list-style: none;
    text-decoration: none;
    border-bottom: 1px solid rgb(221, 230, 102);
    display: block;
    padding: 5px;
    margin: 0;
}
.nav a:hover {
    background-color: aquamarine;
}
.nav .active {
    background-color: brown;
}


/*content box, index only*/
.contbox {
    background-color: rgb(237, 240, 189);
    height: max-content;
    position: relative;
}
.introduction, .content {
    padding: 5px 10px 5px 10px;
}
.introduction {
    background-color: rgb(230, 227, 74);
}
.content {
    background-color: rgb(242, 243, 228);
    border-radius: 8px;
    height: 60vh;
    overflow: auto;
    margin: 4px;
}

/*footer*/
.footer {
    background-color: rgb(237, 240, 189);
    padding: 10px;
    width: calc(6rem + 40vw);
    height: 10vh;
}