:root {
	--space-grotesk: "Space Grotesk", sans-serif;
	--alwyn-new-web: "alwyn-new-web";
	--background: #FFFFFF;
	--primary: #0d3b66;
	--secondary: #f95738;
	--text: #1a1a1a;
}

@layer reset {

	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
}

@layer base {
	body {
		background-color: var(--background);
		color: var(--text);
		font-family: var(--alwyn-new-web);
		font-weight: 300;
		line-height: 1.6;
	}

	a {
		text-decoration: none;
	}

	nav {
		background-color: var(--background);
		border-bottom: 1px solid #e5e7eb;
		padding: 24px 16px;
	}

	.container {
		max-width: 786px;
		margin-inline: auto;
	}

	main {
		padding-block: 48px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--space-grotesk);
		color: var(--primary);
		margin-bottom: 16px;
	}

	h1 {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	h2 {
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 2.25rem;
	}

	p {
		display: block;
		margin-bottom: 16px;
	}
}

#login-btn {
	transition: all .2s ease-in-out;
	color: var(--text);
	font-weight: 400;
}

#login-btn:hover {
	color: var(--secondary);
}

#homepage-link {
	font-size: 1.25rem;
	color: var(--primary);
	background-image: url("../assets/favicon.f9afcd50b23c.svg");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;
	padding-inline-start: 28px;
	font-weight: 500;
}