:root {
	/* Do not change these colors. Do not change these variable names. "ggold"
	   and "maggenta" are not typos, but instead emphasizing that they are Gamer
		 Guides' (GG) specific shades of those colors for branding. If you are
		 going to change something in here, make sure you know what you're doing
		 and double-check with the bosses. */
	--maggenta: #e75971;
	--ggold: #ffc700;
	--gg-purple: #611a8b;
	--link-light: #005eb5;
	--link-dark: #4bc9ff;
	--subtext: #818181;
	--btn-red: #ce1e24;
	--btn-dark-gray: #565a62;
	--btn-cyan: #4bc9ff;
	--nav-inactive-bg-light: #f4f4f4;
	--nav-inactive-bg-dark: #8e9196;
	--gray-bg-light: #f4f4f4;
	--gray-bg-dark: #1b1b1b;
	--gray-border: #c7c8ca;
	--pink-active: #fed5d6;
	--gray-active: var(--nav-inactive-bg-dark);
	--margin: 1.25rem;
	--half-margin: 0.625rem;
	--dbl-margin: 2.5rem;
	--triple-margin: 3.75rem;
	--massive-margin: 4.375rem;
	--neg-half-margin: -0.625rem;
	--neg-margin: -1.25rem;

	--rating-bad: hsl(0, 100%, 50%);
	--rating-poor: hsl(28, 96.4%, 56.5%);
	--rating-avg: hsl(45, 100%, 60%);
	--rating-good: hsl(185, 94.9%, 38.8%);
	--rating-great: hsl(100, 60%, 50%);

	--very-dark-gray: #40444c;
	--background: white;
	--background-dark: #292b2c;

	--tertiary-gold-default: #ffe9bd;
	--tertiary-blue-default: #005eb5;
	--tertiary-green-default: #1c8b1a;

	--form-error: #ce1d24;
}

:root > body {
	--link: var(--link-dark);
	--link-hover: var(--link-light);
	--text: white;
	--bg: black;
	--button-secondary-bg: var(--subtext);
	/* --button-primary-border: white; */
	--button-primary-bg: black;
	--button-primary-border: white;
	--nav-inactive: var(--nav-inactive-bg-dark);
	--gray-bg: var(--gray-bg-dark);
	--active: var(--gray-active);
	--btn-active: var(--btn-red);
	--btn-bg: var(--btn-dark-gray);
	--btn-secondary: var(--btn-cyan);

	--background: var(--gray-bg-dark);
	--background-dark: #000;
	--text-inverted: black;
}

:root > body .invert-on-dark {
	filter: invert(1);
}

:root[data-theme="light"] > body {
	--link: var(--link-light);
	--link-hover: var(--link-dark);
	--text: black;
	--bg: white;
	--background: var(--bg);
	--button-secondary-bg: black;
	/* --button-primary-border: white; */
	--button-primary-bg: white;
	--button-primary-border: var(--subtext);
	--nav-inactive: var(--nav-inactive-bg-light);
	--gray-bg: var(--gray-bg-light);
	--active: var(--pink-active);
	--btn-active: var(--btn-red);
	--btn-bg: black;
	--btn-secondary: var(--link-light);

	--gray-bg: var(--gray-bg-light);
	--text: black;
	--text-inverted: white;
}

:root[data-theme="light"] > body .invert-on-dark {
	filter: none;
}

@media only print {
	:root > body {
		/* This should match :root[data-theme="light"] */
		--link: var(--link-light);
		--link-hover: var(--link-dark);
		--text: black;
		--bg: white;
		--background: var(--bg);
		--button-secondary-bg: black;
		/* --button-primary-border: white; */
		--button-primary-bg: white;
		--button-primary-border: var(--subtext);
		--nav-inactive: var(--nav-inactive-bg-light);
		--gray-bg: var(--gray-bg-light);
		--active: var(--pink-active);
		--btn-active: var(--btn-red);
		--btn-bg: black;
		--btn-secondary: var(--link-light);

		--gray-bg: var(--gray-bg-light);
		--text: black;
		--text-inverted: white;
	}
}

.hide,
.hide-until-js {
	display: none !important;
}

