@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* || COLOR VARIABLES */
:root {
	--text-primary: #181313;
	--text-secondary: #696969;
	--text-hyperlink: #0064E0;
	--surface-note: #F4EFEA;
    --surface-button: #333333;
	--content-max-width: 720px;
}

* { 
	font-family: "Atkinson hyperlegible", sans-serif;
	color: var(--text-primary);
}

html {
	font-size: 100%;
}

/* || FONT SIZE AND WEIGHT */
.small {
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5rem;
}

.medium {
	font-weight: 400;
	font-style: normal;
	font-size: 1.25rem;
	line-height: 2rem;
}

.large {
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 2.25rem;
}

.extra-large {
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	line-height: 2.5rem;
}

.bold {
	font-weight: 700;
}

.italic {
	font-style: italic;
}

p a {
	text-decoration: none;
	color: var(--text-hyperlink);
}

/* || FONT MEDIA QUERY */
@media (width <= 760px) {
	.extra-large {
		font-size: 1.5rem;
		line-height: 2.25rem;
	}

	.large {
		font-size: 1.25rem;
		line-height: 2rem;
	}
}

@media (width <= 480px) {
	.medium {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.small {
		font-size: 0.75rem;
		line-height: 1rem;
	}
}