/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/*
 * Variables
 */

:root {
	/* Colors & branding */
	--clr-brand-gray: #323230;
	--clr-brand-red: #dd3700;
	--clr-brand-white: #eee;

	--clr-transparent-black: #0006;
	--clr-slightly-transparent-black: #000a;

	/* General stuff */
	--clr-accent: var(--clr-brand-red);
	--clr-accent-light: #ee3b24;
	--clr-shade: var(--clr-slightly-transparent-black);
	--clr-shadow: var(--clr-transparent-black);

	--clr-text: #eee;
	--size-text: 1.25rem;
	--clr-link: var(--clr-accent);
	--clr-link-active: #f65202;

	--clr-button: var(--clr-accent);
	--clr-button-hover: var(--clr-accent-light);
	--clr-button-text: var(--clr-brand-white);
	--clr-button-dark: #464643;
	--clr-button-dark-hover: #4d4d4a;
	--clr-button-coffee: #ffdd00;
	--clr-button-coffee-hover: #ffea00;

	--transition-curve-default: ease-in-out;
	--transition-duration-btn: 100ms;
	--transition-duration-link: 300ms;

	/* Background */
	--clr-bg1: #161613;
	--clr-bg1-25: #1a1a18;
	--clr-bg1-50: #1f1e1a;
	--clr-bg1-75: #252421;
	--clr-bg2: #282824;

	/* Alerts */
	--clr-banner: #d2d2d2;
	--clr-banner-border: #b0b0b0;
	--clr-banner-text: #222;
	--clr-banner-dark: #282824;
	--clr-banner-dark-border: #42423b;
	--clr-banner-dark-text: var(--clr-brand-white);
	--clr-banner-info: #55e1ff;
	--clr-banner-info-border: #00c7f2;
	--clr-banner-info-text: #222;
	--clr-banner-warning: #ffe33b;
	--clr-banner-warning-border: #ecca00;
	--clr-banner-warning-text: #222;

	--pad-block-banner: 0.25rem;
	--pad-inline-banner: 0.75rem;

	/* Menu */
	--clr-menu-text: var(--clr-text);

	--size-menu-btn: 3rem;
	--size-menu-hamburger-spacing: 0.375rem;
	--size-menu-hamburger-width: 1.125rem;
	--size-menu-hamburger-height: 0.125rem;
	--spacing-menu-vertical: 0.5rem;
	--width-menu: 20rem;

	--transition-curve-menu: cubic-bezier(.3, .1, .7, .9);
	--transition-duration-menu: 300ms;

	/* Content */
	--clr-content-bg: #2221;
	--border-content: 0.0625rem solid #222;
	--spacing-content-vertical: 2rem;	
	--width-content:  1250px;
}

/*
 * Global styling
 */

* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100vh;
}

/* Body */
/* TODO: Can the background and noise be combined as multiple background layers? */
body {
	background: linear-gradient(45deg, var(--clr-bg1) 10%, var(--clr-bg1-25) 31.25%, var(--clr-bg1-50) 52.5%, var(--clr-bg1-75) 73.75%, var(--clr-bg2) 95%) fixed;
	background-size: 250%;
	animation: bg-animation 20s infinite alternate;
	height: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	font-family: "Roboto", sans-serif;
	font-size: var(--size-text);
}
@keyframes bg-animation {
	0% {
		background-position: bottom left;
	}
	100% {
		background-position: top right;
	}
}

/* Background effects */
.noise, .noise::after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: -5;
	background: url(../assets/img/noise.svg) repeat;
	mix-blend-mode: multiply;
}
.noise {
	background-position: top left;
	animation: noise-animation 19s infinite alternate;
}
.noise::after {
	content: '';
	background-position: bottom right;
	animation: noise-animation 21s infinite alternate-reverse;
}
@keyframes noise-animation {
	0% {
		background-position: top left;
	}
	100% {
		background-position: bottom right;
	}
}

