:root {
	--blue: rgb(91 188 251);
	--red: rgb(154 67 53);
	--grey: rgb(193 193 193);
}

html, head, body {
	background: #000;
	border: 0;
	padding: 0;
	margin: 0;

	font-family: "Aldrich";
	color: #FFF;
}

body {
	display: grid;
	justify-content: center;
}

h1[title] {
	font-weight: normal;
	color: #f51b08;
	background: -webkit-gradient(linear,left top,left bottom,from(#f51b08),to(#8c0b00));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 15px 0 0 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #2d2d2d;
}

main {
	max-width: 795px;
	font-size: 18px;
	user-select: none;
	* { margin: 0; padding: 0; }

	img, video {
		width: 100%;
		margin: 15px 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 500;
		&[center] { text-align: center; }
	}
	h2 { font-size: 30px; }
	h3 { font-size: 24px; }

	p {
		font-family: "Open Sans";
		font-size: 14px;
		font-weight: 400;
		color: var(--grey);
		margin: 15px 0;
	}

	p:has(+ img), p:has(+ video) { margin-bottom: 0; } /* if a img/video follows a p, no bottom margin on p */
	img + p, video + p { margin-top: 0; } /* if a img/video prescedes a p, no top margin on p */

	p {
		&[bold] { font-weight: 700; }
		&[extra-margin-bottom] { margin-bottom: 60px !important; }
		&[extra-margin-top] { margin-top: 60px !important; }
	}
	p, img {
		&[no-margin] { margin: 0 !important; }
		&[no-margin-top] { margin-top: 0 !important; }
		&[no-margin-bottom] { margin-bottom: 0 !important; }
	}

	romac-credits { display: none; }

	[style="color: black;"] { /* DEBUG: Just to see while creating the pages */
    user-select: text;
    color: grey !important;
	}
}

nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 40px;
	margin: 20px 0;

	button {
		cursor: pointer;
		background-color: rgb(25 25 25);
		border: 0;
		color: var(--blue);
		font-weight: bold;
		font-size: 20px;
	}

	button[disabled] {
		cursor: not-allowed;
		filter: grayscale(1);
		pointer-events: none;
	}
	button[start]:before { content: "\21A4"; }
	button[previous]:before { content: "\2190"; }
	button[random]:before { content: "\2194"; }
	button[next]:before { content: "\2192"; }
	button[end]:before { content: "\21A6"; }

	button[start]:before, button[end]:before {
		font-size: 30px;
    margin-top: -9px;
    display: block;
	}

	button:hover {
		color: #FFF;
		border: 1px solid #FFF;
	}
}

footer[hidden] { display:none; }
footer {
	font-size: 20px;
	h1 { margin-bottom: -15px !important; } /* DIRTY HACK :( */
	span { color: var(--red); }
	a { color: var(--blue); }
	li::marker { color: rgb(255 255 255 / 0.5); }
	li { list-style-type: square; }
}

@font-face {
	font-family: "Aldrich";
	src: url("/aldrich.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	src: url("/open_sans.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}