body.js .hide-until-js {
	display: initial !important;
}

body {
	color: var(--text);
	font-family: "Roboto", sans-serif;
	margin: 0;
	font-size: 0.85rem;
	/* Gradient is on main instead of body because on short pages, we want the
	black footer to continue to the bottom of the window. */
	background-color: #1d3873;
	/* Transparent black "gradient" is a trick to have the footer have a
	transparent black background over the colored gradient. The same colored
	gradient without the black "gradient" appears on body > main to complete
	the effect. */
	background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
		linear-gradient(to right, #1d3873, #884a72);
	position: relative;
	min-height: calc(100vh - 48px);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body > header {
	font-family: Inter;
}

body > main {
	padding: var(--margin);
	margin-top: 48px;
	position: relative;
	background-image: linear-gradient(to right, #1d3873, #884a72);
	/* min-height: 100vh; */
}

body.use-poppins > main {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

body.use-poppins > main h1 {
	font-size: 3.125em;
}

body.use-poppins > main h2 {
	font-size: 2em;
}

body.use-poppins > main h3 {
	font-size: 1.5em;
}

body.use-poppins > main h4 {
	font-size: 1.17em;
}

body.use-poppins h2,
body.use-poppins h3,
body.use-poppins h4,
body.use-poppins h5,
body.use-poppins h6 {
	font-family: "Poppins", sans-serif;
}

body.has-background > main {
	background-image: none;
}

body.has-game-menu {
	padding-top: 40px;
}

body > main > * {
	z-index: 10;
	position: relative;
}

/* body > #background {
	background-size: cover;
	background-position: center center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
} */

body > main > .grid {
	gap: var(--margin) 1px;
	grid-template-columns: 1fr;
	margin: 0 auto;
	flex-direction: column;
	display: flex;
}

body > main > .grid > * {
	width: 100%;
}

body > main > .grid a.backlink {
	font-weight: bold;
}

body > main > .grid footer {
	margin-top: var(--margin);
}

body > footer {
	color: white;
	padding: var(--margin);
	font-size: 1.1rem;
	position: relative;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.75);
}

/* body.has-background > footer {
background-color: rgba(0, 0, 0, .75);
} */

body > footer a,
body > footer a:active,
body > footer .footer-icons .icon-discord::before,
body > footer .footer-icons a:active .icon-discord::before,
body > footer .footer-icons .icon-twitch::before,
body > footer .footer-icons a:active .icon-twitch::before {
	color: white;
}

body > footer a:hover,
body > footer .footer-icons a:hover .icon-discord::before,
body > footer .footer-icons a:hover .icon-twitch::before {
	color: var(--link-light);
}

body > footer .footer-icons a {
	border-radius: 50%;
	/* padding: .5em; */
	font-size: large;
	background-color: var(--gray-bg-dark);
	font-weight: normal;
	/* display: inline-block; */
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

body > footer nav {
	margin-bottom: var(--dbl-margin);
}

body > footer nav ul {
	margin: 0;
}

body > footer #footer-nav > ul {
	line-height: 1.5em;
}
body > footer #footer-nav > ul > li {
	text-wrap: nowrap;
}

body a,
.fake-link,
.inner-link {
	color: var(--link);
	text-decoration: none;
}

body a:hover,
body a:hover .fake-link,
.inner-link:hover {
	color: var(--link-hover);
}

body a.fake-unlink,
body a .fake-unlink,
body a.fake-unlink:hover,
body a:hover .fake-unlink {
	color: var(--text);
}

nav > ul {
	list-style-type: none;
	padding: 0;
}

nav > ul > li {
	display: inline;
	margin-right: 1em;
}

nav > ul > li:last-child {
	margin-right: 0;
}

nav > ul > li > a {
	font-weight: bold;
}

img {
	max-width: 100%;
	height: auto;
}

button,
.button {
	border-radius: 2em;
	text-align: center;
	background-color: var(--btn-bg);
	color: white;
	/* border-color: var(--button-primary-border); */
	padding: var(--half-margin) 0;
	border-style: none;
	border-width: 1px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

button:hover,
.button:hover {
	color: white;
	background-color: var(--maggenta);
}

button:active,
.button:active {
	background-color: var(--btn-active);
}

button.secondary,
.button.secondary,
button.internal,
.button.internal,
button.external,
.button.external {
	border-style: solid;
	background-color: var(--bg);
	color: var(--text);
	border-color: var(--text);
}

button.secondary:hover,
.button.secondary:hover,
button.internal:hover,
.button.internal:hover,
button.external:hover,
.button.external:hover {
	border-color: var(--btn-secondary);
	color: var(--btn-secondary);
}

button.secondary:active,
.button.secondary:active,
button.internal:active,
.button.internal:active,
button.external:active,
.button.external:active {
	color: white;
	background-color: var(--btn-secondary);
}

button.internal,
.button.internal {
	color: var(--text);
	border-color: var(--btn-bg);
}

button.external,
.button.external {
	color: var(--btn-secondary);
	border-color: var(--btn-bg);
}

button > span,
.button > span {
	margin-left: 0.25em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

.subtext {
	margin-top: 0.5em;
	margin-bottom: 0;
	color: var(--subtext);
}

/* In-box top-level labels */
section .in-box-title {
	color: var(--maggenta);
	font-size: 1.2em;
}

/* Custom scrollbar stuff. FF supports the standard; WebKit/Blink do not. */
.gg-scrollbar,
.gg-scrollbar-horiz {
	scrollbar-color: var(--subtext) transparent;
	scrollbar-width: thin;
}

.gg-scrollbar {
	padding-right: 10px;
	overflow-y: auto !important;
}

.gg-scrollbar::-webkit-scrollbar,
.gg-scrollbar-horiz::-webkit-scrollbar {
	-webkit-appearance: none;
}

.gg-scrollbar::-webkit-scrollbar {
	width: 5px;
	height: 0;
}

.gg-scrollbar-horiz {
	padding-bottom: 10px;
	overflow-x: auto;
}

.gg-scrollbar-horiz::-webkit-scrollbar {
	height: 5px;
	width: 0;
}

.gg-scrollbar::-webkit-scrollbar-thumb,
.gg-scrollbar-horiz::-webkit-scrollbar-thumb {
	background-color: var(--subtext);
	border-radius: 5px;
	z-index: 100;
}

.gg-scrollbar::-webkit-scrollbar-corner,
.gg-scrollbar-horiz::-webkit-scrollbar-corner {
	display: none;
}

.grid {
	display: grid;
	gap: var(--margin);
}

.padded-grid {
	display: grid;
	gap: 0;
}

.padded-grid > * {
	padding: var(--half-margin);
}

.grid > * *:first-child,
.padded-grid > * *:first-child {
	margin-top: 0;
}

.grid > * *:last-child,
.padded-grid > * *:last-child {
	margin-bottom: 0;
}

.appended-icon {
	position: relative;
}

.appended-icon::before,
.appended-icon::after {
	/* font-family: 'abbify-icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute; */

	font-family: "IcoMoon-Ultimate" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	letter-spacing: 0;
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	font-feature-settings: "liga";
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: block;

	position: absolute;
}

.activatable.active,
.activatable:hover {
	background-color: var(--active) !important;
	color: black;
}

.activatable.active .subtext,
.activatable:hover .subtext {
	color: var(--text);
}

/* Ad stuff */

.spons-box {
	margin: 0 auto;
	display: none;
}

.spons-box > img {
	display: block;
}

.spons-box > a.spons-premium {
	display: flex;
	background-color: black;
	color: var(--gold);
	text-align: center;
	font-weight: bold;
	position: relative;
	align-items: center;
	width: 300px;
	margin: 0 auto;
}

.spons-box > a.spons-premium:hover {
	background-color: var(--gold);
	color: black;
}

.spons-box > a.spons-premium:active {
	background-color: var(--link-light);
	color: white;
}

.spons-box > a.spons-premium > div {
	flex: 1 0 auto;
	border-right-style: solid;
	border-color: var(--subtext);
	border-width: 1px;
	padding: 0.5em 0;
}

.spons-box > a.spons-premium > div,
.spons-box > a.spons-premium span.gg-icon {
	color: #efaa00;
}

.spons-box > a.spons-premium:hover {
	background-color: #efaa00;
}

.spons-box > a.spons-premium:hover > div,
.spons-box > a.spons-premium:hover span.gg-icon {
	color: #000000;
}

.spons-box > a.spons-premium > span {
	flex: 0 0 35px;
}

.spons-box > a.spons-premium > div > .spons-premium-head {
	font-size: 1.2em;
	color: white;
}

.spons-box > a.spons-premium:hover > div {
	border-color: black;
}

.spons-box > a.spons-premium:hover > div > .spons-premium-head {
	color: black;
}

.spons-box > a.spons-premium:active > div > .spons-premium-head {
	color: white;
}

body.nonsubscriber > main > .grid > #spons-wide {
	width: 300px;
	display: block;
}

body > main > .grid section {
	background-color: var(--bg);
	padding: var(--dbl-margin) var(--margin);
	box-sizing: border-box; /* Not sure why this is necessary */
}

body > main > .grid > *,
body > footer {
	margin: 0 auto;
}

.truncatable {
	line-clamp: 2;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	/* Line clamping in Webkit will place ellipsis in wrong place otherwise */
	text-align: left;
}

/* Navbar stuff - To be removed when we have the new navbar */

body > header > #navbar-wrap #navbar {
	width: auto;
	padding: 0 12px;
	margin: 0;
}

body > header > #navbar-wrap #navbar > #header-premium {
	display: none;
}

body > header > #navbar-wrap #navbar .top-menu label:hover,
body > header > #navbar-wrap #navbar #new-menu-icon label:hover {
	background-color: var(--maggenta);
	color: white;
}

