header {
	display: flex; flex-direction: row;
	width: 100%;
	background-color: var(--body-bg-color);
	color: var(--accent-color);
	height: var(--header-height);
	position: sticky; top: 0;
	z-index: 20;
	transition: var(--header-transition-speed);
	box-shadow: 0 0.1rem 1rem #00000050;
}
header > div > a {
	display: flex; height: 100%; margin: auto 0; padding-left: 0.5rem;
	transition: var(--header-transition-speed);
}
header img {
	display: flex; margin: 0.4rem 0; transition: var(--header-transition-speed);
}

#main-menu-wrapper {
    display: flex; flex-direction: row; position: relative;
    box-sizing: border-box; height: 100%; width: 100%;
}
#main-menu-mobile-open{
    display: none; align-items: center; font-size: 2rem;
	box-sizing: border-box; height: 100%; width: fit-content;
	padding-left: 1rem; padding-right: 1.5rem; cursor: pointer;
	margin: 0; margin-left: auto;
}
#main-menu-mobile-close{
    display: flex; align-items: center; align-items: center;  font-size: 1.8rem;
	box-sizing: border-box; height: fit-content; width: fit-content;
	padding: 0.75rem; padding-right: 1.25rem; cursor: pointer;
	margin: 0; margin-left: auto; color: var(--font-color-light);
}

#main-menu-normal {
    display: flex; flex-direction: row; align-items: center; 
    box-sizing: border-box; height: 100%; width: fit-content;
    margin-left: auto;
}
#main-menu-normal > a {
	display: flex; align-items: center;  font-size: 1.3rem;
	box-sizing: border-box; height: 100%; width: fit-content;
	color: var(--font-color-light); text-decoration: none; font-weight: 600;
	transition: 0.3s; padding-left: 1.3rem; padding-right: 1.3rem;
}
#main-menu-normal > a:hover {
    background-color: var(--main-menu-hover-bg);
}
#main-menu-mobile {
    display: none; flex-direction: column; position: fixed; 
    top: 0; right: calc(-1 * var(--main-menu-mobile-max-width) - 1rem); height: 100vh; 
    max-width: var(--main-menu-mobile-width); min-width: 12rem;
    background-color: var(--main-menu-mobile-bg);
    box-shadow: -0.1rem 0rem 1rem #000000a0; transition: 0.3s;
}
#main-menu-mobile > nav {
    display: flex; flex-direction: column; height: 100%; width: 100%;
}
#main-menu-mobile > nav > a {
    font-size: 1.15rem; text-decoration: none; font-weight: 600; color: var(--font-color-light);
    width: 100%; padding: 0.5rem; border-bottom: 0.1rem solid var(--font-color-light);
}
#main-menu-mobile > nav > a:first-of-type {
    border-top: 0.1rem solid var(--font-color-light);
}

footer {
	display: flex; flex-direction: column; width: 100%;
	margin-top: auto; padding-bottom: 2rem; padding-top: 1rem;
	border-top: 0.15rem solid var(--main-menu-hover-bg);
}
#footer-links{
    
}
#footer-links > a{
     color: var(--font-color-light); margin: 1rem;
}

@media only screen and (max-width: 67rem){
	#main-menu-normal {
		display: none;
	}
	#main-menu-mobile-open {
	    display: flex;
	}
	#main-menu-mobile {
        display: flex;
    }
}