:root {
	--border-gradient: 250deg, rgba(255, 188, 3, 1) 0%, rgba(253, 120, 6, 1) 1%,
		rgba(255, 188, 3, 1) 100%;

	/* --color-water: #1fa0f6; */
	--color-water: #3cc3f2;

	/* --color-fire: #faaf40; */
	--color-fire: #f3a840;

	--mobileWidth: clamp(300px, 92vw, 800px);
	--optimalWidth: clamp(815px, 80vw, 1600px);
	--speedFast: 600ms;
	--speedNormal: 800ms;
}

/* Overwrite */
#submitBtn {
	background: var(--color-water);
}

.elemental-box h2 {
	background: unset;
	border: unset;
	color: unset;
	-webkit-text-fill-color: unset;
}

.how-to .theme-title {
	height: fit-content;
	max-width: 7ch;
	font-weight: bold;
	margin: unset;
	padding: 1rem 0;
}

.new-nav {
	display: flex;
	width: var(--optimalWidth);
	margin: 2rem auto;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
}

.new-nav ul a {
	color: var(--color-water);
}

.new-nav li.selected a {
	color: var(--color-fire);
}

.new-nav ul {
	display: flex;
	list-style: none;
	gap: 2rem;
}

.brand-icon img {
	width: clamp(200px, 20vw, 350px);
}

/* Style 2679 */
.collapsible {
	background: var(--color-water);
}

.collapsible:hover {
	background: var(--color-water);
	filter: brightness(1.2);
}

/* Fonts */

.theme-title {
	--border-gradient: 90deg, rgba(187, 185, 255, 1) 0%,
		rgba(254, 179, 219, 1) 100%;
	font-family: "Open Sans Condensed", sans-serif;
	background: -moz-linear-gradient(var(--border-gradient)) !important;
	background: -webkit-linear-gradient(var(--border-gradient)) !important;
	background: linear-gradient(var(--border-gradient)) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent;
	font-size: 5vw;
	width: fit-content;
	max-width: 10ch;
	text-align: right;
	max-width: min-content;
	text-shadow: unset !important;
}

h2.subtitle {
	color: var(--color-fire);
	font-size: 1.5rem;
}

h2.subtitle.water {
	color: var(--color-water);
}

/* Reuseable */

.relative {
	position: relative;
}

.grid {
	display: grid;
}

.grid.one-one {
	grid-template-columns: 1fr 1fr;
}

.grid.one-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.grid img {
	display: block;
}

.video-container {
	width: 100%;
	/* height: clamp(300px, 50vw, 600px); */
}

.flex-row,
.flex-col {
	display: flex;
}

.flex-end {
	justify-content: flex-end;
}

.flex-col {
	flex-direction: column;
}

.flex-col-divider {
	width: 100%;
	height: 1px;
	background: linear-gradient(var(--border-gradient));
}

.flex-jcc {
	justify-content: center;
}

.gap2 {
	gap: 2rem;
}

.gap-m {
	gap: 5rem;
}

.pad1 {
	padding: 1rem;
}

.elemental-box {
	border-style: solid;
	border-width: 2px;
	border-image: -moz-linear-gradient(var(--border-gradient)) 2;
	border-image: -webkit-linear-gradient(var(--border-gradient)) 2;
	border-image: linear-gradient(var(--border-gradient)) 2;
	padding: 1rem;
	position: relative;
}

.elemental-box::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 1.2rem;
	top: 0;
	left: 0;
	pointer-events: none;
}

.img-container img {
	width: 100%;
	display: block;
}

/* Form */

a.btn-color-1 {
	border: unset;
	border: 1px solid var(--color-fire) !important;
	color: white;
	font-family: inherit;
	font-size: inherit;
	padding: 0.4rem 1rem;
	text-align: center;
}

input,
select,
textarea {
	/* border-image: -moz-linear-gradient(var(--border-gradient)) 1 !important;
	border-image: -webkit-linear-gradient(var(--border-gradient)) 1 !important;
	border-image: linear-gradient(var(--border-gradient)) 1 !important; */

	border-color: var(--color-fire) !important;
}

input[type="dynamic"] {
	background: var(--color-water);
}

/* Footer */
.footer-divider {
	height: 3px;
	width: 80vw;
	background: linear-gradient(var(--border-gradient));
	position: relative;
	left: 50%;
	translate: -50% 0;
}

.footer img {
	width: auto;
	height: 35px;
}

/* Prize */

.medals.elemental-box {
	background: #00000075;
}

.medals.elemental-box .img-container {
	width: clamp(150px, 30%, 200px);
	flex-shrink: 0;
}

.medals.elemental-box .flex-col-divider {
	width: 30%;
	background: var(--color-fire);
}

.water + span {
	color: var(--color-water);
}

p.image {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	font-family: "Gotham";
	font-size: 18px;
	color: #faaf40;
	text-align: center;
}

p.image > img {
	position: absolute;
	width: fit-content;
	top: 0;
	left: 0;
}

/* FAQ */

.faq.elemental-box {
	padding: 2rem;
	background: #00000075;
}

.faq .faq-head {
	color: var(--color-water) !important;
}

.faq-a {
	color: white;
}

@media only screen and (min-width: 1080px) and (max-width: 1610px) {
	:root {
		--optimalWidth: clamp(350px, 96vw, 1440px);
	}

	.new-nav ul {
		gap: 1.5rem;
	}
}

@media only screen and (min-width: 911px) and (max-width: 1610px) {
	.video-container {
		width: 100%;
		height: clamp(300px, 50vw, 600px);
	}
}

@media only screen and (min-width: 350px) and (max-width: 910px) {
	#prize-mobile {
		display: none;
	}

	.grid.one-one {
		grid-template-columns: 1fr;
	}

	.container {
		width: var(--mobileWidth);
	}

	.choice-of-form {
		padding: 0.5rem;
	}

	#school-name {
		width: 100%;
		max-width: unset;
	}

	#tos {
		margin-left: 0.3rem !important;
	}

	.new-nav {
		flex-direction: column;
		width: fit-content;
	}

	.new-nav ul {
		flex-direction: column;
		gap: 0.5rem;
	}

	form.elemental-box {
		border: none;
	}

	.medals .flex-row.gap-m {
		flex-direction: column;
	}

	.aboutcontent > .flex-row {
		flex-direction: column;
	}

	.theme-title {
		max-width: unset !important;
		font-size: 30px;
		text-align: right;
	}

	h2.subtitle {
		text-align: left;
	}

	.grid.one-3 {
		grid-template-columns: 1fr;
	}

	/* Prize */
	p.image {
		text-align: left;
	}
}