:root {
	--green: #57c546;
	--green2: #12af86;
	--white: #f7f5f2;
	--blue: #0369ba;
	--yellow: #ffcc33;
	--orange: #ff8237;
	--navy: #140f78;
	--purple: #a3468b;
}

.title-font {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Base */

html, body {
	padding: 0;
	margin: 0;
	font-size: 1.1em;
	line-height: 1.4;
	font-family: "Vend Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	background: var(--blue);
	overflow-x: hidden;
	height: 100%;
	min-height: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	font-style: normal;
	padding: 0;
	margin: 0;
	/* text-transform: uppercase; */
	width: 100%;
}

h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--navy); }

a.get-involved { font-family: "Quicksand", sans-serif;0
	font-size: 1.1em;
	color: var(--orange); text-decoration: none;
	text-transform: uppercase;
}
a.get-involved:hover { color: var(--navy); }

p { margin: 0; padding: 0; }

hr {
	width: 100%;
	border: 1px dashed #0369ba;
}

.button {
	padding: 5px 12px 5px 12px;
	margin: 0px 10px 0px 0px;
	/* display: block; */
	text-transform: uppercase;
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	font-style: normal;
	background: var(--orange);
	color: var(--white);
	border-radius: 20px;
	max-width: fit-content;
	margin-top: 8px;
}
.button:hover {
	background: var(--navy);
	color: var(--white) !important;
}
.blue .button:hover {
	background: var(--green2);
}

/* Styles */

.green {
	background: var(--green);
	color: var(--white);
	a { color: var(--white); }
	a:hover { color: var(--blue); }
}

.green2 {
	background: var(--green2);
	color: var(--white);
	a { color: var(--white); }
	a:hover { color: var(--blue); }
}

.white {
	background: var(--white);
	color: var(--blue);
	h2 { color: var(--navy); }
	h3 { color: var(--navy); }
}

.blue {
	background: var(--blue);
	color: var(--white);
	a { color: var(--white); }
	a:hover { color: var(--yellow); }
}

.yellow {
	color: var(--yellow);
}

.orange {
	color: var(--orange);
}

.navy {
	background: var(--navy);
	color: var(--white);
	a { color: var(--white); }
	a:hover { color: var(--yellow); }
}

.purple {
	background: var(--purple);
	color: var(--white);
}

.purple a { color: var(--white); }
.purple a:hover { color: var(--blue); }

/* Content */

.section {
	width: 100%;
	margin: 0;
}

.content {
	width: 900px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 50px 0 50px 0;
}

@media(max-width:990px) {
	.content {
		width: 90%;
	}
}

/* Title Bar */

