:root {
	--content-padding: 1rem;
	--max-width: 1000px;
	--dark-fg: #333;
}
* {
	margin: 0;
}
* + * {
	margin-top: var(--content-padding);
}
html {
	font-family: gill sans, monospace;
	display: grid;
	max-width: 100dvw;
	box-sizing: border-box;
	color: var(--dark-fg);
	padding: var(--content-padding);
	grid-template-column: auto minmax(auto, var(--max-width)) auto;
	grid-template-areas: ". content .";
}
a{
	color:yellow;
}
body {
	display: flex;
	flex-direction: column;
	background-image: url("img/deep_sea.jpg");
	color: white;
	padding: var(--content-padding);
	margin: 0;
	grid-area: content;
	gap: var(--content-padding);
}
.blue{
	color:blue;
	text-shadow:0;
}
.HEADER, .GALLERY, .ABOUT{
		text-shadow: 2px 2px navy;
}
.HEADER {
	white-space: nowrap;
}
.HEADER .HEADER--name {
	text-transform: lowercase;
}
.GALLERY .GALLERY--img-list {
	display: grid;
	grid-template-columns: auto auto auto;
	padding: 10px;
	list-style: none;
}	
.GALLERY .GALLERY--img-list > *{
	margin-top:0;
}
.GALLERY .GALLERY--img-list img {
	border: 5px solid var(--dark-fg);
	border-color: yellow;
	width: 400px;
}
.Media {
	display: column;
	background-image: url("img/IMG_8809_2.jpg");
	grid-template-columns: auto auto auto;
	gap: var(--content-padding);
	place-items: center start;
}
.Media p{
	padding:0 1rem;
}