body {
      background-color: #000;
      color: #fff;
    font-family: serif;
}

.container {
      display: grid; 
      grid-auto-rows: 1fr; 
      grid-template-columns: 1fr 4fr; 
      gap: 6px 6px; 
      grid-template-areas: 
        "sidebar main";
}

aside { 
    grid-area: sidebar;
    background-color: #222;
    min-height: 100%;
    padding: 5px;
}

main { 
    grid-area: main; 
    background-color: #222;
    min-height: 90dvh;
    padding: 5px;
}




.side-panel h1 {
    text-align: center;
    margin-bottom: 0;
}

.side-panel p {
    text-align: center;
}

.side-panel hr {
    max-width: 80px;
}

.side-panel .flex {
    display:flex;
    flex-direction: column;
    gap: 5px;
}

.side-panel .card {
    line-height: 1;
    padding: 5px;
    transition: background-color 0.3s ease-in-out; 
    transition: border 0.1s ease-in-out;
}
.card summary {
    min-height:30px;
    font-size:1.5em;
    font-weight:700;
}

.side-panel .card.active {
    border-left: 10px solid white;
}

.side-panel h2 {
    padding: 0;
    margin: 0;
}

.card .flex {
    display:flex;
    flex-direction: column;
    margin-left:25px;
    border-left: 1px solid white;
    position: relative;
}


.card .flex a {
    margin-left:5px;
    color:white;
    padding: 6px 2px 6px 6px; 
    position: relative;
}