.titlebar {
	font-size: 1.5em;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 12px 0 12px 0;

	.title {
		text-transform: uppercase;
		a {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		a img {
			line-height: 50px;
			height: 50px;
			margin-right: 10px;
		}
	}

	.links {
		text-transform: uppercase;
		display: flex;
		align-items: center;
		gap: 30px;
		white-space: nowrap;
	}
}

@media(max-width:700px) {
	.titlebar {
		flex-direction: column;
		.title {
			width: 100%;
			font-size: 8vw;
			text-align: center;
			a {
				flex-direction: column;
			}
			a img {
				height: 100px;
			}
		}
		.links {
			justify-content: center;
		}
	}
}

/* Header / Info */

.header {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	gap: 30px;

	h3 { 
		white-space: nowrap;
	}
	.image {
		grid-column: 1 / 1;
		grid-row: 1 / 3;
		align-self: center;
	}
	.image img { width: 100%; align-self: center; }
}

@media(max-width:700px) {
	.header {
		grid-template-columns: 100%;
		justify-items: center;
		text-align: center;
		.button { margin-left: auto; margin-right: auto; }
		.element { max-width: 300px; }
	}
}

/* About */

.about {
	display: grid;
	grid-template-columns: 0.5fr 0.5fr;
	gap: 50px;
}

.about .element {
	/* align-self: center; */
}

.about img
{
	width: 100%;
	border-radius: 30px;
	/* box-shadow: var(--blue) 16px 16px 0px, var(--purple) -16px -16px 0px; */
	border: 2px solid var(--white);
}

.segments {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media(max-width:800px) {
	.about {
		grid-template-columns: 1fr;
		img { width: 80%; margin-left: 10%; }
	}
}

/* Team */

.team {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;

	.people {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}

	a {
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		transition: transform 0.2s;
		max-width: 200px;
	}
	a img {
		width: 100%;
	}
	a p {
		width: 100%;
		text-align: center;
	}
	a:hover {
		transform: translateY(-20px);
	}
	a:hover img {
		filter: contrast(200%);
	}
}

@media(max-width:900px) {
	.team { flex-wrap: wrap; }
	.team h1 { width: 100%; text-align: center; font-size: 8vw; }
	.team .people {
		flex-wrap: wrap;
	}
	.team .people a {
		min-width: 20vw;
	}
}

/* 1 */

.contact {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 0.7em;
}

.contact .links a {
	max-width: fit-content;
	display: block;
}

/* Submission Page */
.submission {
	padding: 80px;

	.lowpoly { color: var(--green2); font-weight: bold; }
	h4 { color: #addf83; }
	li::marker { color: #addf83; }

	h3 {
		font-size: 1.4em;
		color: var(--green);
		margin-top: 30px;
		margin-bottom: 10px;
		border-bottom: 2px dashed var(--green);
	}

	.buttons {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr;
		gap: 30px;
	}

	.button { 
		width: 80%;
		text-align: center;
		max-width: 100%;
		font-size: 1.5em;
		padding: 10px 20px 10px 20px;
		box-sizing: border-box;
		box-shadow: 0 10px 0 #7c3a70;
		transition: transform 0.1s, box-shadow 0.1s;
		margin: 0 auto;
	}
	.button:hover { 
		background: var(--green);
		box-shadow: 0 0 0 #17836c;
		transform:translateY(10px);
	}

	@media (max-width: 700px) {
		.buttons {
			grid-template-columns: 1fr;
		}
	}
}

/* Sponsors Page */
.sponsors {
	text-align: center;
}

.sponsors.content {
	width: 90%;
}

.sponsors .buttons {
	text-align: center;

	.button { display: inline; }

	@media (max-width: 700px) {
		.button { display: block !important; margin-left: auto; margin-right: auto; }
	}
}

.sponsors-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	margin-top: 50px;
}

.sponsor-list a {
	display: flex;
	flex: content;
}

.sponsors-list img {
	border-radius: 10px;
}

.sponsors-list.sponsor-0 img { height: 350px; }
.sponsors-list.sponsor-1 img { height: 200px; }
.sponsors-list.sponsor-2 img { height: 120px; }
.sponsors-list.sponsor-3 img { height: 90px; }

@media (max-width: 700px) {
	.sponsors-list.sponsor-0 img { height: unset; width: 30vw; }
	.sponsors-list.sponsor-1 img { height: unset; width: 20vw; }
	.sponsors-list.sponsor-2 img { height: unset; width: 12vw; }
	.sponsors-list.sponsor-3 img { height: unset; width: 8vw; }
}

.sponsor-inquiry {
	padding: 80px;

	.button {
		font-size: 1.5em;
		padding: 10px 20px 10px 20px;
		box-sizing: border-box;
		background: var(--green);
		box-shadow: 0 10px 0 #17836c;
		transition: transform 0.1s, box-shadow 0.1s;

	}
	.button:hover { 
		background: var(--purple);
		box-shadow: 0 0 0 #7c3a70;
		transform:translateY(10px);
	}
}

/* Game Exhibitors */

.games {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	gap: 5px;
	text-align: center;
	margin-top: 40px;

	.entry {
		flex-grow: 1;
		width: 30%;
		height: 200px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		border: 2px solid var(--blue);

		.preview {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background-position: center;
			background-size: cover;
			transition: top 0.25s, left 0.25s, right 0.25s, bottom 0.25s;
		}
		.fade {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			background: #000;
			transition: opacity 0.25s;
		}

		.title {
			position: absolute;
			left:50%;
			top:50%;
			max-width: 90%;
			max-height: 90%;
			transform: translateX(-50%) translateY(-30%) scale(80%);
			text-align: center;
			font-weight: bold;
			color: #fff;
			font-size: 1.5em;
			opacity: 0.0;
			text-transform: uppercase;
			filter: drop-shadow(2px 2px 0px #000);
			transition: opacity 0.25s, transform 0.25s, padding 0.2s;
		}
	}	

	.entry:hover .preview {
		left: -2%; top: -2%; right: -2%; bottom: -2%;
	}
	.entry:hover .fade {
		opacity: 0.5;
	}
	.entry:hover .title {
		opacity: 1.0;
		transform: translateX(-50%) translateY(-50%) scale(100%);
	}



	@media (max-width: 700px) {
		.entry {
			width: 45%;
			height: 150px;
		}
	}
}