body {
	margin: 0;
	font-family: 'Poppins', serif;
	height: 100%;
}

html {
	height: 100%;
}

/* GLOBAL COLOUR PALETTE */
:root {
	--primary-color: #ff9930;
	--secondary-color: white;
	--tertiary-color: #eaeaea;
	--quaternary-color: #96c6ca;
	--quinary-color: #ffc13a;
	--contrast-color: #3096ff;
}

/* BUILDING BLOCKS */

.container {
	display: flex;
	flex-direction: column;
}

.section {
	width: 90%;
	margin: auto;
	padding-bottom: 10px;
}

@media (min-width: 768px) {
	.section {
		width: 70%;
	}
}

@media (min-width: 1800px) {
	.section {
		width: 50%;
		padding-bottom: 20px;
	}
}

/* BG COLOUR  */

.primary-bg {
	background-color: var(--primary-color);
}

.secondary-bg {
	background-color: var(--secondary-color);
}

.tertiary-bg {
	background-color: var(--tertiary-color);
}

.quaternary-bg {
	background-color: var(--quaternary-color);
}

/* TYPOGRAPHY */

@media (min-width: 1400px) {
	p {
		font-size: 1.25rem;
	}

	ul {
		font-size: 1.25rem;
	}
}

.text-center {
	text-align: center;
}

.emphasis {
	font-weight: bold;
}

/* OVERRIDES */

.unset {
	all: unset;
}

/* A11Y FOCUS */

.unset:focus-visible,
:focus-visible {
	outline: 3px solid var(--contrast-color);
	box-shadow: 0 0 0 6px var(--secondary-color);
}

/* ANIMATIONS */

.boop-effect {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.2s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.boop-effect:hover {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}