/* ========================================================================== 
	Navigation 
   ========================================================================== */
.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ========================================================================== 
   Mobile & Small Tablets 768px and down
   Mobile @media query for components that are exclusively 
   displayed on mobile.
   ========================================================================== */

@media screen and (max-width: 768px) {
	.nav__item {
		border-bottom: 1px solid #22262d;
		padding: 1rem 0;
	}
	
	.nav__link {
        display: block;
        margin: 0 1.25rem;
    }

    .nav__link:hover,
    .nav__link:visited:hover,
    .nav__link:active {
        text-decoration: none;
    }

    .nav__item--emphasis {
        background-color: #22262d;
    }
	
	.nav__menu--open {
		display: block;
		z-index: 20;
	}
	
	.navbar__menu {
		background-color: #0d0e11;
		height: 100vh;
		position: fixed;
		right: 0;
		top: 60px;
		-webkit-transition: left 0.5s ease;
		-o-transition: left 0.5s ease;
		transition: left 0.5s ease;
		width: 65%;
		z-index: 9;
	}
}

/* ========================================================================== 
   Mobile 768px and down
   Mobile @media query for components that are exclusively displayed on 
   screen smaller than tablet. 
   ========================================================================== */

@media screen and (min-width: 769px) {
    .nav__list {
        display: flex;
        gap: 0.75rem;
        margin-right: 0.25rem;
    }

    .nav__item {}

    .nav__link--emphasis {
        background-color: #6c757d;
        border: 1px solid #6c757d;
        border-color: #6c757d;
        border-radius: 0.25rem;
        color: #d1d7e2;
        height: fit-content;
        padding: 0.5rem 0.95rem;
        text-decoration: none;
    }

    .nav__link--emphasis:hover {
        text-decoration: none;
    }
}