.dogear {
	position: relative;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0% 100%);
}

.dogear::after {
	display: block;
	position: absolute;
	right: -1px;
	top: -1px;
	width: 20px;
	height: 20px;
	border: 1px solid white;
	background-color: #888;
	border-radius: 0 10px 0 10px;
	clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
	content: "";
}

section > main > .grid > .map-link-row {
	flex-direction: row;
	display: flex;
	gap: 0;
}

.map-link-row > .home-maps-cover {
	flex: 0 0 36px;
}

.map-link-row > .home-maps-map-preview {
	flex: 0 0 68px !important;
	width: 68px;
	height: 68px;
	border: 1px solid white;
	margin-left: calc(var(--neg-margin) - var(--half-margin));
	margin-top: var(--half-margin);
}

.map-link-row > .home-maps-map-preview > img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	object-position: center;
}

/* Flash notifications */

main > #flash {
	position: fixed;
	right: var(--margin);
	width: 100%;
	max-width: 300px;
	font-weight: bold;
	font-size: 1.2em;
	animation-name: fade;
	animation-duration: 1s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
	z-index: 999;
}

main > #flash > div {
	padding: var(--margin) var(--dbl-margin) var(--margin) var(--triple-margin);
	border-radius: var(--half-margin);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: black;
	color: white;
	margin-bottom: var(--margin);
	position: relative;
}

