/* Main CSS file */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  src: local("Nunito"),
       url("/fonts/Nunito-Medium-Curated.woff2") format("woff2"),
       /* Only serve WOFF if necessary. Otherwise, WOFF 2.0 is fine by itself. */
       url("/fonts/Nunito-Medium-Curated.woff") format("woff");
}

:root {
	font-family: "Nunito", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;

	font-size: 100%;
}

body {
	width: 100%;
	height: 100%;

	background-color: #171717;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg viewBox='0 0 800 450' version='1.1' id='svg2' width='640' height='360' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2'%3E%3Cpattern xlink:href='%23c' id='pattern3' patternTransform='scale(0.25)' x='0' y='0' preserveAspectRatio='xMidYMid' /%3E%3C/defs%3E%3Crect fill='%23000' width='800' height='600' id='rect1' style='fill:%23111111;fill-opacity:1' x='0' y='0' /%3E%3Cpattern id='c' width='800' height='600' patternUnits='userSpaceOnUse' patternTransform='scale(.4)'%3E%3Cg fill='none' stroke='%23222' stroke-width='30' stroke-linecap='round' id='g2'%3E%3Cpath d='M109 57c0 41 20 60 60 60M439 128c40-6 56-28 51-68M523 138c35 21 61 14 82-20M405 294c-23 34-17 61 16 84M445 328c38-15 50-40 36-78M511 347c37-17 47-43 30-80M626 391c26-31 23-59-8-84M581 359c-32 25-35 52-10 84M752 415c3-40-15-61-56-64M252 139c-40 0-60 20-60 60M762 545c-4-40-25-58-66-54M584 562c40 0 60-19 60-60M624 179c-37 18-46 44-28 80M167 247c-30 27-32 54-5 85M425 241c-38-12-63 1-74 40M343 366c-9-40-32-55-72-46M622 445c39 12 64-1 76-40M512 458c15 37 40 49 78 34M111 349c-39 11-53 34-43 74M189 385c4 41 26 58 66 54M 314 442 c0-41-20-60-60-60M90 478c38-13 50-38 36-76M682 281c28 29 56 29 84 0M760 113c-27 29-26 57 4 84M245 255c-36 18-44 45-26 80M275 33c-40-1-60 17-62 58M325 149c0-40-19-60-60-60M714 89c-39 11-53 35-42 74M727 243c-25-32-53-35-84-10M345 197c38-13 50-38 36-76M524 214c-20-36-46-43-82-24M81 225c41 0 60-19 60-60M300 264c5-41-12-62-52-67M162 548c-28-29-55-30-84-2M496 398c-38 13-51 37-38 76M356 543c-8-40-30-55-70-48M242 529c-11-39-35-53-74-42M378 413c-17 37-7 63 30 80M410 552c38 15 63 3 78-34' id='path1' /%3E%3Cpath id='a' d='M5 325c40 8 63-8 70-48M39 478c-33 24-37 51-13 84M-23 459c36-18 45-44 26-80M46 184c-36 18-45 44-28 80M-29 53c25 31 53 34 84 9M90 157c-23-34-50-39-84-16M-17-9c27 30 54 32 84 5M-17 591c27 30 54 32 84 5' /%3E%3Cpath id='b' d='M332-12c-13 39 0 63 38 76M578 13c-35 21-41 48-20 82M473 9c41 0 60-20 60-60M423 78c15-38 4-63-34-78M698 39c31-26 33-54 6-84M664-11c-36 19-44 46-25 82M163 65c11-39-3-63-42-74M208-26c36 19 62 12 82-24' /%3E%3Cuse xlink:href='%23a' x='800' id='use1' /%3E%3Cuse xlink:href='%23b' y='600' id='use2' /%3E%3C/g%3E%3C/pattern%3E%3Crect fill='url(%23c)' width='100%25' height='100%25' id='rect2' style='fill:url(%23pattern3);fill-opacity:1' x='0' y='0' /%3E%3C/svg%3E");
}

.items-center {
	display: flex;
	align-items: center;
}

#main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	min-width: 540px;
	padding: 3rem;
	border-radius: 1.5rem;

	background-color: rgba(100, 100, 100, .2);
	color: #fff;

	backdrop-filter: blur(4px);
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

h1 {
	text-align: center;
	font-size: 4rem;
}

h2 {
	margin-bottom: .5rem;
}

a {
	color: #fff;
	text-decoration: underline;
}

ul {
	margin-top: .5rem;

	padding-left: 1rem;
}

li {
	margin-bottom: .25rem;
}

.row {
	margin: 0 1rem;

	display: flex;
	/* flex-wrap: wrap; */
}

.col {
	flex: 1;
}

.mr {
	margin-right: 1rem;
}

.ml {
	margin-left: 1rem;
}

.px-1 {
	padding: 0 1rem;
}

.banner {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);

	width: 100%;
	max-width: 1200px;

	margin: 0 auto;
	padding: .5rem 0;

	z-index: 1000;

	text-align: center;
	text-wrap: balance;
	color: black;
	background-color: #E8B84F;

	border-bottom: 1px solid black;
	border-radius: 0 0 10px 10px;
}

.banner a {
	color: black;
}

.banner p {
	margin: 0;
}

svg.lucide {
	margin-bottom: -.2rem;
}

@media(max-width: 480px) {
	h1 {
		font-size: 3rem;
	}

	.mr {
		margin-right: 0.1rem;
	}

	.ml {
		margin-left: 0.1rem;
	}

	.px-1 {
		padding: 0 0.25rem;
	}

	#main {
		/* height: 100%; */
		width: 80%;

		padding: 2rem;
	}
}

@media(max-width: 768px) {
	#main {
		min-width: 0;
		max-width: 75%;
	}
}