body { 
    font-family: 'Century Gothic', sans-serif; 
    background: transparent; 
    color: white; 
    margin: 0; 
    padding: 30px 15px; 
    height: 100vh; 
    overflow: hidden; 
    box-sizing: border-box;
}

/* De glazen Card container */
#menu-root {
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 15px;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box;
}

/* Footer styling */
.menu-footer {
    flex-shrink: 0; /* Zorgt dat de footer niet wordt platgedrukt */
    padding: 10px 20px 20px 20px;
}

.footer-divider { 
    height: 1px; 
    background: rgba(255, 255, 255, 0.1); 
    width: 80%; 
    margin: 0 auto 15px auto; 
}

/* Knoppen rechts uitlijnen */
.footer-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 20px; 
}

.footer-link { 
    color: white; 
    font-size: 1.8em; /* Iets groter voor de plus-knop */
    opacity: 0.7; 
    transition: 0.2s; 
    cursor: pointer; 
}

.footer-link:hover { 
    opacity: 1; 
    transform: scale(1.1);
}

/* Container voor de kleine kaarten */
#content-area {
    flex-grow: 1; /* Deze container vult nu alle beschikbare ruimte tussen de top en de footer */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Dwingt de inhoud (de kaarten) naar de bovenkant */
    padding: 15px;
    gap: 12px;
    overflow-y: auto; /* Zorgt voor een scrollbalk als er veel kaarten zijn */
}

/* De kleine kaart zelf */
.small-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Iets subtieler dan de hoofdkaart */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.small-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Linkerkant: Icoon (20% breedte) */
.card-icon {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    color: rgba(255, 255, 255, 0.9);
}

/* Rechterkant: Tekst content */
.card-content {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
}

/* Tekstregels */
.card-content .title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 2px;
}

.card-content .subtitle {
    font-size: 13px;
    opacity: 0.7;
}