main > #flash > div.flash-error {
	color: var(--maggenta);
}

main > #flash > div::before {
	position: absolute;
	left: var(--margin);
	top: var(--margin);
}

main > #flash > div.flash-message::before {
	color: #57fb5e;
	content: "\ea10";
}

main > #flash > div.flash-error::before {
	content: "\ed50";
}

main > #flash > div > .close {
	display: none;
	color: var(--subtext);
	position: absolute;
	right: var(--half-margin);
	top: var(--half-margin);
	cursor: pointer;
}

main > #flash > div > .close:hover {
	color: white;
}

body.js > main > #flash > div > .close {
	display: block;
}

/* Guide search */

/* Log in stuff */
dialog#authenticate {
	border-radius: 6px;
	flex-direction: column;
	justify-content: center;
	color: var(--text);
	background-color: #292b2c;
	padding: var(--margin);
	overflow: visible;
	font-family: Inter;
	box-sizing: border-box;
}

:root[data-theme="dark"] dialog#authenticate {
	background-color: #000;
}

dialog#authenticate * {
	font-family: Inter;
	font-size: 14px;
	line-height: 14px;
	box-sizing: border-box;
}

dialog#authenticate:-internal-dialog-in-top-layer::backdrop {
	background-color: transparent;
}

dialog#authenticate:modal {
	display: flex;
	margin-right: 20px;
	margin-top: 68px;
	width: 100%;
	border: none;
	color: white;
}

