html, body {
	padding: 0;
	margin: 0;

	min-height: 100%;
	height: 100%;

	background: var(--background-color);
	color: var(--text-color);

	font: 100% arial; /* basically a fallback */
}

:root {
	--background-color: #242424;

	--text-color-selection: #eeeeeefe; /* barely lower alpha so browser doesn't screw it */
	--text-color: #eeeeee;
	--grayer-color: #cccccc;

	--not-black: #121212;
	--very-dark-accent: #2a2a2a;
	--dark-accent: #313131;
	--medium-accent: #363636;
	--light-accent: #3b3b3b;
	--very-light-accent: #424242;
	--lightest-accent: #6c6c6c;
	/* the brightest it can be, given the #eee text color, that passes WCAG AA (not AAA, though) */

	--hover-scale-amount: 1.05;

	--short-delay: 150ms;

	--fast-speed: 300ms;
	--medium-speed: 600ms;
	--slow-speed: 1s;
	--very-slow-speed: 2s;

	--large-y-offset: 16px;
	--medium-y-offset: 8px;
	--small-y-offset: 4px;

	--scroll-thumb: #4d4d4d;
	--scroll-track: #373737;

	--arrow-size: 14px;

	--square-tile-size: 256px;

	--rect-tile-width: 350px;

	--rect-tile-height: 200px;
}



::selection {
	background-color: var(--text-color-selection);
	color: var(--background-color);
}



@font-face {
	font-family: "Lato";
	src: url("https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2") format("woff2");

	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Roboto";
	src: url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");

	font-display: swap;
	font-style: normal;
	font-weight: 400;
}



* {
	-webkit-tap-highlight-color: transparent;

	font-family: Roboto;
}



#projects, #logo, #logo-text, #logo-sub-text, tile name, .sign {
	font-family: Lato;
}

#logo {
	margin-bottom: 1em;
}

#logo-sub-text {
	font-size: 85%;
	margin-top: 8px;
	font-style: italic;
}



body::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body::-webkit-scrollbar-corner {
	background: var(--scroll-track);
}

body::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
}

body::-webkit-scrollbar-track {
	background: var(--scroll-track);
}



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

@keyframes centerFadeUp {
	from {
		opacity: 0;
		transform: translate(-50%, var(--large-y-offset));
	}
	to {
		opacity: 1;
		transform: translateX(-50%);
	}
}

@keyframes bigFadeUp {
	from {
		opacity: 0;
		transform: translateY(var(--large-y-offset));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mediumFadeUp {
	from {
		cursor: default;
		opacity: 0;
		transform: translateY(var(--medium-y-offset));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes smallFadeUp {
	from {
		opacity: 0;
		transform: translateY(var(--small-y-offset));
	}
	to {
		opacity: 1;
		transform: none;
	}
}



h1 {
	font-size: 300%;

	text-shadow: 0 0 5px #eeea;
	transition: text-shadow var(--fast-speed);

	text-align: center;

	margin-top: 1em;

	width: 100%;
}

h1:hover {
	text-shadow: 0 0 7px #eeec;
}

h1 {
	user-select: none;
}

h2 {
	width: 100%;
	text-align: center;

	font-size: 250%;
}



divider {
	display: flex;
	background: var(--grayer-color);
	height: 1px;
	width: 80%;

	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

divider arrow {
	left: 50%;

	position: absolute;

	transform: translateX(-50%);

	border-left: var(--arrow-size) solid transparent;
	border-right: var(--arrow-size) solid transparent;
	border-top: var(--arrow-size) solid var(--grayer-color);
}