* {
    box-sizing: border-box;
    }

.centerElement {
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    }

body {
    margin: 0;
    font-family: 'Cantarell', Regular, serif;
    color: white;
    background: url('../img/tile4dg2.png');
    width: 100%;
    height:100%;
    }
.sidenav {
    height: 55%;
    width: 13%;
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 20px;
    background-color: #111;
    overflow-x: hidden;
    border-style: double;
    border-color: #7c8d7b;
    border-width: 5px;
    #overflow-y: hidden;
    box-shadow: 5px 5px 2px black;
    }
.content {
    padding: 3% 8% 3% 8%;
    margin-left: 15%;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 5px;
    background-color: #111;
    color: #ACB3A3;
    border: 3px;
    border-color: #7c8d7b;
    border-style: double;
    box-shadow: 15px 15px 10px black;
    max-height: 85%;
    max-width: 75%;
    }
.sidenav a {
        padding: 16px;
        background-color: #262626;
        text-decoration: none;
        display: block;
        border-style: double;
        border-color: #7c8d7b;
        border-width: 5px;
        width: 100%;
        text-align: left;
        color: #ACB3A3;
    }
.sidenav a:hover, .dropdown-btn:hover, details:hover, summary:hover {
        background-color: #7c8d7b; color: #111; transition:0.15s;
    }
li {
    margin: 0;
    padding: 0;
}
details {
    padding: 16px;
    background-color: #262626;
    text-decoration: none;
    border-style: double;
    border-color: #7c8d7b;
    border-width: 5px;
    width: 100%;
    text-align: left;
    color: #ACB3A3;
}
details:open {
    background-color:#7c8d7b;
    color: #111;
    width: 100%;
    margin-left:0;
    padding-left:0px;
    padding-bottom:0px;
    transition-duration: 0s;
}