:root {
	--colour-white: #F9F8F2;
	--colour-yellow: #FFE300;
	--colour-dark-gray: #3F3F3F;
	--colour-gray: #3D3D3D;
	--colour-very-dark-gray: #171D1A;

	--colour-highlights: var(--colour-yellow);
	--colour-background: var(--colour-very-dark-gray);
	--colour-body-text: var(--colour-white);

	--container-width: 1032px;
	--default-padding: 48px;

	--body-font: "Lato", sans-serif;
	--special-font: "Playfair Display", serif;

	--hover-opacity: 0.6;
	--transition-length: 250ms;
	--transition-timing: cubic-bezier(0.83, 0, 0.17, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--colour-background);
	color: var(--colour-white);
	font-family: var(--body-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
}

::selection {
	background: var(--colour-highlights);
	color: var(--colour-background);
}

#instantclick-bar {
	display: none;
}

@media screen and (max-width: 1128px) {
	.container {
		max-width: 100%;
		padding: 0 40px;
	}
}

@media screen and (max-width: 500px) {
	.container {
		max-width: 100%;
		padding: 0 25px;
	}
}