#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	height: clamp(60px, 10vw, 70px); /* also update headerOffset in updateCloseButton/initCloseButton in JS if updating */

	box-sizing: border-box;

	font-family: "Barlow", sans-serif;

	background: #131317;
	z-index: 1000;

	overflow-anchor: none;



	flex-wrap: wrap;

}

#logolink {
	box-sizing: border-box; 
	height: 100%;
	width: auto;
	padding: 1rem 0 1rem 1rem;
	overflow-anchor: none;
}

#logolink img {
	height: 100%;
	width: auto;
	overflow-anchor: none;
}

#menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 1vw;
	height: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
	overflow-anchor: none;
}

#menu li {
	font-size: clamp(1em, calc(8.96px + 1.28vw), 1.2em);
	height: 100%;
	transition: opacity 0.25s ease-in-out;
	overflow-anchor: none;
}

#menu li:hover {
	opacity: 0.60;
	overflow-anchor: none;
}

#menu li a {
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1vw;
}

.current {
	text-decoration: underline;
	text-underline-offset: 5px;
}

#socials {
	display: flex;
	gap: 0.5vw;

	height: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	margin-right: 1rem;
	overflow-anchor: none;
	fill:lightgray;
}

#socials li {
	height: clamp(1.5em, 35%, 2.5em);
	aspect-ratio: 1 / 1;
	cursor: pointer;
	white-space: nowrap;
	margin: auto 0;
	transition: opacity 0.2s ease-in-out;
	overflow-anchor: none;
   	margin-left: clamp(3px, calc(4.67vw - 22.667px), 10px);
}

#socials li:hover {
	opacity: 0.45;
	overflow-anchor: none;
}



@media (max-width: 560px) {

    #header {
        height: 80px; 
    }

    #menu {
        order: 3;
        width: 100%;
        justify-content: space-evenly;
        height: 40px; 
    }

    #logolink {
    	height: 40px;
        order: 1;
		padding-bottom: 0;

    }

    #socials {
    	height: 40px;
        order: 2;
    }

     #socials li {
     	margin-top: 16px;
     	margin-bottom: 0;
     	margin-left: 10px;
    }
}