/* Menu Icon */
.hamburger {
    cursor: pointer;
    float: right;
    padding: 20px 10px;
    top: 1rem;
    right: 1rem;
}

.hamburger-line {
    background: var(--bg-contrast);
    display: block;
    height: 5px;
    position: relative;
    width: 32px;
}

.hamburger-line::before,
.hamburger-line::after {
    background: var(--bg-contrast);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}
.hamburger-line::before {
    top: 10px;
}
.hamburger-line::after {
    top: -10px;
}

/* Hide checkbox */
#side-menu {
    display: none;
}

/* Toggle menu icon */
.side-menu:checked ~ .hamburger .hamburger-line {
    background: transparent;
}

.side-menu:checked ~ .hamburger .hamburger-line::before {
    transform: rotate(-45deg);
    top: 0;
}

.side-menu:checked ~ .hamburger .hamburger-line::after {
    transform: rotate(45deg);
    top: 0;
}

/* show hamburger by default */
.hamburger {
    display: none;
}

/* Responsiveness */
@media (max-width: 768px) {
    .page-title {
        display: none;
    }

    /* show hamburger */
    body:has(nav) .hamburger {
        display: inline;
    }

    /*hide nav*/
    nav.menu {
        display: none;
    }

    /*show nav "fullscreen" and hide main and footer*/
    body:has(.side-menu:checked) nav {
        display: flex;
        width: 96vw;
    }

    body:has(.side-menu:checked) main {
        display: none;
    }

    body:has(.side-menu:checked) footer {
        display: none;
    }

    .brand {
        margin: 0;
        width: 5rem;
        text-align: center;
    }

    .brand:nth-child(2) {
        margin-left: 0;
    }
}