@charset "UTF-8";
/* CSS Document */
.nav {
  display: flex;
  gap: 1.5rem;
}
.nav a:link, .nav a:visited, .nav p {
	font-family: var(--heading-font);
	color: var(--navLink-color);
	text-decoration: none;
	font-weight: var(--heading-weight);
}
.nav a:hover { 
	color: var(--navHover-color);
}
.nav p {
	font-family: var(--heading-font);
	color: var(--dark_panelTint);
	text-decoration: none;
	font-weight: var(--heading-weight);
}
.nav p:hover { 
	color: var(--black_panelTint);
	cursor: pointer;
}
/* Responsive nav */
.outerpageWrapper {
	opacity: 1;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
   	transition: 0.2s linear;
}
.outerpageWrapper.blurall {
	opacity: 0.6;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px); 	
    filter: blur(2px);
}
.responsiveNavWrap {
	position: fixed;
	width: 375px;
	left: -376px;
	top: 0;
	bottom: 0;
	padding: 2rem 2rem 2rem 4rem;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background-color: var(--light_panelTint);
	opacity: 0;
	z-index: 200;
}
#closeNav {
	margin-bottom: 4rem;
}
#closeNav p {
	color: var(--navLink-color);
}
.responsiveNavWrap .nav {
	flex-direction: column;
	gap: 1rem;
}
.responsiveNavWrap .navlink {
	margin-top: 10px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	transform-origin: 0 50%;
	opacity: 0;
}
.responsiveNavWrap .navlink.navlinkShow {
	margin-top: 0;
	opacity: 1;
}
.responsiveNavWrap .navlink:hover {
	transform: scale(1.05);
}
.responsiveNavWrap.responsiveNavWrapOpen {
	left: 0px;
	opacity: 1;
}
.responsiveNavBG {
	position: fixed;
	width: 100%;
	top: 0px;
	bottom: 0;
	left: 100%;
	background-color: transparent;
	z-index: 100;
}
.responsiveNavBG.responsiveNavBGClose {
	left: 0;
}