* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: antiquewhite;
}

.container {
    background-color: #1abc9c;
    color: black;

}

header {
    background-color: #1abc9c; 
    width: 100%;
}

a {
    background-color: mistyrose;
    padding: 8px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

/* Style the header */
.header,
header {
    padding: 5px;
    font-size: 25px;
    display: inline-block;

}

header a {
    background-color: inherit;
    text-decoration: none;
}


.search {
    padding: 10px;
}


details {
    font-size: 80%;
    font-family: sans-serif;
}

/* Column container */
.row,
main {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
.side,
aside {
    flex: 12%;
     padding: 0;
    padding-top: 1em;
    font-family: Comic Sans MS, Verdana;
    font-size: 55%;
    font-weight: bold;

}

.main {
    flex: 88%;
    background-color: white;
    padding: 20px;
    color: black;

}

main {
    
    background-color: white;
    padding: 20px;
    color: black;

}


/* Sidebar/left column */

.side,
aside .links hr {
    border: 0;
    width: 80%;
}

.side,
aside .links h2 {
    color: ghostwhite;
    margin: 0;
}

.side,
aside .links a {
    display: inline-block;
    color: #036;
    background-color: honeydew;
    width: 12em;
    padding: 1em .2em;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #036;
    border-bottom: 1px solid #036;
}

.side,
aside .links a h2 {
    padding: 0;
    margin: 0.2em;
}

.side,
aside a:hover {
    background-color: #369;
    color: #FFF;
    border-top: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}



/* Main column */

footer {
    clear: left;
    width: 100%;

    padding: 1em;


}

footer a {
    display: inline-block;
    color: #036;
    background-color: honeydew;
    font-size: 70%;
    width: 5em;
    padding: .2em .2em;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #036;
    border-bottom: 1px solid #036;
}

footer a:hover {
    background-color: #369;
    color: #FFF;
    border-top: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {
        flex-direction: column;
    }
}

/* Responsive layout - when the screen is less than 700px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .side li {
        display: inline;
    }
}