:root {
	--ssen-yellow: #fbb800;
	--ssen-aqua: #71d9ca;
	--ssen-blue: #2140c1;
	--ssen-dark-blue: #003e66;

	--primary-text-color: black;
	--primary-text-color: color-mix(in srgb, black 50%, #003e66 50%);
	--dark-bg-color: var(--ssen-dark-blue);
	--light-bg-color: color-mix(in srgb, var(--ssen-yellow), white 90%);

	--accent-red: var(--ssen-aqua);
	--accent-blue: var(--ssen-blue);
	--accent-yellow: var(--ssen-yellow);
}

html {
	background-color: var(--light-bg-color);
	background-image: url('./web-bg.svg');
	background-repeat: no-repeat;
	background-size: cover;
}

body {
	background: linear-gradient(var(--light-bg-color), hsla(45, 89%, 96%, 93%));
}

.sponsors {
	text-align: center;

	img {
		margin-inline: auto;
		max-width: 480px;
	}
}

.title {
	aspect-ratio: 3/2;
	background-color: #fbb800;
	background-image: url('./web-banner-sm.svg');
	background-repeat: no-repeat;
	background-size: cover;
}

.tickets-banner {
	background-color: #feac0b40;
	color: var(--ssen-blue);
}

.ticket-shoutout a {
	display: inline-block;
	text-decoration: none;
	background-color: var(--primary-text-color);
	padding-block: 4px;
	padding-inline: 12px;
	color: var(--primary-text-color-inverted);
	border-radius: 50px;
	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 200ms;
}

.ticket-shoutout a:hover {
	transform: scale(1.2);
}

#event-tagline {
	margin-top: 4rem;
}

section#event-intro {
	margin-top: 0;
	margin-bottom: 4rem;
	text-align: center;
	text-wrap: balance;

	p {
		font-size: var(--fs-large);
	}
}

section#challenges {
	.challenge-grid {
		display: flex;
		flex-direction: row;
		gap: 16px;
		flex-wrap: wrap;
	}

	.challenge-grid > div {
		transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 200ms;

		border-left: 8px solid var(--ssen-blue);
		padding-left: 16px;
		padding-right: 8px;
		padding-block: 16px;
		background-color: color-mix(in srgb, var(--ssen-blue) 15%, #fff 85%);
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;

		h3 {
			margin-bottom: 4px;
			color: var(--ssen-blue);
		}

		&:hover {
			transform: scale(1.05);
		}
	}

	.challenge-grid > div:nth-child(1) {
		--challenge: #1e28b5;
		background-color: color-mix(in srgb, var(--challenge), #fff 87%);
		border-left: 8px solid var(--challenge);
		h3 {
			color: var(--challenge);
		}
	}

	.challenge-grid > div:nth-child(2) {
		--challenge: #227a10;
		background-color: color-mix(in srgb, var(--challenge), #fff 87%);
		border-left: 8px solid var(--challenge);
		h3 {
			color: var(--challenge);
		}
	}

	.challenge-grid > div:nth-child(3) {
		--challenge: #e00a0a;
		background-color: color-mix(in srgb, var(--challenge), #fff 87%);
		border-left: 8px solid var(--challenge);
		h3 {
			color: var(--challenge);
		}
	}

	.challenge-grid > div:nth-child(4) {
		--challenge: #9001b6;
		background-color: color-mix(in srgb, var(--challenge), #fff 87%);
		border-left: 8px solid var(--challenge);
		h3 {
			color: var(--challenge);
		}
	}
}

section {
	& blockquote:hover {
		transform: scale(1.05);
		transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 200ms;
	}

	& blockquote {
		background-color: var(--accent-yellow);
		color: var(--primary-text-color);
		filter: brightness(100%);
	}
}

footer {
	background-color: var(--ssen-yellow);

	& #code-of-conduct {
		color: var(--primary-text-color);

		& a {
			color: var(--primary-text-color);
		}
	}

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

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

	& a:not(.social-icon) {
		color: var(--secondary-text-color);

		&:hover {
			color: black;
		}
	}

	& a.social-icon {
		& img {
			filter: unset;
		}
	}
}

@media (max-width: 520px) {
	.tagline {
		font-size: var(--fs-xlarge);
	}

	html {
		background-color: var(--light-bg-color);
		background-image: url('./web-banner-sm.svg');
	}
}

@media (min-width: 521px) {
	.title {
		aspect-ratio: 5/2;
		background-image: url('./web-banner-md.svg');
	}
}

@media (min-width: 768px) {
	.challenge-grid > div {
		width: calc(50% - 8px);
	}
}

@media (min-width: 1024px) {
	.title {
		aspect-ratio: 4/1;
		background-image: url('./web-banner-lg.svg');
	}
}