@keyframes bugfix { from {padding:0;} to {padding:0;}}
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}

#overlay-button {
    position: fixed;
    right: 0em;
    top: 0em;
    padding: 26px 11px;
    z-index: 5;
    cursor: pointer;
    user-select: none;
    span {
        height: 4px;
        width: 35px;
        border-radius: 2px;
        background-color: #000000;
        position: relative;
        display: block;
        transition: all .2s ease-in-out;
        &:before {
            top: -10px;
            visibility: visible;
        }
        &:after {
            top: 10px;
        }
        &:before, &:after {
            height: 4px;
            width: 35px;
            border-radius: 2px;
            background-color: #000000;
            position: absolute;
            content: "";
            transition: all .2s ease-in-out;
        }
    }
    &:hover span, &:hover span:before, &:hover span:after {
        background: #333332;
    }
}

input[type=checkbox] {
    display: none;

    &:checked ~ #overlay {
        display: block;
        transition: .1s;
    }

    &:checked ~ #overlay-button {
        &:hover span, span{
            background: transparent;
        }
        span {
            &:before {
                transform: rotate(45deg) translate(7px, 7px);
                opacity: 1;
            }
            &:after {
                transform: rotate(-45deg) translate(7px, -7px);
            }
        }
    }
}

#overlay {
    height: 100vh;
    width: 100vw;
    background: #ffc400;
    z-index: 2;
    display: none;
    position: fixed;
    &.active {
        display: flex;
    }
    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding-left: 0;
        list-style-type: none;
        li {
            /*padding: 1em;*/
            a {
                color: white;
                text-decoration: none;
                font-size: 1em;
                &:hover {
                    color: #333332;
                }
            }
        }
    }
}
