@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i");

h1 {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 300;
	line-height: 1.2;
	font-size: 2.5rem;
}

h2 {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.25rem;
}

h3 {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 3rem;
}

p {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.2;
}

@media (min-width: 576px) {
	h1 {
		font-size: 3.5rem;
	}

	h2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 768px) {
	h1 {
		font-size: 4.5rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 3.5rem;
	}
}

.btn {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
}

.hero {
	animation: hero-fade-in 1s ease forwards;
}

.hero-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/Northern-Lights-2.webp");
	background-size: cover;
	background-position: center;
}

.square-image {
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
}

@keyframes hero-fade-in {
	from {
		opacity: 0;
		translate: -20px;
	}

	to {
		opacity: 1;
		translate: 0;
	}
}