:root {
    --primary-color: #7e58e4; 
    --secondary-color: #008f7f;
    --background-color: #f5f5f5;
}

body {
    background-color: var(--background-color);
}

main {
    padding: 20px;
    section {
        border-top: 2px solid var(--secondary-color);
        padding: 10px;
    }
}

nav {
    background-color: var(--primary-color);
    padding: 10px;
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        li {
            display: flex;
            align-items: center;
        }
        li a {
            color: white;
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s ease, color 0.2s ease;
            :active {
                color: var(--secondary-color);
            }
        }
        li a:hover {
            background-color: rgba(255, 255, 255, 0.15);
        }
        li a.active {
            color: var(--secondary-color);
        }
        li details {
            position: relative;
            display: flex;
            align-items: center;
            background-color: var(--primary-color);
            summary {
                color: white;
                cursor: pointer;
                list-style: none;
                padding: 4px 8px;
                border-radius: 4px;
                transition: background-color 0.2s ease;
                display: inline-flex;
                align-items: center;
                line-height: 1.2;
            }
            summary:hover {
                background-color: rgba(255, 255, 255, 0.15);
            }
            summary::-webkit-details-marker {
                display: none;
            }
            ul {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                min-width: 180px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin: 0;
                padding: 10px 12px;
                background-color: rgba(126, 88, 228, 0.98);
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
                border-radius: 6px;
                z-index: 10;
                li a {
                    display: block;
                    padding: 6px 8px;
                    border-radius: 4px;
                    transition: background-color 0.2s ease;
                }
                li a:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
            }
        }
    }
}

h1, h2 {
    color: var(--primary-color);
}