@import 'reset.css';
@import 'fonts.css';

:root {
/*	--accent-color: #008483;*/
	--accent-color: #00807f;
	--accent-color-50: rgba(0, 128, 127, .5);
}

body {
	background: #fbf8f3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: clamp(1.15rem, 1.4vw, 1.4rem);
	padding-block: 4rem;
	text-rendering: optimizeSpeed;
	text-underline-offset: .15rem;
}

.container {
	width: min(100ch, 100vw - 4rem);
}

.content {
	border-block-end: .1rem solid var(--accent-color-50);
	display: grid;
	grid-gap: 2rem;
	padding-block-end: 1.5rem;
	border-image: linear-gradient(to right, transparent 0%, var(--accent-color-50) 50%, transparent 100%) 1;
}


@media screen and (min-width: 1024px) {
	.content {
		grid-template-columns: 1fr 2fr;
	}
}

a {
	transition: all .2s;
}
a, 
a:active, 
a:visited {
	color: var(--accent-color);
}

a:hover {
	color: var(--accent-color-50);
	text-decoration: none;
}

h1 {
  font-size: clamp(2rem, 2.5vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
}

p {
	margin-block-end: 1.5rem;
}

img,
video {
	height: auto;
	max-width: 100%;
}

.hero-photo {
	border-radius: 1rem;
}

.email {
	display: none;
}

@media print {
	body {
		background: white;
		color: black;
		margin: 1cm 0;
		padding: 0;
	}
	a, a:visited {
		color: inherit;
		text-decoration: none;
	}
	abbr {
		text-decoration: none;
	}
	h2, aside {
		display: none;
	}
	.content {
		grid-template-columns: 1fr 2fr;
		border: 0;
		grid-gap: .6cm;
		padding-block-end: 0;
	}
	.email {
		display: inline;
	}
}