#particles-js {
	position: fixed;
	inset: 0;
	z-index: -4;
}

/* General styling */
h1, h2, h3, h4, h5, h6 {
	font-family: "Oswald", sans-serif;
	font-variant: small-caps;
	font-weight: 500;
}

p + div,
p + p,
p + section,
section + section,
section + p {
	margin-top: 1em;
}

/* Icons */
a.icon img {
	display: inline-block;
	height: 2.5rem;
	width: 2.5rem;
	filter: grayscale(100%) brightness(1.2);
	transition: filter var(--transition-duration-link) var(--transition-curve-default);
}
a.icon:hover img,
a.icon:focus img {
	filter: none;
}

/* Error pages */
h1.error {
	font-size: 3.5em;
	font-style: italic;
}

/* Links */
a:focus {
	outline: none;
}

/* Buttons */
a.btn {
	box-shadow: 0 0 0.5rem var(--clr-shadow);
	transition-property: background, filter, top, left, box-shadow;
	transition-duration: var(--transition-duration-btn);
	transition-timing-function: var(--transition-curve-default);
	position: relative;
	top: 0;
	left: 0;
}
a.btn:hover,
a.btn:focus {
	top: -0.1rem;
	left: -0.1rem;
	box-shadow: 0.2rem 0.2rem 0.5rem var(--clr-shadow);
}
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active {
	text-decoration: none;
}

a.button {
	display: inline-flex;
	padding: 0.45em 0.7em;
	align-items: center;
	background: var(--clr-button);
	color: var(--clr-button-text);
	border-radius: 0.25rem;
	font-size: 1.15em;
	font-weight: 550;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
}
a.button.dark {
	background: var(--clr-button-dark);
}
a.button:hover {
	background: var(--clr-button-hover);
}
a.button.dark:hover {
	background: var(--clr-button-dark-hover);
}

a.button.coffee {
	padding: 0.75em;
	background: var(--clr-button-coffee);
}
a.button.coffee:hover {
	background: var(--clr-button-coffee-hover);
}
a.button.coffee img {
	height: 1.5em;
}

/* Image buttons */
div.feature-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}
a.btn.img {
	display: flex;
	flex-direction: column;
	width: 10em;
	height: 10em;
	overflow: hidden;
	border: 1px solid var(--clr-brand-red);
	border-radius: 0.5em;
	position: relative;
}
a.btn.img > img {
	object-fit: cover;
	overflow-y: hidden;
	position: relative;
	z-index: 5;
	flex: 1 1 100%;
	filter: grayscale(20%) brightness(80%);
	transition: filter var(--transition-duration-btn) var(--transition-curve-default);
}
a.btn.img:hover > img,
a.btn.img:focus > img {
	filter: none;
}
a.btn.img div {
	background: var(--clr-shade);
	color: var(--clr-brand-white);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	font-size: 0.8em;
	padding: 0.25em 0.5em;
	display: flex;
	gap: 0.5em;
}
a.btn.img div img {
	height: 1.2em;
	align-self: center;
}
a.btn.img div span {
	flex: 1;
	text-align: center;
}

/* Links */
header a:not(.button, .btn, .icon),
header a:not(.button, .btn, .icon):hover,
header a:not(.button, .btn, .icon):focus {
	color: inherit;
}
header a:not(.button, .btn, .icon)::before {
	background: var(--clr-text);
	height: 0.08em;
	bottom: 0.3em;
}

a:not(.button, .btn, .icon) {
	display: inline-block;
	position: relative;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration-link) var(--transition-curve-default);
}
a:not(.button, .btn, .icon):focus,
a:not(.button, .btn, .icon):hover {
	color: var(--clr-link-active);
}
a:not(.button, .btn, .icon)::before {
	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-link) ease-in;
}
a:not(.button, .btn, .icon):hover::before,
a:not(.button, .btn, .icon):focus::before {
	transform: scaleX(1);
	transform-origin: left;
}

/*
 * Layout
 */

