.header {
	height: 5em;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 12em;
	padding: 0.5em;
	position: relative;
}

.header__logo {
	position: absolute;
	width: 12em;
	max-width: 35%;
	max-height: 6em;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(1px 1px 1px #777);
	perspective: 120px;
}
.header__logo:hover {
	filter: drop-shadow(1px 2px 2px #777);
}
.header__logo:active {
	filter: drop-shadow(0px 0px 0px #000);
}

.header__logo svg {
	max-height: 100%;
	animation: rotate 1s;
}

.header__link:first-child {
	margin-right: auto;
}

.header__link:last-child {
	margin-left: auto;
}


@media (max-width: 400px) {
	.header {
		align-items: center;
	}

	.header__logo {

	}
}


@keyframes rotate {
	from {
		transform: rotateX(-180deg);
	}
	to {
		transform: rotateX(-360deg);
	}
}