@charset "UTF-8";

header {
	z-index: 1000;
	top: 0;
	left: 0;
	position: absolute;
	width: 100vw;
	height: calc(var(--menu-height) + var(--introdution-height));
	pointer-events: none;

	> div {
		top: 0;
		position: sticky;
		width: 100%;
		height: var(--menu-height);
		box-sizing: border-box;
		padding: 0 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		pointer-events: all;
		background-color: #fff;

		&:not(:has(*)) {
			display: none;
		}

		> a#logotype {
			margin-top: -0.4rem;
			display: flex;
			flex-direction: column;
			font-size: 1.1rem;
			text-decoration: none;
			color: #000;

			> h4:only-of-type:first-child {
				margin: unset;
				font-family: "Cascadia Code";
				font-size: 2.5em;
			}

			> small:only-of-type:last-child {
				justify-self: end;
				align-self: end;
				margin-top: -0.8em;
				font-family: "Bahnschrift";
				font-size: 0.62em;
				font-weight: 800;
				text-transform: uppercase;
			}
		}

		> nav#menu {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;
			font-family: "Geologica";

			> a {
				text-decoration: none;
				font-weight: 500;
				font-size: 1rem;
				text-transform: uppercase;
				color: rgb(0, 0, 0, 0.5);
				transition: ease 0.2s;

				&:hover {
					color: #000;
				}
			}
		}
	}
}
