.header {
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
	flex-direction: row;

	.logo {
		flex: 0.5;

		p {
			font-size: 2rem;
			line-height: 0.8;
		}

		p:nth-child(2) {
			padding-left: 20px;
			font-weight: bold;
		}
	}

	.links {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

		a {
			margin-left: 1rem;
			text-decoration: none;
			color: var(--color-font-link-header);
			font-weight: 600;
			font-size: 1.2rem;
			transition: all 0.1s ease-in-out;
			border-bottom: 3px solid var(--color-border-link-header);

			&:hover {
				color: var(--color-font-link-header-hover);
				border-color: var(--color-border-link-header-hover);
			}
		}
	}

	.control {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex: 0.5;
	}

	.header-mobile {
		display: none; // will be set to flex on mobile/small screens
		justify-content: space-between;
		flex: 1;
		width: 100%;
		flex-direction: row;

		.logo {
			display: block;
		}

		.control {
			display: flex;
			justify-content: flex-end;
			gap: 1rem;
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
		gap: 1rem;
		.logo {
			display: none;
		}

		.control {
			display: none;
		}
		.header-mobile {
			display: flex;
		}
	}

	@media (max-width: 300px) {
		.header-mobile {
			flex-direction: column;
			.logo {
				justify-content: center;
				display: flex;

				margin-bottom: 10px;
			}

			.control {
				justify-content: center;
			}
		}

		.links {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1rem;
		}
	}
}