.banner .top-bar .main-nav {
    text-align: center;
}

.banner .main-nav a {
    padding: 0 1rem;
    color: var(--banner-color);
    text-shadow: 0 0 1rem var(--banner-color);
    text-decoration: none;
    transition: all .3s;
}

.banner .main-nav a:hover {
    text-shadow: 0 0 1rem var(--banner-accent);
    color: #0f0;
}

.banner .nav-toggle-container {
    text-align: right;
}

.nav-toggle {
    position: relative;
    height: 3rem;
    width: 3rem;
    background-color: transparent;
    border: .2rem solid var(--banner-accent);
    border-radius: .5rem;
    overflow: none;
    cursor: pointer;
    transition: box-shadow .3s;
}

.banner .nav-toggle:hover {
    box-shadow: 0 0 1rem var(--banner-accent);
}

.banner .nav-toggle div {
    background-color: var(--banner-accent);
    height: .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;
    box-shadow: 0 0 1rem var(--banner-accent);
}

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

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

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

.banner .nav-toggle.open div:nth-last-of-type(1) {
    width: 70%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
    -ms-transform: translate(-50%, -50%) rotate(405deg);
    transform: translate(-50%, -50%) rotate(405deg);
}

.banner .nav-toggle.open div:nth-last-of-type(2) {
    background-color: transparent;
}

.banner .nav-toggle.open div:nth-last-of-type(3) {
    width: 70%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(495deg);
    -ms-transform: translate(-50%, -50%) rotate(495deg);
    transform: translate(-50%, -50%) rotate(495deg);
}