.menu {
    background-color: #121212;
    height: 100%;
    margin: 0;
    border-radius: 25px;
    padding-left: 50px;
    padding-right: 50px;
    overflow: auto;
}

.menu h1 {
    color: #eaeaea;
    text-align: left;
    font-size: 38px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.menu header img {
    pointer-events: none;
    margin-bottom: 30px;
}

.menu a {
    text-align: left;
    color: #eaeaea;
    font-size: 30px;
    text-decoration: underline;
}

.menu ul {
    list-style: none;
}

.menu li {
    color: #eaeaea;
    font-size: 30px;
    line-height: 1.6;
    border-bottom: 1px #a0a0a0 inset;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.menu li a {
    color: #eaeaea;
    text-decoration: none;
}

.menu li a:hover {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 1px;
}

.menu li a:active {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 1px;
}

.container {
    width: 100%;
}

summary {
    outline: none;
    list-style: none;
    color: #eaeaea;
    font-size: 30px;
    line-height: 1.6;
    border-bottom: 1px #eaeaea inset;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
summary:after {
    margin-top: 15px;
    content: "➕";
    float: left;
    margin-right: 11px;
    text-align: center;
    font-size: 11px;
}
[open] summary:after {
    padding: 0 0 12px 0;
    content: "➖";
}

details {
    color: #eaeaea;
    cursor: pointer;
    transition: all 0.3s;
}
details ::-webkit-details-marker {
    display: none;
}
details + details {
    margin-top: 10px;
}
details[open] {
    transition: all 0.6s;
}