.header {
	background-color: var(--bg-header);
	color: var(--color-header);
	position: sticky;
	top:0;
	z-index:100;
}

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 120%;
	overflow: hidden;
}

.header-icon {
	color: var(--color-header);
	font-weight:normal;
	
	& a {
		& svg {
			height:1.5em;
			width:auto;
			stroke: var(--color-header);
			transition: all 0.2s ease-in-out;
			&:hover {
				stroke: var(--highlight);
			}
		}
	}
}

.header-logo {
	filter: invert();
	height:1.5em;
	width:auto;
}

.header-name-long {
	display: inline;
}

.header-name-short {
	display: none;
}

.header-linklist {
	display: flex;
	gap: 1em;
}

.header-linklist a {
	display: flex;
	gap: 0.3em;
	align-items: center;
	color: var(--color-header);
	transition: all 0.2s ease-in-out;
	white-space: nowrap;
}

.header-linklist a:hover {
	color: var(--highlight);
}


.header-linklist a svg {
	flex-shrink:0;
	height: 1.3em;
	width: 1.3em;
	fill: var(--color-header);
	transition: all 0.2s ease-in-out;
}

.header-linklist a:hover svg {
	fill: var(--highlight);
}

@media (max-width: 100em) {
	.header-linklist a:nth-last-child(1) span {
		display:none;
	}
	.header-linklist a:nth-last-child(2) span {
		display:none;
	}
	.header-linklist a:nth-last-child(3) span {
		display:none;
	}
}

@media (max-width: 42em) {
	.header-linklist a span {
		display:none;
	}
}