body {
    font-family: 'General Sans', sans-serif;
    background-color: #212121;
    color: #B6E6FF;
}

#mobile-menu-box {
    position: fixed;
    top: 0;
    height: 100vh;
    transition: right 0.5s ease-in-out;
    z-index: 50;
}

/* Mobile styles (default) */
#mobile-menu-box {
    width: 100%;
    right: -100%;
}

#mobile-menu-box.menu-active {
    right: 0;
}

/* Desktop and larger screens */
@media (min-width: 768px) {
    #mobile-menu-box {
        width: 600px;
        max-width: 600px;
        right: -600px;
    }

    #mobile-menu-box.menu-active {
        right: 0;
    }
}

#hamburger-btn.menu-active svg {
    transform: rotate(180deg);
}

#mobile-menu-box.menu-active {
    right: 0;
}

/* Fix voor 0.5px randen op alle "boxen" */
/* Gebruikt inset box-shadow voor consistente sub-pixel weergave */
div, section, article, nav, header, footer, aside, img, figure, li, button, input[type="submit"], input[type="button"] {
    box-shadow: inset 0 0 0 0.5px currentColor;
}

.image-box-container {
    padding: 1px; /* To make the 0.5px inset box-shadow visible */
    background-image: url('https://source.renev.me/universe-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.renev-ai-button {
    box-shadow: inset 0 0 0 0.5px #B6E6FF; /* Override currentColor for this button */
}

.current-page {
    background-color: rgba(182, 230, 255, 0.2); /* A subtle highlight for the current page */
}

.menu-divider-right {
    box-shadow: inset -1px 0 0 0 currentColor; /* 1px right border */
}