body {
	max-width: 900px;
	margin: 40px auto;
	padding: 0 10px;
	
	font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: #444;	
	text-align: justify;
}

h1 {line-height: 1; }
h2, h3 {line-height: 1.2;}

a {
	color: red;
}

header { margin: 0 20px; }

a:hover {
	color: #444;
	background-color: yellow;
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	
}

nav p {
	display: block;
	padding: 10px;
	border: thin dashed #444;
	margin: 0;
	flex-grow: 1;
	text-align: center;
}

nav a {
	display: block;
	padding: 10px;
	border: thin dashed #444;
	margin: 0;
	flex-grow: 1;
	text-align: center;
	color: #444;
	font-weight: bold;
}

nav a:hover {
	background-color: yellow;
	color: #444;
}

nav p:hover {
	background-color: #444;
	color: white;
}


.description {
	border: thin dashed #444;
	padding: 10px;
}

.subtitle {
	line-height: 1;
}

.main {
	display:flex;
	margin: 0 20px;
}

.contact {
	max-width: 12em;
	height: 600px;
	top: 0px;
	position: sticky;
}

.contact img {
	margin-top: 20px;
}

.center-column {
	padding: 0 0 0 30px;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.gallery-pic {
	flex-shrink: 1;
}

.gallery-pic img {
	height:auto;
	max-width: 100%;
}

/*@media (prefers-color-scheme: dark) {
	body {color: #c9d1d9; background: #0d1117}
	a:link {color:#58a6ff}
	a:visited {color: #8e96f0}
}*/

@media (max-width: 500px) {
	header {margin: 0 10px;}
	.main {flex-direction: column; align-items: center; margin: 10px;}
	h1 {text-align: center;}
	.contact {
		max-width: none;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		height: auto;
		position: static;
		
	}
	.contact img { border: 1px solid #444; margin-top: 30px;}
	.contact-text {margin: 0 15px 0 0; text-align: left;}
	.center-column {padding: 0;}
}

@media (max-width: 350px) {
	.contact {flex-direction: column;}
}