:root {
	--color-teal: #3B7168;
	--color-sand: #F4F1E9;
	--color-coal: #0F0E10;
	--color-rose: #E1A7AB;
	
	--text-primary: var(--color-coal);
	--text-primary-inverted: var(--color-sand);
	--text-secondary: var(--text-primary);
	--text-secondary-inverted: rgba((var(--text-secondary), 0.5));
	
	--space-xl: 8.75rem;
	--space-l: 5rem;
	--space-m: 4rem;
	--space-s: 2.5rem;
	--space-xs: 1.5rem;
}

@font-face {
  font-family: "Newsreader";
  src:
	url("https://christowski.de/blog/wp-content/themes/christowski-23/fonts/NewsreaderText-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: "Newsreader";
  src:
	url("https://christowski.de/blog/wp-content/themes/christowski-23/fonts/NewsreaderText-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
}

@font-face {
  font-family: "IBM Plex";
  src:
	url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

body {
	background: #29262C;
	color: var(--text-primary);
	font-family: Newsreader, Georgia, serif;
	line-height: 1.5;
}

#wrapper {
	max-width: 2000px;
	margin: 0 auto;
}
.box-teal {
	background: var(--color-teal);
	color: var(--text-primary-inverted);
}
.box-sand {
	background: var(--color-sand);
	color: var(--text-primary);
}
.box-coal {
	background: var(--color-coal);
	color: var(--text-primary-inverted);
}
.box-rose {
	background: var(--color-rose);
	color: var(--text-primary);
}

.box-teal, .box-coal {
	a, a:active, a:visited {
		color: var(--color-sand);
		text-decoration: none;
		border-bottom: 1px solid rgba(255,255,255,0.4);
		&:hover {
			color: var(--color-sand);
			border-bottom: 1px solid var(--color-sand);
		}
	}
}

.box-l {
	padding: var(--space-l) var(--space-m);
}
.box-m {
	padding: var(--space-m) var(--space-m);
}

.box-l, .box-m {
	@media (max-width: 768px) {
		padding-left: 1rem;
		padding-right: 1rem;
	}
} 

.hero {
	@media (min-width: 1024px) {
		display: flex;
		width: 100%;
		height: auto;
		min-height: 600px;
		align-items: center;
	}
	div {
		display: flex;
		padding: 3rem 1.5rem;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1 0 0;
		align-self: stretch;
		@media (min-width: 768px) {
			padding: 5rem;
		}
	}
}

.coverimg {
	max-width: min(350px, 60vw);
	height: auto;
	aspect-ratio: 52/83;
	border-radius: 0.25rem;
	box-shadow: 
		-0.5rem 1rem 1rem 0 rgba(0, 0, 0, 0.12),
		-1rem 1.5rem 4rem 0 rgba(0, 0, 0, 0.4);
}

h1, h2 {
	font-family: "IBM Plex", Monaco, monospace;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	margin-bottom: 1rem;
}

h2 {
	margin-bottom: 5rem;
}

em {font-style: italic;}

p {
	font-size: 1.125rem;
	margin: 0 auto 0.75rem auto;
	max-width: 660px;
	text-align: center;
	text-wrap: balance;
	@media (min-width: 768px) {
		font-size: 1.25rem;
	}
}

a, a:active, a:visited {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	&:hover {
		color: var(--color-teal);
		border-bottom: 1px solid var(--color-teal);
	}
}

a.button, a.button:active, a.button:visited {
	background: var(--color-coal);
	padding: 0.75rem 1.5rem;
	margin: 2rem auto 2rem;
	font-family: "IBM Plex", Monaco, monospace;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	color: var(--color-sand);
	border-radius: 2rem;
	display: inline-block;
	transition: 150ms ease-out;
	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 0.75rem 1rem rgba(0,0,0,0.1);
	}
}
p.button-disabled {
	opacity: 0.3;
	background: var(--color-coal);
	padding: 0.75rem 1.5rem;
	margin: 2rem auto 0;
	font-family: "IBM Plex", Monaco, monospace;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	color: var(--color-sand);
	border-radius: 2rem;
	display: inline-block;
}

.gallery {
	margin: 0 auto;
	max-width: 1280px;
	display: grid;
	height: auto;
	row-gap: 2.75rem;
	column-gap: 2.75rem;
	align-self: stretch;
	grid-template-rows: repeat(2,minmax(0,1fr));
	grid-template-columns: repeat(3,minmax(0,1fr));
	grid-auto-flow: row;
	@media (max-width: 1024px) {
		row-gap: 2rem;
		column-gap: 2rem;
		grid-template-rows: repeat(3,minmax(0,1fr));
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	@media (max-width: 420px) {
		row-gap: 1rem;
		column-gap: 1rem;
		grid-template-rows: repeat(6,minmax(0,1fr));
		grid-template-columns: repeat(1,minmax(0,1fr));
		padding: 0 1rem;
		} 
	img {
		grid-row: span 1;
		grid-column: span 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

hr {
	border: none;
	border-top: 1px solid rgba(0,0,0,0.2);
	width: 160px;
	margin: 3rem auto;
}