header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10%;
	justify-content: space-between;
	padding: 1em 0;
	
	.logo {
		display: flex;
		font-family: "Dancing Script Variable", cursive;
		font-size: 2em;
		gap: 0.2em;
		text-decoration: none;
		
		svg {
			height: 1.5cap;
			transform: rotate(1deg); /* One of the squares is too thick without this */
			width: 1.5cap;
		}
	}
	
	nav {
		flex-grow: 1;
		justify-self: end;
		padding: 0.5em 0;
	}
	
	menu {
		--spacing: 0.5em;
		display: flex;
		font-family: "Dancing Script Variable", cursive;
		font-size: 1.3rem;
		gap: var(--spacing);
		justify-content: end;
		margin: 0;
	}
	
	li {
		display: flex;
		gap: var(--spacing);
		
		&:not(:first-child):before {
			content: "|";
		}
		
		&.current a {
			position: relative;
			text-decoration: none;
			
			&:before,
			&:after {
				background: var(--highlight);
				content: "";
				height: 0.1rem;
				position: absolute;
				rotate: -4deg;
			}
			
			&:before {
				left: 0;
				top: 100%;
				width: 100%;
			}
			
			&:after {
				left: 10%;
				top: 110%;
				width: 80%;
			}
		}
	}
}