dialog#authenticate form {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

dialog#authenticate form > *:first-child {
	margin-top: 0;
}

dialog#authenticate form > *:last-child {
	margin-bottom: 0;
}

dialog#authenticate form > a,
dialog#authenticate form button {
	width: 100%;
	height: 33px;
	border: 1px solid #686868;
	background-color: transparent;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: white;
	cursor: pointer;
	font-weight: 700;
}

dialog#authenticate form button {
	padding-left: 20px;
	width: 104px;
}

dialog#authenticate form > a:hover,
dialog#authenticate form button:hover {
	border: 1px solid transparent;
	background-color: var(--maggenta);
}

dialog#authenticate form > a img,
dialog#authenticate form button img {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

dialog#authenticate form .divider {
	display: flex;
	align-items: center;
	margin: 18px -20px;
}

dialog#authenticate form .divider > p {
	margin: 0 12px;
}

dialog#authenticate form .divider > span {
	flex: 1 1 auto;
	border-bottom: 1px solid #565a62;
}

dialog#authenticate a {
	color: white;
}

dialog#authenticate a:active,
dialog#authenticate a:focus,
dialog#authenticate a:hover {
	outline: none;
	color: white;
}

dialog#authenticate p {
	text-align: center;
}

dialog#authenticate form input {
	height: 33px;
	margin-bottom: 10px;
	padding: 0 10px;
	font-size: 14px;
	background-color: #565a62;
	color: var(--text);
	border: 1px solid transparent;
}

dialog#authenticate form input:focus,
dialog#authenticate form input:active {
	background-color: #40444c;
	outline: none;
	border: 1px solid var(--maggenta);
}

dialog#authenticate form input::placeholder {
	color: white;
	opacity: 1;
}

dialog#authenticate form input::-ms-input-placeholder {
	color: white;
}

dialog#authenticate form #authenticate-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
}

time .ago-long {
	display: none;
}

img {
	display: block;
}

form .fields {
	color: var(--text);
	background-color: var(--gray-bg);
	padding: var(--margin) var(--margin);
	margin: var(--margin) 0;
}

form .fields input,
form .fields textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	color: var(--text);
	background-color: var(--gray-bg);
	margin-bottom: var(--margin);
	border-style: none;
	outline: none;
	padding: 0.5em 0;
	font-size: 1em;
}

form .fields.hp {
	/* Honeypot field */
	display: none;
}

.spin {
	animation-duration: 2s;
	animation-name: spin;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	display: inline-block;
}

/**
 * Tooltips
 * https://www.w3schools.com/css/css_tooltip.asp
 * Yeah, I know, w3schools, lol
 */
.tooltip {
	visibility: hidden;
	width: 240px;
	background-color: var(--gray-bg);
	color: var(--text);
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	position: absolute;
	z-index: 1;

	bottom: 100%;
	left: 50%;
	margin-left: -120px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip::after {
	content: " ";
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--gray-bg) transparent transparent transparent;
}

.wip-overlay {
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	font-size: 10px;
	width: 100%;
	overflow-y: auto;
}

.wip-overlay > span {
	padding: 2px;
	padding-left: 5px;
	font-family: "Poppins", sans-serif;
}

.wip-overlay .wip {
	background-color: var(--tertiary-blue-default);
	color: #fff;
	text-transform: uppercase;
}

.wip-overlay .update-date {
	background-color: var(--tertiary-gold-default);
	color: #000;
	font-weight: bold;
}

/* New section bar */
#navbar-wrap #navbar-section-menu {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
	font-size: 16px;
	gap: 10px;
}

#navbar-wrap #navbar-section-menu .guide-section-menu {
	display: inline-flex;
	align-items: center;
	height: 50px;
	overflow-y: hidden;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > * {
	margin: 0 5px;
	text-align: center;
	padding: 0 0.5em;
	white-space: nowrap;
}

