:root {
    --header-bg: light-dark(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4));
    --header-color: light-dark(#0f0, #0f0);
    --header-color-hover: light-dark(#0f0, #0f0);
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9;
    height: 60px;
}

.header-bg {
    position: fixed;
    left: 0;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: var(--header-bg);
    z-index: 7;
}

header figure {
    width: 40px;
}

header .nav-toggle {
    position: relative;
    height: 30px;
    width: 50px;
    background-color: transparent;
    border: 2px solid var(--header-color);
    border-radius: 8px;
    cursor: pointer;
    -webkit-transition: -webkit-box-shadow .1s;
    transition: -webkit-box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s;
    transition: box-shadow .1s, -webkit-box-shadow .1s;
}

header .nav-toggle:hover {
    -webkit-box-shadow: 0 0 8px var(--header-color-hover);
    box-shadow: 0 0 8px var(--header-color-hover);
}

header .nav-toggle div {
    background-color: var(--header-color);
    height: 0.1rem;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    border-radius: 50%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

header .nav-toggle div:nth-of-type(1) {
    width: 70%;
    top: 25%;
}

header .nav-toggle div:nth-of-type(2) {
    width: 50%;
    top: 50%;
}

header .nav-toggle div:nth-of-type(3) {
    width: 70%;
    top: 75%;
}

header .nav-toggle.closed div:nth-of-type(1) {
    width: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

header .nav-toggle.closed div:nth-of-type(2) {
    background-color: transparent;
}

header .nav-toggle.closed div:nth-of-type(3) {
    width: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}