.main-navigation { position: fixed; overflow: hidden; left: 0; top: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0, .875); opacity: 0; z-index: -1; }

.main-navigation.fade-in { animation: nav-fade-in .4s forwards; }

.main-navigation.fade-out { animation: nav-fade-out .4s forwards; }

.main-navigation ul { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; font-size: 2rem; font-weight: 300; line-height: 1; text-align: center; }

.main-navigation ul li:not(:first-child) { margin-top: 1.25rem; }

.main-navigation ul li a { color: white; }

.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current-page-ancestor a,
.main-navigation ul li a:hover,
.main-navigation ul li a:focus { color: var(--gold); }

@keyframes nav-fade-in {
    from { opacity: 0; z-index: -1; }
    to { opacity: 1; z-index: 12; }
}

@keyframes nav-fade-out {
    from { opacity: 1; z-index: 12; }
    to { opacity: 0; z-index: -1; }
}