@import url(///typ.problemas.se/fonter/lib/hk-grotesk/stylesheet.css);

html {
	background: hsl(22 68% 7%) url(../bilder/background-coffee.jpg) no-repeat center;
	background-size: cover;
	font-family: 'HK Grotesk', serif;
}

body {
	padding-block: 1rem;
	display: grid;
	place-items: center;
}

a {
	color: rgb(82, 20, 37);
}

main {
	background: hsl(23 34% 90%  / .7);
	border: 1px solid hsl(23 34% 90%  / .8);
	padding-block: clamp(1rem, 3vw, 4rem);
	width: min(60rem, calc(100% - 2rem));
	border-radius: 2rem;
	background-blend-mode: lighten;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

header {
	display: grid;
	place-items: start;
	margin-inline: clamp(1rem, 3vw, 4rem);
}

header img {
	width: min(30rem, 100%);
	opacity: .7;
	mix-blend-mode: multiply;
}

article {
	margin-inline: clamp(1rem, 3vw, 4rem);
}

article p {
	max-width: 72ch;
}

article img {
	width: min(20rem, 100%);
	float: right;
	clear: right;
	margin-block-end: 1rem;
	margin-inline-start: 1rem;
}

@media (max-width: 768px) {
	article img {
		width: 100%;
		float: none;
		margin-inline: 0;
	}
}

footer {
	display: grid;
	clear: both;
	margin-inline: clamp(1rem, 3vw, 4rem);
	margin-block-start: 2rem;
}