amuse/static/style/style.css

@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;
	}

	.phone-bottom-_4 {
		bottom: .4rem !important;
	}
}

@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: #8b6b04;
	--accent-dark: #d4af37;
	--text: #000000;
	--bg: #ffffff;
	--black: #121212;
	--grey: #888888;
	--dark-grey: #444444;
	--unimportant: #ffffffb2;
	--error: #892b30;
}

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

input {
	-webkit-appearance: none;
}

input[type='checkbox'] {
	-webkit-appearance: checkbox;
}

nav ul {
	display: none;
}
nav input:checked ~ ul {
	display: block;
}

.experienced-box, .experienced-box-flex {
	display: none;
}

.experienced-datetime-check:checked ~ .experienced-box {
	display: block;
}

.experienced-datetime-check:checked ~ .experienced-box-flex {
	display: flex;
}

#sfa-box {
	display: none;
}

#sfa-enabled:checked ~ #sfa-box {
	display: block;
}

* {
	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);
}

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

.hr-film::after {
	content: "\e54d";
}

.hr-tv::after {
	content: "\e333";
}

.hr-book::after {
	content: "\e865";
}

.hr-person::after {
	content: "\e7fd";
}

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

::placeholder {
	font-weight: 200;
	text-overflow: ellipsis;
}

.list-style-none {
	list-style-type: none;
}

.border-radius-25 {
	border-radius: 25%;
}

.clamp {
	display: -webkit-box;
	overflow : hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 0;
}

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

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

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

.text-white {
	color: white;
}

.text-black {
	color: black;
}

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

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

/* PADDING */

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

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

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

.padding-lr-0 {
	padding-left: 0;
	padding-right: 0;
}

.padding-lr-_5 {
	padding-left: .5rem;
	padding-right: .5rem;
}

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

.padding-lr-_25 {
	padding-left: .25rem;
	padding-right: .25rem;
}

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

.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-auto {
	margin: auto
}

.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-_25 {
	margin-top: .25rem;
}

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

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

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

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

.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;
}

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

/* 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;
}

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

.width-1_5 {
	width: 1.5rem;
}

/* DISPLAY */

.display-none {
	display: none;
}

.inline {
	display: inline;
}

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

.flex {
	display: flex;
}

.block {
	display: block;
}

/* background */

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

.bg-none {
	background: none;
}

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

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

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

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

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

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

.hover-bg-grey {
	outline: 0;
	background-color: transparent;
	transition: background-color 0.3s ease-in-out;
}

.hover-bg-grey:hover, .hover-bg-grey:active, .hover-bg-grey:focus {
	outline: 0;
	background-color: var(--grey);
}

.hover-bg-dark-accent {
	outline: 0;
	background-color: var(--accent);
	transition: background-color 0.3s ease-in-out;
}

.hover-bg-dark-accent:hover, .hover-bg-dark-accent:active, .hover-bg-dark-accent:focus {
	outline: 0;
	background-color: var(--accent-dark);
}

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

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

.cover {
	object-fit: cover;
	object-position: top;
}

/* FONT SIZE */

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

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

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

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

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

/* FILTER */

p.spoiler {
	color: var(--bg);
	border: 1px solid var(--text);
	filter: none;
}

p.spoiler:hover {
	color: var(--text);
	border: 1px solid transparent;
}

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

.spoiler:hover {
	filter: blur(0px);
}

.bw {
	filter: grayscale(100%);
}

.bw:hover {
	filter: grayscale(0) !important;
}

/* POSITION */

.right {
	right: 0;
}

.bottom {
	bottom: 0;
}

.bottom-4 {
	bottom: 3.9rem;
}

.top-m_05 {
	top: -.05rem;
}

.top-m_3 {
	top: -.3rem;
}

.top {
	top: 0;
}

.top-1 {
	top: 1rem;
}

.left {
	left: 0;
}

.clear-float:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

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

.right-float {
	float: right;
}

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

.moveX-m50 {
	transform: translateX(-50%);
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.behind {
	z-index: -1;
}

/* ALIGN */

.flex-content {
	flex: 0 1 auto;
}

.flex-fill {
	flex: 1 1 auto;
}

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

.flex-row {
	flex-direction: row;
}

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

.flex-justify-space {
	justify-content: space-between;
}

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

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

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

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

.flex-align-centre {
	align-items: center;
}

.flex-align-start {
	align-content: flex-start
}

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

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

.justify {
	text-align: justify;
}

.centre {
	text-align: center;
}

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

/* CURSOR */

.cursor-hand {
	cursor: pointer;
}

/* BORDER */

.border-solid {
	border-style: solid;
}

.border-tb-transparent {
	border-top-color: transparent;
	border-bottom-color: transparent;
}

.border-none {
	border: none;
}

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

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

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

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

.border-_5 {
	border-width: .5px;
}

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

.border-gradient {
	border-image: linear-gradient(to bottom, transparent, var(--grey), transparent) 1 100%;
}

.no-outline {
	outline: 0;
}

.no-outline:hover, .no-outline:focus {
	border-image: none;
	border: solid .5px var(--grey) !important;
}

.no-outline:active{
	border: solid .5px var(--accent);
}

/* HEIGHT */

.height-2_8 {
	height: 2.8rem
}

.height-3_3 {
	height: 3.3rem
}

.height-30 {
	height: 30rem;
}

.height-_25 {
	height: .25rem;
}

.height-_1 {
	height: .1rem;
}

.height-fill {
	height: 100%;
}

.height-all {
	height: 100vh;
}

.min-height-231px {
	min-height: 14.4375rem;
}

.min-height-139px {
	min-height: 8.6875rem;
}

.min-height-104px {
	min-height: 6.5rem;
}

/* FONT STYLE */

.monospace {
	font-family: monospace;
}

.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;
}

.font-normal {
	font-weight: normal;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: 600;
}

.hyphenate {
	hyphens: auto;
}

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