@import url('https://fonts.googleapis.com/css?family=Oswald: 400,500,700');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,200;0,400;1,200;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

:root {
	/*
	 * Main stuff
	 */

	/* General colors */
	--clr-bg1: #600034;
	--clr-bg2: #600060;
	--clr-bg1-alt: #acc900;
	--clr-bg2-alt: #8ac900;
	--clr-bg2-text: #333;
	--clr-gray: #3e3f46;
	--clr-accent: #9bc900;

	/* Layout & spacing */
	--content-width:  1200px;

	/* Alerts */
	--clr-alert-text: #675800;
	--clr-alert: #ffee89;

	/* Text stuff */
	--clr-text: #eee;
	--clr-nav-link: #aaa;
	--clr-nav-link-active: #333;
	--clr-link: var(--clr-accent);
	--clr-link-active: var(--clr-accent);
	--clr-wedge-text: #222;
	--clr-wedge-link: #666;
	--clr-wedge-link-active: var(--clr-bg1);
	--clr-footer-text: #666;
	--text-size:  1.25rem;
	--nav-text-size: min(1rem, calc((100vw - 2rem) / 20.75));
	--email-text-size: 2rem;
	--intro-text-size: 4rem;
	--intro-tagline-text-size: 1.125rem;
	--footer-text-size: 1rem;

	/*
	 * Effects & features
	 */

	/* Animations */
	--transition-duration: 300ms;
	/* Bezier curve to give subtle realistic bounce effect */
	--transition-curve-default: ease-in-out;
	--transition-curve: cubic-bezier(.18, .89, .32, 1.18);

	/* Shadow */
	--clr-shadow: rgb(0 0 0 / 0.6);
	--shadow-spread: 40px;

	/* Loading dots */
	--loading-dot-initial: 9999px;
	--loading-dot-size: 0.625rem;
	--loading-dot-pos1: calc(var(--loading-dot-initial) - 0.8 * var(--loading-dot-size));
	--loading-dot-pos2: calc(var(--loading-dot-initial) + 0.8 * var(--loading-dot-size));

	/* Wedges */
	--clr-wedge: #eee;
	--wedge-angle:  2deg;
	/* Set wedge height to prevent gaps */
	--wedge-height: 3.493vw; /* Computed with width * sin(angle) / sin(90 - angle) */
	/* Prevent wedge margin from getting too extreme with computed vw */
	--wedge-margin: clamp(2.6rem, 2.6rem, var(--wedge-height)); /* 2.6 computed via content width & wedge height */
	--wedge-text-size: 1.375rem;

	/* Squares */
	--clr-squares: rgb(255 255 255 / 0.3);
	--square-max-size: 7vw;
	--square-min-blur: 0.08vw;
	--square-blur-multiplier:  0.017;
}

/*
 * CSS Reset
 */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Global styles
 */

* {
	margin: 0;
	padding: 0;
}

body {
	background: linear-gradient(45deg, var(--clr-bg1) 10%, var(--clr-bg2) 95%) fixed;
	background-size: 250%;
	color: var(--clr-text);
	font-family: "Roboto", sans-serif;;
	font-size: var(--text-size);
	animation: bg-animation 20s infinite alternate;
	height: 100%;
	overflow-x: hidden;
}

@keyframes bg-animation {
	0% {
		background-position: bottom left;
	}
	100% {
		background-position: top right;
	}
}

/*
 * Temporary stuff
 */

#construction {
	width: 100%;
	padding: 0.3em 0.7em;
	text-align: center;
	color: var(--clr-alert-text);
	font-size: 1rem;
	background: var(--clr-alert);
	border-bottom: 1px solid var(--clr-alert-text);
	box-shadow: 0 0 0.25em var(--clr-shadow);
}

/*
 * Layout & general styling
 */

h1,
h2 {
	font-family: "Oswald", sans-serif;
	font-variant: small-caps;
	font-weight: 500;
	line-height: 1em;
	margin-bottom: 0.25em;
}

h1 {
	font-size: 3rem;
}

p {
	line-height: 1.4em;
}
p + p {
	margin-top: 1em;
}

a,
.link-placeholder {
	display: inline-block;
	position: relative;
	padding-bottom: 0.3em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration) var(--transition-curve-default);
}
a:focus,
a:hover {
	color: var(--clr-link-active);
}
a:focus {
	outline: none;
}
a::after,
.link-placeholder::after {
	content: '';
	position: absolute;
	bottom: 0.15em;
	left: 0;
	width: 100%;
	height: 0.1em;
	background: var(--clr-link-active);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition-duration) ease-in;
}
a:hover::after,
a:focus::after {
	transform: scaleX(1);
	transform-origin: left;
}

img {
	display: inline-block;
	max-width: unset;
}

/*
 * Core layout
 */

#wrapper {
	max-width: var(--content-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	padding-inline: clamp(1rem, 8vw, 2rem);
	color: var(--clr-text);
	font-weight: 400;
}

