:root {
	--text-color-primary: black;
	--text-color-secondary: #FFF;
	--text-color-accent: #007A53;
	--text-color-accent2: #80A645;
}

@font-face {
	font-family: Acumin;
	src: url(./Fonts/AcuminVariableConcept.woff2);
}

@font-face {
	font-family: Hatton;
	src: url(./Fonts/Hatton-Medium.woff2);
}

@font-face {
	font-family: TradeGothic;
	src: url(./Fonts/TradeGothic-BoldCondTwenty.woff2);
}

body {
	margin: 0;
	font-size: 10pt;
	font-family: sans-serif;
	color: var(--text-color-primary);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #223c36;
}

#fondo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}


@media screen and (max-width: 1000px) {
	body {
		font-size: 12pt;
	}
}

@media screen and (max-width: 668px) {
	body {
		font-size: 10pt;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 8pt;
	}
}


.btnFoto {
	display: inline-block;
	padding: 13px 13px;
	background: #E7E6E6;
	border-radius: 30px;
	cursor: pointer;
	font-size: 1.4em;
	font-family: Acumin;
	width: 100%;
	text-align: center;
}

.text {

	&.Hatton {
		font-family: Hatton;
	}

	&.Acumin {
		font-family: Acumin;
	}

	&.TradeGothic {
		font-family: TradeGothic;
	}

	&.bold {
		font-weight: bold;
	}

	&.secondary {
		color: var(--text-color-secondary);
	}

	&.accent {
		color: var(--text-color-accent);
	}

	&.accent2 {
		color: var(--text-color-accent2);
	}
}

a {
	color: var(--text-color-secondary);
	text-decoration: underline;
}

.logo {
	padding: 15mm 0 12mm 0;
	max-height: 12.5vh;
	text-align: center;
	max-width: 501px;
	margin: auto;
	margin-bottom: 5mm;

	img {
		height: auto;
		width: 300px;
		object-fit: contain;
	}
}


#cuerpoRegistro {
	display: grid;
	flex: 1;
	justify-items: center;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"form"
		"footerCombi";

	.header {
		font-size: 2.4em;
		text-align: center;
	}


	form.form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6.5mm;
		padding: 9mm;
		max-width: 12cm;
		/* width: 100%; */

		.input {
			width: 100%;

			input {
				box-sizing: border-box;
				border: 0;
				border-radius: 100px;
				padding: 13px 13px;
				font-size: 1.4em;
				font-family: Acumin;
				width: 100%;
				background-color: #E7E6E6;
			}

			label {
				box-sizing: border-box;
			}
		}

		.checkbox {
			max-width: 12cm;
			display: flex;
			align-items: flex-start;
			color: var(--text-color-secondary);

			input[type="checkbox"] {
				width: 15px;
				margin: -2px 10px;
			}
		}

		button {
			background-color: black;
			border: 0;
			border-radius: 100px;
			padding: 3mm 8mm;
			color: #FFF;
			text-transform: uppercase;
			font-size: 1.5em;
			font-family: Acumin;
		}
	}

	/* #region Visualizacion normal */

	.form {
		margin-bottom: -100px;
	}

	@media screen and (max-width: 400px) {
		.form {
			margin-bottom: -50px;
		}
	}

	.footer-combi {
		width: 100%;
		max-height: 40vh;
		max-width: 12cm;

		img {
			padding: 5mm;
			max-width: calc(100% - 10mm);
		}
	}

	/* #endregion Visualizacion normal */

	.header {
		grid-area: header;
	}

	.form {
		grid-area: form;
	}

	.footer-combi {
		grid-area: footerCombi;
	}
}

#cuerpoPremio {
	display: grid;
	flex: 1;
	justify-items: center;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"form"
		"footerCombi";

	.header {
		font-size: 2.8em;
		text-align: center;
	}


	#Maillot,
	#Gorra,
	#Bidon {
		display: flex;
		flex-direction: column;

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

		div {
			flex: 1;
		}

		img {
			max-width: 50vw;
			min-width: 25vw;
			padding: 5mm;
		}
	}

	.footer {
		font-size: 1.5em;
		text-align: center;
	}

}

#cuerpoNoPremio {
	display: grid;
	flex: 1;
	justify-items: center;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header"
		"form"
		"footerCombi";

	.header {
		font-size: 2.8em;
		text-align: center;
	}


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

	div {
		flex: 1;
	}

	img {
		/* height: 100%; */
		max-width: 100%;
		max-width: calc(100% - 10mm);
		padding: 5mm;
	}

	.footer {
		font-size: 1.5em;
		text-align: center;
	}

}