:root {
	background-color: white;
	color: black;

	--grid-gap-small: 10px;
	--grid-gap-medium: 20px;
	--grid-gap-large: 30px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body,html {
	margin:0;
	display:flex;
	flex-direction: column;
	height:100%;
	min-height: 100%;
	min-width: 300px;
}
a {
	color:black;
}


header {
	padding-left:var(--grid-gap-small);
	padding-right:var(--grid-gap-small);
	padding-bottom:var(--grid-gap-medium);
	font-family: 'Oswald', sans-serif;
}
	header svg {
		width:100%;
		max-width:580px;
		height:auto;
	}
	nav {
		text-transform: uppercase;
	}
	nav ul, nav li {
		margin:0;
		padding:0;
		list-style: none;
	}
	nav li a {
		display: block;
		text-decoration: none;
	}


main {
	display: flex;
	flex:1;
	padding-left:var(--grid-gap-small);
	padding-right:var(--grid-gap-small);
	padding-bottom:var(--grid-gap-large);
}

	.feature {
		max-width:600px;
		margin:auto;
		text-align: center;
	}
		.feature img {
			margin-bottom:18px;
			max-width:100%;
			width:100%;
			display: block;
			transition: all .2s ease-out;
		}
		.feature h1,
		.feature p {
			font-family: 'Cormorant Garamond', serif;
			font-weight: 400;
			font-size:24px;
			line-height: 140%;
			margin:0;
		}
		.feature a {
			color:#393266;
			text-decoration: none;
			border-bottom:1px dotted #393266;
		}

/* on screens larger than 700 pixels, apply these styles: */
@media only screen and (min-width: 700px) {
	header {
		margin:0 auto;
		width:680px;
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	nav {
		margin-left:8px;
	}
	main {

	}
}

/* on devices that support hover, apply these styles: */
@media (hover: hover) {
    a:hover {
			background:#EEE;
			color:#000;
		}
		.feature img.hover {
			transform: scale(1.01);
			box-shadow: 0px 0px 30px 0px #CCC;
		}
}

/* if the device has a color scheme preference, apply these styles: */
@media (prefers-color-scheme: dark) {
	:root {
		background-color: #222;
		color: white;
	}
	header svg {
		fill:white !important;
	}
	header nav li a,
	main .feature h1,
	main .feature p,
	main .feature a
	{color:#CCC;}
	main .feature a
	{border-color:#CCC;}
	main .feature a:hover
	{color:#000;}

}