@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');

@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: 'vinque';
	/* --title-font: 'viking';
	 */
	--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;
}

*[hidden]{ 	display: none !important; }

a {
	color: unset;
}

#earlyAccessLink{
	text-decoration: none;
	padding: 25px 20px;
	background-color: var(--red2);
	border-radius: 100px;
	font-size: 30px;
	font-weight: bold;
	margin: 30px 45px;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background: #b90100 url("../img/background.jpg");
	background-size: cover;
	background-position: center;
}

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

.logo {
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

iframe {
	width: 80vw;
	height: 45vw;
}

*::-webkit-media-controls {
	display: none !important;
	-webkit-appearance: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

*::-webkit-media-controls-panel {
	display: none !important;
	-webkit-appearance: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

*::-webkit-media-controls-play-button {
	display: none !important;
	-webkit-appearance: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

*::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

span#e {
	color: #ab0000;
	position: relative;
}

span#e::after,
span#e::before {
	content: "";
	background-color: #ab0000;
	width: 130px;
	height: 3px;
	position: absolute;
	left: -120px;
	top: 50%;
	z-index: -1;
}

span#e::before {
	width: 20px;
	left: -100px;
	z-index: 1;
}

span#a {
	z-index: -2;
	position: relative;
}

.content:has(#top) {
	background: linear-gradient(180deg, black, transparent);
	max-width: unset;
}

#canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	opacity: 0.2;
	filter: grayscale(1);
}
.exposition .event{
	margin-bottom: 10px;
	border: 1px solid black;
	padding: 15px;
	background: rgba(0, 0, 0, 0.5);
}
.event.first{
	margin-top: 20px;
}
.press-link-container{
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-wrap: wrap;
	gap: 30px;
	width: 1280px;
	max-width: 100vw;
}
.press-link{
	width: 400px;
}
.press-link img{
	border: solid #c79722ed 10px;
	-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent);
	width: 100%;
}
.schedule h2{
	margin-bottom: 15px;
	position: sticky;
	top: 0;
	background: black;
	padding: 12px;
	border-radius: 20px;
}
.bg-vid,
#bg-vid, #bg-darker {
	z-index: -1;
	position: absolute;
	opacity: 0.2;
	/* transform-origin: center;
	 transform: rotate(-90deg);
	 */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	background-color: black;
}
#bg-darker{
	opacity: 0.5;
}

*::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;
}
.content.max{	max-width: 100%;}
#campus-map{max-width: 100%;}
.content.interact {
	pointer-events: all;
}

#map-key h3{text-decoration: underline;}
#map-key{
	max-width: 200px;
	margin: auto;
}
.key-item {
	display: flex;
	gap: 10px;
}

h1,
h1 * {
	/* text-shadow: var(--thickest-white);
	 */
	font-family: var(--title-font);
	text-transform: uppercase;
	animation: textShift 20s linear infinite;
	color: white;
	font-size: xxx-large;
}

h1.long-word,
h1 *.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;
}
hr{
	width: 50%;
	align-self: center;
}
button,
#earlyAccessLink {
	cursor: pointer;
	padding: 30px;
	background-color: var(--red);
	border: 2px var(--red) solid;
	color: white;
	transition: background-image 1s;
	border-radius: 50px;
	z-index: 1500;
	position: relative;
}

button:hover,
#earlyAccessLink: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;
}

.miniform {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 50px;
	max-width: 400px;
	gap: 20px;
}

.logo {
	max-width: 100%;
	z-index: -1;
	margin-top: 10%;
	position: relative;
}

.logo-img {
	width: 250px;
	max-width: 100%;
	/* opacity: 0.5;
	 */
	filter: drop-shadow(0px 0px 15px red);
	/* animation: fuzz 20s ease-in-out infinite;
	 */
	animation: glowShift 20s linear infinite;
	/* box-shadow: 0 0 8px 8px black inset;
	 */
}

.exposition {
	line-height: 2rem;
	/* text-shadow: var(--thickest-white);
	 */
	color: white;
}

.email-me,
.email-me * {
	color: white;
	/* text-shadow: var(--thick-white);
	 */
}

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;
}

a.social-link img {
	width: 100%;
}

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

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

.gap-above{margin-top: 50px;}

.sponsorship-section .sponsor-container img {
	width: 100%;
	max-width: 500px;
}

.content img.tpi-logo {
		margin: -10% -50% -25%;
		max-width: 350px;
}

.sponsorship-section .sponsor-container img.tpi-logo {
	margin: -10% -50% -25%;
}

.sponsorship-section .sponsor-container img.ig-logo {
	width: 70%;
	padding: 10px 20% 20%;
}

/* 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 */
}

.menu-icon.active {
	transform: rotate(180deg);
	/* Rotate 180 degrees clockwise */
}

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

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

.exposition.policy 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;
}

ul.boxed{
	width: 200px;
	/* list-style: none; */
	padding: 0;
	margin: auto;
	text-align: left;
}

nav a:hover {
	background: rgba(70, 0, 0, 0.5);
}

#countdown li {
	display: inline-block;
	font-size: 0.8em;
	list-style-type: none;
	padding: 1em;
	text-transform: uppercase;
}

#countdown li span {
	display: block;
	font-size: 3.5rem;
}

#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;
	backdrop-filter: blur(10px);
	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: 1280px) {
	.press-link-container{
		justify-content: center;
	}

}
@media only screen and (max-width: 600px) {
	#canvas {
		display: none;
	}

	#miniform {
		margin: 0;
	}

	#countdown li {
		padding: 0.5em;
	}

	#countdown li span {
		font-size: 2.5rem;
	}
}