#wrapper > *:not(.square):not(.green):not(.wedge) {
	z-index: 3;
}

/*
 * Navigation
 */

nav {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	font-family: 'Oswald', sans-serif;
	font-size: var(--nav-text-size);
	box-sizing: content-box;
	padding: clamp(2rem, 10vh, 4rem) 0;
}
nav ul {
	position: relative;
	transform: skewY(-15deg);
	left: calc(1.25 * var(--nav-text-size));
	top: var(--nav-text-size);
}
nav li,
nav li::before,
nav li::after {
	background: var(--clr-gray);
	transition: background var(--transition-duration) var(--transition-curve-default),
	            color var(--transition-duration) var(--transition-curve-default),
	            transform var(--transition-duration) var(--transition-curve);
}
nav li {
	position: relative;
	list-style: none;
	width: calc(12.5 * var(--nav-text-size));
	z-index: var(--i);
}
nav li::before,
nav li::after {
	content: '';
	position: absolute;
}
nav li::before {
	filter: brightness(70%);
}
nav li::after {
	filter: brightness(85%);
}

nav li:hover,
nav li:focus-within,
nav li:hover::before,
nav li:focus-within::before,
nav li:hover::after,
nav li:focus-within::after {
	background: var(--clr-accent);
}
nav li:hover,
nav li:focus-within {
	transform: translateX(calc(-3.125 * var(--nav-text-size)));
}
nav li::before {
	top:  0;
	left: calc(-2.5 * var(--nav-text-size));
	width: calc(2.5 * var(--nav-text-size));
	height: 100%;
	transform-origin: right;
	transform: skewY(45deg);
}
nav li::after {
	top: calc(-2.5 * var(--nav-text-size));
	left: 0;
	width: 100%;
	height: calc(2.5 * var(--nav-text-size));
	transform-origin: bottom;
	transform: skewX(45deg);
}
nav li a {
	text-decoration: none;
	color: var(--clr-nav-link);
	display: block;
	padding: var(--nav-text-size);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
nav li a::after {
	/* Override global underline link styling */
	display: none;
}
nav li:hover a,
nav li:focus-within a {
	color: var(--clr-nav-link-active);
}

nav li:last-child::after {
	box-shadow: calc(-7.5 * var(--nav-text-size)) calc(7.5 * var(--nav-text-size)) calc(1.125 * var(--nav-text-size)) rgb(0 0 0 / 0.25);
}

/*
 * Features
 */

/* Header & featured content */
header {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 2em;
	padding-top: 2em;
	z-index: 5;
}
#logo {
	flex-grow: 1;
	font-family: 'JetBrains Mono', monospace;
	font-size: min(126px, 21vw);
	font-weight: 200;
	font-style: italic;
	letter-spacing: -0.1em;
	color: var(--clr-text);
	text-align: center;
	margin-left: -15px;
}
#logo img {
	width: min(36vw, 216px);
	vertical-align: middle;
}

.intro {
	padding: 6em 0;
	margin-inline: auto;
	display: inline-block;
}
.intro h1 {
	font-size: min(var(--intro-text-size), 14vw);
	line-height: calc(min(var(--intro-text-size), 14vw) * 1.2);
	font-family: "Poppins";
	font-weight: 300;
	font-variant: normal;
	text-align: center;
}
.intro h1 span {
	white-space: nowrap;
}
.intro h1 .em {
	font-weight: 600;
}
.intro .tagline {
	font-style: italic;
	font-size: var(--intro-tagline-text-size);
	margin-top: 0.75em;
}

.handwriting {
	font-family: "Indie Flower";
	text-decoration: underline;
}

/* Wedges & footer */
footer {
	font-size: var(--footer-text-size);
	text-align: center;
	background: var(--clr-wedge);
	color: var(--clr-footer-text);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin: var(--wedge-height) -50vw 0;
	padding: 0 max(2em, calc((100vw - var(--content-width)) / 2 + 2em)) 2em;
}
footer::before {
	content: '';
	display: block;
	position: relative;
	background: inherit;
	margin-inline: calc(-1 * max(2em, ((100vw - var(--content-width)) / 2 + 2em)));
	height: var(--wedge-height);
	z-index: -1;
	box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
	clip-path: inset(calc(-1 * var(--shadow-spread)) 0 0 0);
}
footer.left::before {
	transform-origin: bottom right;
	transform: skewY(var(--wedge-angle));
}
footer.right::before {
	transform-origin: bottom left;
	transform: skewY(calc(-1 * var(--wedge-angle)));
}
footer .links {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	list-style: none;
	column-gap: 1.5em;
	justify-content: center;
	margin-bottom: 0.5em;
}

footer .copyright {
	color: #666;
}

