@font-face {
  font-family: "Sawton Circular";
  src: url("sawtoncircular-light-webfont.woff2") format("woff2");
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Scilla";
  src: url("scilla-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}


* {
	font-family: 'Sawton Circular', ui-sans-serif, sans-serif;
	font-weight: lighter;
	margin: 0;
	padding: 0;
}

:root {
	--main-color: hsl(217,50%,18%);
	--accent-one: hsl(14,100%,62%);
	--accent-two: hsl(217,100%,72%);
	--accent-three: hsl(44,100%,61%);
	--background-color: hsl(14,20%,97%);
	--shade-one: hsl(14,20%,96%);
	--shade-two: hsl(14,20%,91%);
}

body {
	height: 100dvh;
	width: 100vw;
	overflow-x: clip; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--main-color);
	background-color: var(--background-color);
	font-size: 1.2rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Scilla', ui-serif, serif;
	color: var(--accent-one);
	margin-bottom: .5rem;
}

p {
	margin-bottom: .7rem;
}

a {
	color: var(--accent-two);
}

ul {
	list-style: inside;
	list-style-type: "\2727\2002";
	
	li {
		margin-bottom: .3em;
		padding-left: .3em;
	}
}

header {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	gap: calc(3vw + 1rem);
	margin-bottom: 2rem;
}

.border-image {
	border: .2rem solid var(--accent-three);
	border-top: none;
	border-radius: 0 0 50cqw 50cqw;
	width: 25vw;
	max-width: 10rem;
	height: 60vw;
	max-height: 24rem;
	overflow: hidden;
	position: relative;
	
	img {
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		opacity: .85;
		mix-blend-mode: multiply;
	}
}

.header-content {
	width: 50vw;
	max-width: 36rem;
	
	img {
		margin-bottom: .8rem;
	}
	
	p {
		text-align: justify; 
	}
}

nav ul, .contact-link {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: space-evenly;
	gap: calc(3vw + 1rem);
	list-style: none;
	margin: .7rem 0 1.5rem 0;
	padding: .4rem;
	border-radius: 50cqh;
	border: .1rem solid var(--shade-two);
	background-color: var(--shade-one);
	transition: 1s;
	
	a {
		text-decoration: none;
	}
	
	li {
		margin-bottom: 0;
	}
	
}

nav ul a:hover, .contact-link a:hover {
	color: var(--background-color);
}

nav ul:has(a:hover), .contact-link:has(a:hover) {
	background-color: var(--accent-two);
}

.main-wrap {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	gap: calc(3vw + 1rem);
	margin-bottom: 1.5rem;
}

.main-wrap:nth-child(2n) {
	flex-direction: row-reverse;
}

.main-content {
	width: 50vw;
	max-width: 36rem;
	padding-top: 1rem;
}

.main-image {
	border: .2rem solid var(--accent-three);
	border-radius: 50cqw;
	width: 25vw;
	max-width: 10rem;
	height: 50vw;
	max-height: 20rem;
	overflow: hidden;
	position: sticky;
	top: 1rem;
	
	img {
		height: 100%;
		position: absolute;
		top: 0;
		left: -50%;
		opacity: .85;
		mix-blend-mode: multiply;
	}
}

.services-list {
	display: flex;
	flex-flow: row wrap;
	gap: .3rem;
}

footer {
	color: var(--background-color);
	background-color: var(--main-color);
	width: 100vw;
	padding: .7em 0 .7em 0;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	gap: 1.5em;
	
	p {
		font-size: .8em;
		margin-bottom: 0;
	}
	
}

@media screen and (max-width: 45rem) {
	
	body {
		font-size: 1rem;
	}
	
	header {
		flex-direction: column-reverse;
	}
	
	.border-image {
		border-top: .2rem solid var(--accent-three);
		border-left: none;
		border-radius: 0 50cqw 50cqw 0;
		width: 95vw;
		max-width: 100%;
		height: 20vw;
		min-height: 5rem;
		
		img {
			width: 100%;
			height: initial;
			top: -30%;
		}
	}
	
	.header-content {
		width: 90vw;
		margin: 0 auto 0 auto;
	}
	
	.main-wrap {
		flex-direction: column;
	}
	
	.main-content {
		width: 90vw;
		margin: 0 auto 0 auto;
	}
	
	.main-image {
		border: .2rem solid var(--accent-three);
		border-right: none;
		border-radius: 50cqw 0 0 50cqw;
		width: 95vw;
		max-width: 95vw;
		margin: 0 0 0 5vw;
		height: 20vw;
		min-height: 5rem;
		
		img {
			width: 100%;
			height: initial;
			top: -220%;
			left: 0;
		}
	}
	
	.main-wrap:nth-child(2n) {
		flex-direction: column;
		
		.main-image {
			border-right: .2rem solid var(--accent-three);
			border-left: none;
			border-radius: 0 50cqw 50cqw 0;
			margin: 0 5vw 0 0;
		}
	}

}