/* Alerts */
#alerts {
	position: sticky;
	top: 0;
	z-index: 10;
}
.banner {
	font-size: 1rem;
	font-weight: 500;
	padding: var(--pad-block-banner) var(--pad-inline-banner);
	text-align: center;
	background: var(--clr-banner);
	border-bottom-width: 0.0625rem;
	border-bottom-style: solid;
	border-bottom-color: var(--clr-banner-border);
	color: var(--clr-banner-text);
}
.banner:last-child {
	box-shadow: 0 0.25rem 0.5rem var(--clr-shadow);
	clip-path: inset(0 -0.5rem -0.5rem -0.5rem);
}
.banner.dark {
	background: var(--clr-banner-dark);
	border-bottom-color: var(--clr-banner-dark-border);
	color: var(--clr-banner-dark-text);
}
.banner.info {
	background: var(--clr-banner-info);
	border-bottom-color: var(--clr-banner-info-border);
	color: var(--clr-banner-info-text);
}
.banner.warning {
	background: var(--clr-banner-warning);
	border-bottom-color: var(--clr-banner-warning-border);
	color: var(--clr-banner-warning-text);
}

/* Wrapper */
#wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-content-vertical);
	padding: var(--spacing-content-vertical);
	color: var(--clr-text);
}
@media screen and (max-width: 450px) {
	/* Remove padding for small screens */
	#wrapper {
		padding-inline: 0;
		padding-bottom: 0;
	}
}

/* Header */
header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 2rem;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 4.5em;
}
header img.icon {
	height: 10rem;
}
@media screen and (max-width: 900px) {
	header {
		flex-direction: column;
		font-size: clamp(2em, 11vw, 4.5em);
	}
	header img.icon {
		height: clamp(12rem, 25vw, 14rem);
	}
}

/* Navigation */
menu .toggle,
menu input[type=checkbox] {
	display: none;
}
menu {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--width-content);
}

nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-family: "Oswald", sans-serif;
	font-variant: small-caps;
	gap: var(--spacing-menu-vertical) 2rem;
	font-size: 1.5rem;
	margin-block: calc(-1 * var(--spacing-content-vertical) / 2);
	box-sizing: content-box;
}
nav li {
	list-style: none;
	display: inline-block;
}
nav li.socials {
	display: flex;
	gap: 0.5rem;
}
nav li.socials > * {
	display: inline-block;
}
nav li a {
	white-space: nowrap;
}
nav li:has(ul) > a::after {
	position: relative;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.75em;
	padding-left: 0.2em;
	top: -0.1em;
	content: "\f107"; /* fa-angle-down */
}
nav li:has(ul):hover > a::after,
nav li:has(ul):focus-within > a::after {
	content: "\f106"; /* fa-angle-up */
}
nav li > ul {
	background: var(--clr-brand-gray);
	padding: 1rem;
	display: none;
	gap: 0.5rem;
	flex-direction: column;
	font-size: 0.75em;
}
@media screen and (min-width: 651px) {
	nav li > ul {
		position: absolute;
		z-index: 10;
		border-radius: 0.5rem;
		border: var(--border-content);
		box-shadow: 0 0 2rem var(--clr-shadow-content);
	}
}
nav li:hover > ul,
nav li:focus-within > ul {
	display: flex;
}

