@font-face {
	font-family: 'Material Icons';
	src: url('/static/fonts/MaterialIcons-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}


@media (max-width:1158px) {
	.phone-w12 {
		flex: 0 0 100%;
	}
	.on-phone {
		display: initial;
	}

	.on-desktop {
		display: none !important;
	}

	.phone-flex-flow {
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: flex-start;
	}

	.phone-max-width-20 {
		max-width: 20rem;
	}

	.phone-max-width-8 {
		max-width: 6rem;
	}
}

@media (min-width:1159px) {
	.desktop-w12 {
		width: 100%;
	}

	.desktop-w3 {
		flex: 0 0 20%;
	}

	.desktop-w4 {
		flex: 0 0 33.33%;
	}

	.desktop-w6 {
		flex: 0 0 50%;
	}

	.margin-top-10 {
		margin-top: 10rem;
	}

	.on-phone {
		display: none !important;
	}

	.on-desktop {
		display: initial;
	}
}

:root {
	--primary: #301934;
	--primary-semi-transparent: #30193488;
	--accent: #d4af37;
	--accent-dark: #8b6b04;
	--text: #000000;
	--bg: #ffffff;
	--grey: #888888;
	--unimportant: #ffffffb2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: #301934;
		--primary-semi-transparent: #30193488;
		--accent: #d4af37;
		--accent-dark: #d4af37;
		--text: #ffffff;
		--bg: #121212;
		--grey: #888888;
		--unimportant: #ffffffb2;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--text);
	background-color: var(--bg);
}

h1 {
	font-size: 2rem;
	font-family: Fira Sans, sans-serif;
}

h2 {
	font-size: 1.5rem;
	font-family: Fira Sans, sans-serif;
}

p {
	font-family: IBM Plex Serif, serif;
}

a {
	color: var(--accent-dark);
}

hr {
	border: none;
	border-top: thin solid var(--grey);
	text-align: center;
	margin-top: 2rem;
}

hr::after {
	content: "\e54d";
	display: inline-block;
	position: relative;
	top: -.85rem;
	font-size: 1.5em;
	padding: 0 0.25em;
	background: var(--bg);
}

::placeholder {
	font-weight: 200;
}

/* TEXT COLOUR */
.text {
	color: var(--text);
}

.text-unimportant {
	color: var(--unimportant);
}

.text-white {
	color: white;
}

.text-grey {
	color: var(--grey);
}

/* PADDING */

.padding-bottom-_25 {
	padding-bottom: .25rem;
}

.padding-lr-_1 {
	padding-left: .1rem;
	padding-right: .1rem;
}

.padding-lr-2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.padding-l-16 {
	padding-left: 16rem;
}

/* MARGINS */

.margin-lr-1 {
	margin-left: 1rem;
	margin-right: 1rem;
}

.margin-lr-5 {
	margin-left: 4%;
	margin-right: 4%;
}

.margin-top-0 {
	margin-top: 0;
}

.margin-top-1 {
	margin-top: 1rem;
}

.margin-top-20 {
	margin-top: 20rem;
}

.margin-bottom-_5 {
	margin-bottom: .5rem;
}

.margin-bottom-2 {
	margin-bottom: 2rem;
}

.margin-tb-0 {
	margin-top: 0;
	margin-bottom: 0;
}

.margin-tb-_5 {
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.margin-tb-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* WIDTH */

.max-width-10 {
	max-width: 10%;
}

.max-width-90 {
	max-width: 90%;
}

.w1 {
	width: 8.33%;
}

.w2 {
	width: 16.66%;
}

.w3 {
	width: 25%;
}

.w4 {
	width: 33.33%;
}

.w6 {
	width: 50%;
}

.w8 {
	width: 66.66%
}

.w9 {
	width: 75%;
}

.w10 {
	width: 83.33%
}

.w12 {
	width: 100%;
}

.width-92px {
	width: 5.75rem;
}

.width-154px {
	width: 9.625rem;
}

.width-185px {
	width: 11.5625rem;
}

.min-width-13_5 {
	min-width: 13.5rem;
}

.force-width-16 {
	min-width: 16rem;
	max-width: 16rem;
}

/* DISPLAY */

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
}

.flex {
	display: flex;
}

.block {
	display: block;
}

/* background */

.bg-none {
	background: none;
}

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

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

.bg-gradient {
	background-image: linear-gradient(transparent, black);
}

.cover {
	object-fit: cover;
}

/* FONT SIZE */

.font-_875 {
	font-size: .875rem
}

.font-1_5 {
	font-size: 1.5rem;
}

.font-2 {
	font-size: 2rem;
}

.font-3 {
	font-size: 3rem;
}

/* FILTER */

.spoiler {
	filter: blur(10px);
}

.spoler:hover {
	filter: blur(0) !important;
}

/* POSITION */

.bottom {
	bottom: 0;
}

.bottom-4 {
	bottom: 3.9rem;
}

.top {
	top: 0;
}

.left {
	left: 0;
}

.move-centre {
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
}

.right-float {
	float: right;
}

.move-100 {
	transform: translateY(50%);
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.behind {
	z-index: -1;
}

/* ALIGN */

.flex-centre {
	justify-content: center;
}

.flex-flow {
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
}

.flex-force-50 {
	flex: 0 0 40%;
}

.flex-wrap {
	flex-flow: row wrap;
}

.flex-align-bottom {
	align-items: flex-end;
}

.indent-2 {
	text-indent: 2rem;
}

.valign-mid {
	vertical-align: middle;
}

.justify {
	text-align: justify;
}

.centre {
	text-align: center;
}

/* CURSOR */

.cursor-hand {
	cursor: pointer;
}

/* BORDER */

.border-none {
	border: none;
}

.border-bottom-white {
	border-bottom: 1px solid white;
}

.border-bottom {
	border-bottom: 1px solid var(--text);
}

.border-bottom:active, .border-bottom:focus, .border-bottom:focus-within {
	border-bottom: 1px solid var(--accent);
}

/* HEIGHT */

.height-30 {
	height: 30rem;
}

/* FONT STYLE */

.sans {
	font-family: Fira Sans, sans-serif;
}

.serif {
	font-family: IBM Plex Serif, serif;
}

.material-icon {
	font-family: Material Icons;
}

.font-thin {
	font-weight: 200;
}

.italic {
	font-style: italic;
}

.hyphenate {
	hyphens: auto;
}

.decoration-none {
	text-decoration: none;
}
