/*-------------------
---------------------
---CONTENT--- 
---------------------
-------------------*/

.content-container {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: min(5em, 15svh);
	z-index: 1;
}

h1 {
	letter-spacing: 0;
}

@media screen and (max-width: 768px) {
	.content-container {
		margin-top: min(3.75em, 17svh);
	}
}

/*-------------------
---HERO--- 
-------------------*/

.hero-container {
	width: 80%;
	height: 70vmin;
	margin: min(1em, 2.5vmin) auto;
	border-radius: 3vmin;
	box-shadow: 0 0 5vmin 2vmin rgba(0,0,0,0.6);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.6)), url('images/homepage/hero-image.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 768px) {
	.hero-container {
		width: 100%;
		margin: 0 auto min(1em, 2.5vmin);
		border-radius: 0;
	}
}

.hero-title {
	font-size: min(2.5rem, 6.25vmin);
	margin-bottom: min(0.3em, 1.875vmin);
}

.hero-text {
	font-size: min(1rem, 2.5vmin);
	margin: min(0.2em, 0.5vmin);
	padding: 0;
}

/* ---COUNTDOWN--- */

.countdown-container {
	color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	order: -1;
	margin: min(1em, 2.5vmin) 0 min(3em, 7.5vmin);
}

.clock-element-container {
	background-color: rgba(255, 255, 255, 0.6);
	margin: 0 min(0.5em, 1.25vmin);
	height: min(8em, 20vmin);
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: black;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.clock-element {
	font-size: min(3rem, 7.5vmin);
	flex: 1;
	display: flex;
	align-items: center;
	margin-top: min(1.5rem, 3.75vmin);
}

.clock-element-label {
	height: min(2.5rem, 6.25vmin);
	font-size: min(0.6rem, 1.5vmin);
	font-weight: 600;
	letter-spacing: min(0.25rem, 0.625vmin);
	display: flex;
	align-items: center;
}

/*-------------------
 ---POSTS--- 
-------------------*/

.main-container {
	width: 80%;
	margin: min(1em, 2.5vmin) auto;
}

.main-section {
	margin-bottom: min(0.5em, 1.25vmin);
	display: flex;
	flex-direction: column;
}

.main-section-header {
	position: relative;
	z-index: 2;
	margin-bottom: min(0.25em, 1.25vmin);
}

.main-section-part-container {
	display: flex;
	justify-content: space-between;
}

.main-section-part {
	width: 49%;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	border-radius: 3vmin;
	box-shadow: 0 0 5vmin 1.5vmin rgba(0,0,0,0.7);
	margin-bottom: min(1em, 2.5vmin);
	display: flex;
	justify-content: center;
	align-items: end;
}

@media screen and (max-width: 768px) {
	.main-section-part-container {
	flex-direction: column;
	}
	
	.main-section-part {
		width: 100%;
	}
}

.main-section-part-1 {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), url('images/events/summer/2024/100824_1506_01.webp');
}

.main-section-part-2 {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), url('images/homepage/bracket-thumbnail.webp');
}

.main-section-part-3 {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), url('images/homepage/frisbee-thumbnail.webp');
}

.main-section-part-4 {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4)), url('images/homepage/joker-thumbnail.webp');
}

.main-section-part-link {
	font-size: min(1rem, 2.5vmin);
	height: min(2em, 5vmin);
	aspect-ratio: 10 / 2;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	font-family: Segoe UI;
	letter-spacing: 0.1em;
	text-decoration: none;
	border: 0.15em solid white;
	border-radius: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.5em;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 0.2s, color 0.2s;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.main-section-part-link:hover, .main-section-part-link:focus {
	background-color: rgba(255, 255, 255, 1);
	color: black;
}