/** Colours */
:root {
	--bg: #000201;
	--greenerBg: #0c0e0d;
	--text: #f2f2f2;
	--accent1: #59dafb;
	--accent2: #a5fb59;
	--dimText: #444444;
}

.trbl-green {
	border-radius: 15px;
	background: var(--greenerBg);
}

.trbl-green::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom left, var(--accent2), var(--bg) 35%);
	z-index: -1;
	border-radius: inherit;
	margin: -2px;
}

/** Structure & layout */
section {
	position: relative;
	height: 100vh;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

body {
	background: var(--bg);
	margin: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	height: auto;
	min-height: 100vh;
}

.fonted {
	font-family: Satoshi, sans-serif;
	color: var(--text);
}

.flex {
	display: flex;
}

.hori {
	flex-direction: row;
}

.vert {
	flex-direction: column;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.flexCentreHori {
	align-items: center;
}

.flexCentreVert {
	justify-content: center;
}

.centre {
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.textCentre {
	text-align: center;
}

/** Font */
p,
h1,
h2,
h3,
h4,
span {
	margin-top: 0;
}

h1 {
	font-weight: 700;
	font-size: 5em;
}

h2 {
	font-weight: 700;
	font-size: 3em;
}

p {
	font-size: 1.5em;
}

.fancy {
	font-family: playfairDisplay, serif;
}

.accentBlue {
	color: var(--accent1);
}

.blue {
	--accent: var(--accent1);
}

.green {
	--accent: var(--accent2);
}

.halfAccent {
	background: linear-gradient(180deg, var(--text) 50%, var(--accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.halfAccentTop {
	background: linear-gradient(0, var(--text) 30%, var(--accent) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/** Colours */
.bgAccentBlue {
	background: var(--accent1);
}

/** Shapes */
.circle {
	border-radius: 100%;
}

/** Behaviour */
#followCursor {
	transform: translate(-50%, -50%);
	z-index: 1;
	user-select: none;
	pointer-events: none;
	clip-path: none;
}

/** Appearance */
.mobileOnly {
	display: none;
	user-select: none;
}

.hidden {
	display: none;
	user-select: none;
	pointer-events: none;
}

/** Keyframes */
@keyframes scale {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@media screen and (max-width: 1230px) {
	body *:not(.mobileOnly) {
		display: none;
		user-select: none;
	}

	.mobileOnly {
		margin-top: 15vw;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		display: block;
		user-select: text;
		text-align: center;
		padding: 20vh 15vw;
	}

	.mobileOnly * {
		display: block !important;
		user-select: text !important;
	}

	h1 {
		font-size: 4em;
		overflow-wrap: break-word;
	}

	p {
		font-size: 1em;
		opacity: 75%;
	}

	img {
		transform: scale(5);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
		filter: invert(92%) sepia(13%) saturate(400%) hue-rotate(155deg)
			brightness(99%) contrast(94%);
	}
}