:root {
	--theme-color: #3e8e7e;
	--darker-color: #333f48;
	--pop-color: #4a7c59;
	--contrast-color: #f2c14e;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
	margin: 0;
	padding: 0;
}

nav {
	position: absolute;
	right: 0;
	padding-top: 50px;
	padding-right: 50px;
	z-index: 2;

	a {
		text-decoration: none;
		color: #fff;
		font-size: 2rem;
		padding-right: 50px;
	}
}



#splash {
	height: 1000px;
	z-index: 1;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		filter: brightness(0.6);
	}

	>div {
		position: absolute;
		top: 400px;
		padding: 50px;
		width: calc(100% - 100px);
		display: flex;
		flex-direction: column;
		justify-content: center;

		* {

			align-self: center;
		}

		h1 {
			font-size: 7rem;
			margin: 0;
			color: var(--darker-color);
			-webkit-text-stroke: 4px #fff;
		}

		h2 {
			font-size: 2rem;
			margin-top: 0;
			color: #fff;

		}
	}
}


.button {
	color: #fff;
	outline: 3px solid #fff;
	background-color: transparent;
	font-size: 1.7rem;
	text-decoration: none;
	padding: 25px;
	width: 350px;
	text-align: center;
}

.button:hover {
	background-color: #0002;
}

.button:active {
	background-color: #0004;
}


#policies {
	min-height: 1000px;
	padding: 50px;
	background-color: var(--theme-color);

	display: flex;
	flex-direction: column;

	> :first-child {
		font-size: 2rem;
		padding-top: 50px;
		padding-left: 100px;

		:first-child {
			color: var(--contrast-color);
			margin: 0;
		}

		:last-child {
			color: #fff;
			margin: 0;
		}
	}

	> :nth-child(2) {
		display: flex;
		flex-flow: row wrap;
		gap: 100px;
		align-self: center;
		padding: 100px 0;

		div {
			width: 400px;

			img {
				border-radius: 50% 50% 0 0;
				object-fit: cover;
				width: 400px;
				height: 300px;
			}

			h3 {
				color: #fff;
				font-size: 1.5rem;
				text-align: center;
			}

			p {
				color: #fff;
				font-size: 1.4rem;
				text-align: center;
			}
		}
	}

	> :last-child {
		align-self: center;
		width: 650px;
	}

}

#about {
	background-color: #f9f5ee;
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 70px 5%;


	>div:first-child {
		display: flex;
		flex-flow: row wrap;
		gap: 50px;
		justify-content: center;

		* * {
			min-width: 500px;
		}

		img {
			max-width: 600px;
			border-radius: 40px;
		}

		>div {
			max-width: 700px;

			h2 {
				color: var(--pop-color);
				font-size: 4.3rem;
				margin: 0;
				display: inline;

				&:first-child {
					color: var(--contrast-color)
				}

			}

			p {
				font-size: 1.6rem;
				color: var(--darker-color);

				a {
					color: var(--darker-color);
				}
			}
		}

	}

	div:last-child {
		display: flex;
		flex-flow: row wrap;
		gap: 70px;
		justify-content: center;

		img {
			flex: 1 0 150px;
			aspect-ratio: 1 / 1;
			object-fit: cover;
			max-width: 300px;
			border-radius: 40px;
		}
	}
}

#community {
	background-color: #e6e9ed;
	display: flex;
	flex-direction: column;
	padding: 80px 5%;

	> :first-child {
		margin-bottom: 100px;

		h2 {
			color: var(--pop-color);
			font-size: 4rem;
			margin: 0;
		}

		p {
			font-size: 1.4rem;
		}
	}

	> :last-child {
		display: flex;
		flex-flow: row wrap;
		gap: 70px;
		justify-content: center;

		div {
			max-width: 230px;
			text-align: center;
			color: var(--darker-color);

			img {
				border-radius: 50%;
				height: 200px;
				width: auto;
				aspect-ratio: 1 / 1;
				object-fit: cover;
			}
		}
	}
}

#why-vote {
	background-color: #f9f5ee;
	padding: 100px 5%;
	display: flex;
	flex-direction: column;
	text-align: center;

	* {
		max-width: 1000px;
		align-self: center;
	}

	h1 {
		color: var(--pop-color);
		font-size: 6em;
		margin-bottom: 0;
	}

	h2 {
		color: var(--darker-color);
		font-size: 1.8rem;
	}

	p {
		color: var(--darker-color);
		white-space: pre-line;
		font-size: 1.5rem;
	}

	.button {
		color: #000;
		outline: 3px solid #000;
		width: 500px;
	}
}

#key-dates {
	position: relative;
	background-color: blue;

	>img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		filter: brightness(0.6);
		z-index: 1;
	}

	>div {
		position: relative;
		top: 0;
		z-index: 2;
		width: 100%;
		height: fit-content;
		padding: 150px 0;

		>div {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-evenly;
			gap: 150px;
			padding-bottom: 50px;

			> :first-child {
				border: 20px solid #eb8331;
				padding: 30px;
				background-color: #fff;
				max-width: 700px;

				h2 {
					color: #eb8331;
					font-size: 3rem;
					text-align: center;
				}

				p {
					color: #000;
					font-size: 1.7rem;
					padding: 20px 10%;
				}
			}

			> :last-child {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				gap: 100px;

				img {
					width: 200px;
					height: auto;
				}
			}
		}

		>p,
		>p a {
			text-align: center;
			color: #fff;
			font-size: 1.5rem;
		}
	}

}

#contact {
	min-height: 900px;
	padding: 50px;
	background-color: var(--theme-color);

	> :first-child {
		padding: 100px 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 50px;

		* {
			align-self: center;
		}

		h1:first-child {
			margin: 0;
			font-size: 7em;
			color: var(--contrast-color);
			font-weight: 700;
		}

		h1:last-child {
			margin: 0;
			font-size: 5.7em;
			color: #fff;
			font-weight: 300;
		}
	}

	> :last-child {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		align-content: center;
		font-size: 2rem;
		min-width: 500px;
		gap: 50px;

		p,
		a {
			margin: 0;
			text-decoration: none;
			color: #fff;
		}

		h3 {
			margin: 0;
			color: #fff;
		}
	}
}


footer {
	background-color: var(--theme-color);
	padding: 5px;

	h4 {
		text-align: center;
		color: #fff;
		font-size: 1.1em;
	}
}