#navbar-wrap
	#navbar-section-menu
	.guide-section-menu
	> a
	span.guide-section-menu-wip {
	background-color: #2976de;
	font-size: 8pt;
	border-radius: 1em;
	padding: 2px 5px;
	margin-left: 0.5em;
	font-weight: normal;
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
}

/* This is a stupid trick to move inactive items to the end of the list. */
#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(2) {
	order: 0;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(3) {
	order: 1;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(4) {
	order: 2;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(5) {
	order: 3;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(6) {
	order: 4;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(7) {
	order: 5;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(8) {
	order: 6;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(9) {
	order: 7;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > a:nth-child(10) {
	order: 8;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(2) {
	order: 10;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(3) {
	order: 11;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(4) {
	order: 12;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(5) {
	order: 13;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(6) {
	order: 14;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(7) {
	order: 15;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(8) {
	order: 16;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(9) {
	order: 17;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > div:nth-child(10) {
	order: 18;
}

/* Stupid trick to stop text getting wider when bolded
https://stackoverflow.com/a/32570813/11023 */
#navbar-wrap #navbar-section-menu .guide-section-menu > *::after {
	display: block;
	content: attr(title);
	font-weight: bold;
	height: 1px;
	color: transparent;
	overflow: hidden;
	visibility: hidden;
}

#navbar-wrap #navbar-section-menu .guide-section-menu > * > i {
	display: none;
}

.comment-submission-error {
	background-color: var(--form-error);
	color: #fff;
	padding: 1rem 1.4rem;
	gap: 0.5rem;
	align-items: flex-start;
	font-family: "Poppins", "sans-serif";
	display: none;
}
.comment-submission-error.active {
	display: flex;
}

.comment-submission-error svg {
	margin-top: 0.2rem;
}
.comment-submission-error h4 {
	line-height: normal;
}

.comment-submission-error p {
	margin-bottom: 0;
}

.google-auth-button iframe {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Animations */

@keyframes fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

@media (min-width: 400px) {
	/* Navbar stuff - To be removed */
	body > header > #navbar-wrap #navbar > #header-premium {
		display: block;
	}
}

@media (min-width: 768px) {
	body > main {
		padding-left: 40px;
		padding-right: 40px;
	}

	body > main > .grid section {
		padding: var(--dbl-margin);
	}

	body > footer > #footer-inner {
		display: grid;
		gap: var(--margin);
		grid-template-columns: max-content 1fr;
	}

	body > footer nav {
		margin-bottom: var(--margin);
	}

	body > footer > #footer-inner > #footer-nav,
	body > footer > #footer-inner > #footer-branding {
		grid-column: 1 / span 2;
	}

	body > footer p {
		margin-top: 0;
	}
}

@media (min-width: 1064px) {
	body > main {
		padding-top: 40px;
	}

	body > main > .grid {
		width: 1024px;
	}

	body > footer > #footer-inner {
		grid-template-columns: 1fr max-content max-content;
		gap: var(--margin) 40px;
	}

	body > footer > #footer-inner > #footer-nav {
		grid-column: 1;
	}

	body > footer > #footer-inner > #footer-branding {
		grid-column: 1 / span 3;
	}

	body > footer > #footer-inner > .footer-icons {
		text-align: right;
	}

	time .ago-long {
		display: initial;
	}

	time .ago-short {
		display: none;
	}

	/* Ad stuff */

	body.nonsubscriber > main > .grid > #spons-wide {
		width: 970px;
	}

	body.subscriber .map-link-row > .home-maps-map-preview {
		flex: 0 0 120px;
	}

	body.subscriber .map-link-row > .home-maps-map-preview > img {
		width: 120px;
	}

	.wip-overlay span {
		width: fit-content;
	}
}

@media all and (min-width: 1280px) {
	#navbar-section-menu {
		padding: 0px !important;
		max-width: 1024px;
		margin: auto !important;
	}
}

@media (max-width: 600px) {
	.wip-overlay {
		width: 100%;
		text-align: center;
	}

	.wip-overlay .update-date {
		width: unset;
	}
}