body {
	font-family: 'Arcon', sans-serif;
	--page-width-padding: 20vw;
	--font-size: 14pt;
}

.header {
	height: auto;
	padding: 5vh var(--page-width-padding);
	background-color: #daf3ff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	--header_font-size: 16pt;
}

.header__logo {
	padding: 0 10%;
}

.header__text {
	font-size: var(--header_font-size);
	align-self: flex-start;
	max-width: 50%;
}

.header__text--right {
	align-self: flex-end;
	text-align: right;
}

.contact {
	padding: 1em var(--page-width-padding);
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

.contact__heading {
	width: 100%;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0.5em;
}

.contact__icon {
	height: 2em;
	width: auto;
	margin: 0 0.5em;
}

.contact__link {
	display: flex;
	align-items: center;
	color: black;
	text-decoration: none;
	margin: 0 1em;
}

.services {
	margin: 0 auto;
	padding: 0 var(--page-width-padding);
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.services__paragraph {
	font-size: var(--font-size);
	text-align: justify;
	width: 100%;
}

.services__heading {
	width: 100%;
	text-align: center;
}

.services__heading--padded {
	padding: 2em 0;
}

.service-block {
	box-sizing: border-box;
	margin: 0.5%;
	padding: 2em;
	border: 5pt solid #daf3ff;
	width: 99%;
	box-shadow: inset 0 0 4pt 4pt #daf3ff;
	border-radius: 5pt;
	display: flex;
	flex-wrap: wrap;

	/* Debugging Styles */
}

.service-block__heading {
	width: 100%;
	margin-bottom: 0;
	text-align: center;
}

.service-block__list {
	width: 100%;
	padding: 0 1em;
	columns: 2;
}

.service-block__list-item {
	padding: 0.5em 1em;
	break-inside: avoid;
}

.footer {
	height: 8em;
	background-color: #3d4756;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@font-face {
    font-family: 'Arcon';
    src: url('/assets/font/Arcon-Regular.woff2') format('woff2'),
        url('/assets/font/Arcon-Regular.woff') format('woff'),
        url('/assets/font/Arcon-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
	letter-spacing: -0.05rem;
}


@media screen and (max-width: 48em) {

	body {
		--page-width-padding: 5vw;
		--font-size: 12pt;
	}
	.header {
		--header_font-size: 16pt;
	}

	.header__logo {
		padding: 0 5%;
	}

	.service-block__list {
	padding: 0 1em;
	columns: 1;
}

}

@media screen and (max-width: 40em) {
	.header {
		--header_font-size: 14pt;
	}
}