/* css reset */
*, *::before, *::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
#root, #__next {
  isolation: isolate;
}
/* end reset */

body {
	font-family: "Garamond", "serif";
	font-size: x-large;
	line-height:  1.5;
	color: #322a28;
	background-color: #123524;
}

.content {
	background-color: #f1ecd0;
	color: #322a28;
}

section {
	max-width: 39rem;
	padding: 1rem;
	margin: auto;
}

.banner {
	background-color: #123524;
	color: #b3f8c3;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	background-blend-mode: soft-light;
	border-bottom: 2px solid #322a28;
}

header {
	max-width: 42rem;
	padding: 2rem 1rem;
	margin: auto;
}

header h1, header a, header a:visited {
	color: #b3f8c3;
}

header h2 {
	font-size: 32pt;
}

header h1 {
	font-size: 60pt;
	display: flex;
	flex-direction:column; 
}

.lastname {
	align-self: flex-end;
}

h2 {
	font-style: italic;
}

a, a:visited {
	/* color: #6495ed; */
	color: #4881ea;
}

footer {
	display: flex;
	justify-content: center;
}

.links {
	display: flex;
	justify-content: flex-end;
	gap: 1ch;
}

p {
	margin-bottom: 2rem;
}