.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	padding: 10px 50px;

	.logo {
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 5px;
		padding-bottom: 8px;
		color: var(--color-font);

		span {
			color: #7c7d7d;
		}
	}

	nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 50px;
		a {
			color: var(--color-font);
			text-decoration: none;
			font-size: 1.2rem;
			font-weight: 500;
			border-bottom: 2px solid transparent;
			transition: all 50ms ease-in-out;

			&.current {
				border-color: var(--color-accent);
			}

			&:hover {
				border-color: var(--color-accent);
			}
		}
	}
}