/* Mobile navigation */
@media screen and (max-width: 650px) {
	/* Prevent scrolling when menu open */
	body:has(.menu-btn:checked) {
		overflow: hidden;
	}

	/* Make sure menu button doesn't obscure banner content */
	.banner {
		padding-left: calc(var(--pad-inline-banner) + var(--size-menu-btn));
	}

	menu {
		height: 100vh;
		max-width: 100vw;
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
	}
	menu:has(.menu-btn:checked) {
		width: 100vw;
		left: 0;
	}

	menu .toggle {
		width: 0;
		height: var(--size-menu-btn);
		display: flex;
		justify-content: flex-start;
		z-index: 15;
		background: var(--clr-brand-gray);
		transition-property: width;
		transition-duration: var(--transition-duration-menu);
		transition-timing-function: var(--transition-curve-menu);
	}
	menu .toggle:has(.menu-btn:checked) {
		width: var(--width-menu);
	}

	/* Menu icon stuff */
	.menu-icon {
		cursor: pointer;
		display: flex;
		align-items: baseline;
		padding-block: calc((var(--size-menu-btn) - var(--size-menu-hamburger-height)) / 2);
		padding-left: calc((var(--size-menu-btn) - var(--size-menu-hamburger-width)) / 2);
		position: absolute;
		height: var(--size-menu-btn);
		width: var(--size-menu-btn);
		-webkit-user-select: none;
		user-select: none;
		visibility: visible;
		background: var(--clr-brand-gray);
		border-right: var(--border-content);
		border-bottom: var(--border-content);
		border-bottom-right-radius: 0.5em;
	}
	menu .toggle:has(.menu-btn:checked) .menu-icon {
		border: inherit;
	}

	/* Navicon styling */
	.navicon {
		background: var(--clr-text);
		display: block;
		height: var(--size-menu-hamburger-height);
		width: var(--size-menu-hamburger-width);
		position: relative;
	}
	.navicon:before {
		top: var(--size-menu-hamburger-spacing);
	}
	.navicon:after {
		top: calc(-1 * var(--size-menu-hamburger-spacing));
	}
	.navicon:before,
	.navicon:after {
		background: var(--clr-text);
		display: block;
		width: 100%;
		height: 100%;
		content: "";
		position: absolute;
		transition: all 0.2s ease-out;
	}

	.menu-btn:checked ~ .menu-icon .navicon {
		background: transparent;
	}
	.menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}
	.menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}
	.menu-btn:checked ~ .menu-icon .navicon:before,
	.menu-btn:checked ~ .menu-icon .navicon:after {
		top: 0;
	}

	/* Navigation menu */
	menu nav {
		width: var(--width-menu);
		height: 100vh;
		overflow-y: scroll;
		scrollbar-width: none;
		background: var(--clr-brand-gray);
		color: var(--clr-text);
		position: fixed;
		top: 0;
		z-index: 10;
		left: calc(-1 * var(--width-menu));
		transition-property: left;
		transition-duration: var(--transition-duration-menu);
		transition-timing-function: var(--transition-curve-menu);
		padding-top: var(--size-menu-btn);
	}
	menu nav > ul {
		margin: inherit;
		flex-direction: column;
		justify-content: start;
		align-items: stretch;
		gap: 0.5rem;
	}
	menu .toggle:has(.menu-btn:checked) + nav {
		left: 0;
		box-shadow: 0 0 3rem var(--clr-shadow-content);
	}
	menu nav li ul {
		background: #eeeeee18;
	}
	menu nav li > a {
		margin-inline: 1rem;
	}

	/* Content shade */
	menu .shade {
		display: block;
		flex-grow: 1;
		transition-property: background, -webkit-backdrop-filter, backdrop-filter;
		transition-duration: var(--transition-duration-menu);
		transition-timing-function: var(--transition-curve-default);
	}
	menu .toggle:has(.menu-btn:checked) + nav + .shade {
		background: var(--clr-shade);
		-webkit-backdrop-filter: blur(0.2rem);
		backdrop-filter: blur(0.2rem);
	}
}

/* Content */
#content {
	max-width: var(--width-content);
	padding: 2rem 2.5rem;
	background: var(--clr-content-bg);
	-webkit-backdrop-filter: blur(0.25rem);
	backdrop-filter: blur(0.25rem);
	font-weight: 400;
	border-radius: 0.5rem;
	box-shadow: 0 0 1.5rem 0.5rem var(--clr-shadow-content);
	text-align: center;
}
@media screen and (max-width: 450px) {
	/* Remove padding for small screens */
	#content {
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
}