* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background-color: rgb(240, 243, 205);
}
/*div elements*/
.nav, .contbox, .footer {
    margin: 0;
    border: 3px solid rgb(221, 230, 102);
    border-radius: 10px;
}
/*grid*/
.container {
    display: grid;
    grid-template-areas:
    "nav contbox"
    "footer footer";
    grid-template-columns: 6rem 30vw;
    gap: 3px;
    max-width: calc(6rem + 30vw);
    margin: auto auto auto auto;
}
.container.nav {grid-area: nav;}
.container.contbox {grid-area: contbox;}
.container.footer {grid-area: footer;}

/*header*/
h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    background-color: rgb(230, 227, 74);
    position: sticky;
}

/*navigation*/
.nav {
    background-color: rgb(237, 240, 189);
    padding: 0;
    text-align: center;
}
.nav a {
    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;
    padding: 5px;
    position: relative;
}
.introduction, .content {
    padding: 5px 10px 5px 10px;
    margin: 0;
}
.introduction {
    color: blue;
}
.content {
    background-color: rgb(242, 243, 228);
    border-radius: 8px;
    max-height: 350px;
    overflow: auto;
}
ul.square-box  {
    list-style-type: "\2610   ";
}

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