@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Gabarito:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Revalia&display=swap');


@font-face {
	font-family: 'vinque';
	src: url('./fonts/vinque/vinque\ rg.otf');
}

:root {
	--orange: #f2a008;
	--thick-white: white -2px -2px 3px,
		white 2px 2px 3px,
		white -2px 2px 3px,
		white 2px -2px 3px;
	--thick-white-tran: rgba(255, 255, 255, 0.25) -2px -2px 3px,
		rgba(255, 255, 255, 0.25) 2px 2px 3px,
		rgba(255, 255, 255, 0.25) -2px 2px 3px,
		rgba(255, 255, 255, 0.25) 2px -2px 3px;
	--thick-black: black -2px -2px 3px,
		black 2px 2px 3px,
		black -2px 2px 3px,
		black 2px -2px 3px;
	--thickest-white: white -3px -3px 5px,
		white 3px 3px 5px,
		white -3px 3px 5px,
		white 3px -3px 5px,
		white -2px -2px 3px,
		white 2px 2px 3px,
		white -2px 2px 3px,
		white 2px -2px 3px;
	--red: #a00;
	--red2: #900;
	--darkred: #700;
	--thickest-red: var(--red2) -3px -3px 5px,
		var(--red2) 3px 3px 5px,
		var(--red2) -3px 3px 5px,
		var(--red2) 3px -3px 5px,
		var(--red2) -2px -2px 3px,
		var(--red2) 2px 2px 3px,
		var(--red2) -2px 2px 3px,
		var(--red2) 2px -2px 3px;

	--title-font: "Revalia", serif;
	--body-font: "Atkinson Hyperlegible", sans-serif;
}

*:not(ol, li) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--body-font);
	scroll-behavior: smooth;
}
ul{
	text-align: left;
}

.background {
	position:		absolute;
	display:		block;
	top: 0;
	left: 0;
	z-index: -1;
	/* height: unset !important; */
}
section{
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	&:nth-child(1){
		h1{
			font-size: 12vw;
		}
		.subtitle-container{
			display: flex;
			/* flex-direction: row; */
			justify-content: space-around;
			flex-wrap: wrap;
			h2{
				min-width: 60px;
			}
		}
	}
}

a {
	color: unset;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background: rgb(135,18,140);
	background: linear-gradient(47deg, rgba(135,18,140,1) 0%, #770e79 23%, rgba(88,7,83,1) 45%, rgba(48,11,103,1) 82%, rgba(1,15,128,1) 100%);
}

*::selection {
	color: var(--red);
	background-color: black;
}

*::placeholder {
	font-family: var(--body-font);
	text-align: center;
}

.content {
	font-family: var(--body-font);
	font-weight: 400;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	align-items: center;
	flex-direction: column;
	z-index: 1;
	max-width: 600px;
	padding: 10px;
	margin: auto;
	flex: 1 0 auto;
	gap: 15px;
	color: white;
}

.left{
	text-align: left;
}

h1,
h1 * {
	/* text-shadow: var(--thickest-white); */
	font-family: var(--title-font);

	animation: textShift 20s linear infinite;
	color: white;
	font-size: xxx-large;

	&.long-word {
		font-size: xx-large;
	}
}

h2,
h2 *,
h3,
h3 * {
	color: white;
	font-family: var(--body-font);
}

h1 {
	font-weight: 300;
}

#top {
	padding: 50px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

a.no-deco {
	text-decoration: none;
}

input[type=checkbox] {
	vertical-align: middle;
}

#checkboxLabel {
	display: none;
}

input[type=email] {
	padding: 10px;
}

label {
	cursor: pointer;
	user-select: none;
	color: white;
}

button {
	cursor: pointer;
	padding: 30px;
	background-color: var(--red);
	border: 2px var(--red) solid;
	color: white;
	font-size: 1.1em;
	transition: background-image 1s;
	border-radius: 50px;
	z-index: 1500;
	position: relative;
}

button:hover {
	/* background-color: #ffa012; */
	/* border-radius: 20px;	 */
	border: 2px white solid;
	color: white;
	text-shadow: var(--thick-black);
}

b {
	font-size: large;
}

*[disabled] {
	opacity: 0.5;
	pointer-events: none;
	cursor: none;
	display: none !important;
}

.material-symbols-outlined {
	vertical-align: text-bottom;
}


footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.socials-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 50px;
	padding: 30px;
}

a.social-link {
	width: 50px;
	display: block;

	img {
		width: 100%;
	}
}

.sponsorship-section {
	display: flex;
	flex-direction: column;
	color: white;
	justify-content: center;
	align-items: center;

	.sponsor-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		img {
			width: 100%;
			max-width: 500px;

			&:nth-child(2) {
				width: 70%;
				padding: 20%;
				padding-top: 10px;
			}
		}
	}
}

/* Hamburger Icon */
.menu-icon {
	position: fixed;
	top: 5px;
	left: 5px;
	cursor: pointer;
	z-index: 101;
	font-size: 24px;
	color: white;
	transform: rotate(0deg);
	background: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 50%;
	transition: transform 0.3s ease-in-out;

	/* Smooth spin animation */
	&.active {
		transform: rotate(180deg);
		/* Rotate 180 degrees clockwise */
	}
}

/* Hidden Navigation */
nav.hidden {
	display: none;
}

.exposition.policy {
	ol {
		text-align: left;
		padding-inline-start: 20px;
	}

	h2 {
		text-align: center;
		font-family: var(--title-font);
		font-size: xx-large;
		margin-top: 1em;
	}
}

nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	background-color: rgba(0, 0, 0, 0.8);
	height: 100vh;
	text-align: center;
	z-index: 99;
}

nav ul {
	list-style: none;
	padding: 0;
	margin-top: 20px;
	width: 100%;
}

nav a {
	color: white;
	text-decoration: none;
	font-size: 18px;
	padding: 20px;
	display: block;
	max-height: 8vh;

	&:hover {
		background: rgba(51, 0, 70, 0.5);
	}
}

#mobile-nav {
	position: fixed;
	/* Fix it to the viewport */
	top: 0;
	left: -250px;
	/* Start off-screen */
	height: 100%;
	width: 250px;
	/* Width of the sliding menu */
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease-in-out;
	/* Smooth sliding effect */
	transform: translateX(0);
	/* Will be toggled */
}

/* When the menu is visible */
#mobile-nav.active {
	transform: translateX(250px);
	/* Slide into view */
}



@keyframes glowShift {
	0% {
		filter: drop-shadow(0px 0px 15px white);
	}

	90% {
		filter: drop-shadow(0px 0px 15px white);
	}

	95% {
		filter: drop-shadow(0px 0px 15px red);
	}

	100% {
		filter: drop-shadow(0px 0px 15px white);
	}
}


@keyframes fuzz {
	0% {
		filter: blur(9px);
		opacity: 0.125;
	}

	25% {
		filter: blur(3px);
		opacity: 0.2;
	}

	50% {
		filter: blur(9px);
		opacity: 0.125;
	}

	75% {
		filter: blur(15px);
		opacity: 0.05;
	}

	100% {
		filter: blur(9px);
		opacity: 0.125;
	}
}

@media only screen and (max-width: 600px) {
	#canvas {
		display: none;
	}
	.splash-container{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
	}
	.subtitle-container{
		flex-direction: column;
	}
}