:root {
	--width: 900px;
	--clip-slope: calc(100% - 10vw);

	--purple: #8A2BE2;
	--purple-trans: #8A2BE2CC;
	--highlight: #F4A6FF;
	--trans-time: 0.25s;
}

@font-face {
	font-family: "Modules";
	src: url("fonts/modules.ttf");
}

.modules {
	font-family: "Modules"; 
}

html, body {
	margin: 0;
	padding: 0;
}

html {
	background-color: var(--purple);
}

body {
	background-color: white;
}

:is(h1, h2, h3, h4, h5, h6) {
	text-transform: uppercase;
	margin: 0;
	line-height: 1;

	font-family: "Montserrat", sans-serif;
	font-weight: 700;
}

a {
	transition: color var(--trans-time) ease-out, background-color var(--trans-time) ease-out;
}

/* == Header == */

header {
	background: 
		url("img/flies.png") no-repeat scroll right calc(max(0px, (100vw - 1270px) / 2)) top 0 / 30em,
		linear-gradient(var(--purple-trans), var(--purple-trans)),
		url("img/march_1.jpg") no-repeat fixed center bottom / cover;
	background-blend-mode: hard-light, normal, normal;

	color: white;
	padding: 128px 16px;
	clip-path: polygon(0 0, 100% 0, 100% var(--clip-slope), 50% 100%, 0 var(--clip-slope));
}

header a {
	color: white;
	text-decoration: none;
}

header a:hover {
	color: var(--highlight);
}

#big-title {
	display: flex;
	flex-flow: column nowrap;
	margin: 0 auto;
	width: fit-content;
	max-width: 900px;
}

#big-title h1 {
	font-size: 48px;
	font-weight: 900;
}

#big-title h2 {
	font-weight: 600;
}

#big-title h2:last-of-type {
	margin-top: 48px;
	align-self: center;
	font-size: 32px;
	font-weight: 700;
}

#location {
	display: flex;
	flex-flow: row nowrap;
	column-gap: 12px;


	align-self: center;
	margin-top: 8px;
	text-align: right;
}

#location .modules {
	font-size: 32px;
	align-self: center;
}

/* == Main Content == */

main {
	max-width: var(--width);
	margin: 0 auto;
	padding: 0 16px;
}

#demands {
	max-width: 800px;
	margin: 32px auto;
}

#demands > div {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	column-gap: 10px;
}

#demands h2 {
	font-size: 30px;
	font-weight: 800;
	margin: 18px 0;
}

#demands .modules {
	font-size: 30px;
	color: var(--purple);
}

#updates:hover {
	color: var(--highlight);
	border-color: var(--highlight);
}

#blurb {
	font-family: "IBM Plex Sans", sans-serif;
	margin-bottom: 48px;
}

#blurb img {
	float: left;
	margin-right: 16px;
}

#get-involved {
	display: flex;
	flex-flow: row wrap-reverse;
	justify-content: center;
	align-items: center;
	column-gap: 16px;

	margin-bottom: 32px;
}

#updates {
	width: fit-content;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 8px;

	font-size: 22px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;

	color: var(--purple);
	border: 3px solid var(--purple);

	transition: color var(--trans-time) ease-out, border var(--trans-time) ease-out;
}

/* == Logos == */

.logos {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	
	column-gap: calc(min(8vw, 72px));
	row-gap: 8px;

	margin: 48px 0 32px;
}

.logo-wrapper {
	overflow: hidden;
	height: 75px;
	cursor: pointer;
}

.logo-wrapper img {
	height: 100%;
	filter: drop-shadow(0 200px 0 var(--purple));
	transform: translateY(-200px);
	transition: filter var(--trans-time) ease-out;
}

.logo-wrapper:hover img {
	filter: drop-shadow(0 200px 0 var(--highlight));
}

/* == Footer == */

footer {
	background: 
		url("img/fly.png") no-repeat scroll left calc(max(0px, (100vw - 1270px) / 2)) bottom 0 / 10em,
		linear-gradient(var(--purple-trans), var(--purple-trans)),
		url("img/march_1.jpg") no-repeat fixed center / cover;
	background-blend-mode: hard-light, normal, normal;
	color: white;

	padding: 16px 0 200px;
	margin-top: 128px;
}