/* #region @-rules */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* #endregion */
/* #region elements */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--blue900);
	color: var(--blue700);
	font-family: var(--font-sans);
}

h1, h2 {
	text-wrap: balance;
}

html {
	interpolate-size: allow-keywords;
	scroll-behavior: smooth;
	scroll-padding-top: var(--px128);
	scrollbar-gutter: stable;
}

img {
	display: block;
	max-width: 100%;
}

p {
	font-size: var(--fz18);
	line-height: 1.7;
	margin-bottom: var(--px20);
	text-wrap: pretty;
}

/* #endregion */
/* #region global */
.content {
	margin-inline: auto;
	width: min(80%, var(--content-max-width, 1200px));
}

/* #endregion */
/* #region header */
.header {
	background: linear-gradient(to right, var(--blue900), var(--blue800), var(--blue900));
	padding-block: var(--px24);
	text-align: center;

	img {
		margin-inline: auto;
		width: 300px;
	}
}

/* #endregion */
/* #region footer */
.footer {
	background: linear-gradient(to right, var(--blue900), var(--blue800), var(--blue900));
	color: hsl(from white h s l / .7);
	padding-block: var(--px80) var(--px128);
	text-align: center;

	img {
		margin: 0 auto var(--px16);
		opacity: .9;
		width: 200px;
	}

	p {
		font-size: var(--fz10);
		letter-spacing: var(--px01);
		text-transform: uppercase;

		.copyright {
			font-family: sans-serif;
		}
	}
}

/* #endregion */
/* #region hero */
.hero {
	--content-max-width: 65ch;
	background: linear-gradient(to bottom, hsl(from var(--blue950) h s l / .7), hsl(from var(--blue950) h s l / .7)), url("https://ripcord.sirv.com/CaseyCap/shutterstock_305224904.jpg?ch=1200") center/cover no-repeat;
	color: white;
	padding-block: 15vh;
	text-align: center;

	p {
		animation: 1s fadeIn ease-in both;
		font-size: var(--fz24);
	}
}

/* #endregion */
/* #region home__contact */
.home__contact {
	--content-max-width: 500px;
	background: linear-gradient(to right, var(--blue200), var(--blue050), var(--blue200));
	padding-block: var(--px48);
	text-align: center;

	h2 {
		font-size: var(--fz20);
		letter-spacing: var(--px04);
		margin-bottom: var(--px32);
		text-transform: uppercase;
	}
}

/* #endregion */