.wedge a,
footer a {
	color: var(--clr-wedge-link);
}
.wedge a:focus,
.wedge a:hover,
footer a:focus,
footer a:hover {
	color: var(--clr-wedge-link-active);
}
.wedge a::after,
footer a::after {
	background: var(--clr-wedge-link-active);
}

.wedge {
	background: var(--clr-wedge);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin: var(--wedge-margin) -50vw;
	padding: calc(var(--wedge-height) + 1em) max(2em, calc((100vw - var(--content-width)) / 2 + 2em));
	font-size: var(--wedge-text-size);
	color: var(--clr-wedge-text);
	box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
	z-index: 5;
}
.wedge.left {
	transform: skew(var(--wedge-angle)) rotate(var(--wedge-angle));
}
.wedge.left .content {
	transform: rotate(calc(-1 * var(--wedge-angle))) skew(calc(-1 * var(--wedge-angle)));
}
.wedge.right {
	text-align: right;
	transform: skew(calc(-1 * var(--wedge-angle))) rotate(calc(-1 * var(--wedge-angle)));
}
.wedge.right .content {
	transform: rotate(var(--wedge-angle)) skew(var(--wedge-angle));
}

/* Green sections */
.green {
	background: linear-gradient(45deg, var(--clr-bg1-alt) 10%, var(--clr-bg2-alt) 95%) fixed;
	background-size: 250%;
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin: calc(-1 * (var(--wedge-height) + 2em)) -50vw;
	/*padding-top: calc(var(--wedge-height) + 2em);
	padding-bottom: calc(var(--wedge-height) + 2em);
	padding-inline: max(2em, calc((100vw - var(--content-width)) / 2 + 2em));*/
	color: var(--clr-bg2-text);
	animation: bg-animation 20s infinite alternate;
}
.green .content {
	position: relative;
	padding-top: calc(var(--wedge-height) + 2em);
	padding-bottom: calc(var(--wedge-height) + 2em);
	padding-inline: max(2em, calc((100vw - var(--content-width)) / 2 + 2em));
	z-index: 5;
}

/* Platform & icon promos */
ul.platforms {
	list-style: none;
	display: flex;
	column-gap: 2.5em;
	flex-wrap: wrap;
}
ul.platforms li {
	vertical-align: middle;
	white-space: nowrap;
}

ul.platforms img {
	width: 2em;
	height: 2em;
	fill: var(--clr-wedge-text);
	vertical-align: middle;
}

a.icon::after {
	bottom: -0.1em;
}

/* Contact info */
#email {
	display: block;
	margin-top: 0.5em;
	font-size: var(--email-text-size);
	font-size: 2rem;
}

/*
 * UI enhancements
 */

div.square {
	--del: 0s;
	--dur: 20s;
	--square-blur-value: calc((var(--square-max-size) - var(--s)) * var(--square-blur-multiplier) + var(--square-min-blur));


	position: fixed;
	width: var(--s);
	height: var(--s);
	bottom: calc(-1 * var(--s));
	left: var(--l);
	background: var(--clr-squares);
	filter: blur(calc(var(--square-blur-value)));
	animation: var(--dur) linear var(--del) infinite float-square;
	z-index: 2;
}

@keyframes float-square {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 50%;
	}
	100% {
		transform: translateY(calc(-100vh - var(--s))) rotate(360deg);
		opacity: 0;
		border-radius: 0;
	}
}

.loading-dots {
	position: relative;
	top: calc(0.8 * var(--loading-dot-size));
	left: calc(-1 * var(--loading-dot-initial));
	width: var(--loading-dot-size);
	height: var(--loading-dot-size);
	border-radius: 50%;
	background-color: var(--clr-accent);
	color: var(--clr-accent);
	box-shadow: var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent);
	animation: loadingdots 4s infinite ease;
}

@keyframes loadingdots {
	0% {
		box-shadow: var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent);
	}
	8.333% {
		box-shadow: var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent);
	}
	16.667% {
		box-shadow: var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent);
	}
	25% {
		box-shadow: var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent);
	}
	33.333% {
		box-shadow: var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent);
	}
	41.667% {
		box-shadow: var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent);
	}
	50% {
		box-shadow: var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	58.333% {
		box-shadow: var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	66.666% {
		box-shadow: var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	75% {
		box-shadow: var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	83.333% {
		box-shadow: var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	91.667% {
		box-shadow: var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent);
	}
	100% {
		box-shadow: var(--loading-dot-pos1) calc(-1.6 * var(--loading-dot-size)) 0 0 var(--clr-accent), var(--loading-dot-pos1) 0 0 0 var(--clr-accent), var(--loading-dot-pos2) 0 0 0 var(--clr-accent);
	}
}

/*
 * Responsive design stuff
 */

@media screen and (min-width: 900px) {
	header {
		flex-direction: row-reverse;
		margin-top: 0;
	}

	nav {
		width: calc(25 * var(--nav-text-size));
	}
}