@import url('reset.css');

:root {
	--primary: hsl(44, 38%, 42%);
	--p-max-width: 80ch;
	--grid-cols: 2;
}
@media (prefers-color-scheme: light) {
:root {
	--bg: linear-gradient(
		90deg,
		hsla(0, 0%, 100%, 1) 0%,
		hsla(0, 0%, 91%, 1) 100%
	);
	--txt: hsl(0, 0%, 5%);
	--border: hsl(0, 0%, 90%);
	--a: var(--txt);
	--ah: var(--primary);

	--manual-bg: linear-gradient(
		270deg,
		hsla(200, 66%, 28%, 1) 0%,
		hsla(216, 61%, 28%, 1) 100%
	);
	--manual-txt: hsl(0, 0%, 100%);
}
}
@media (prefers-color-scheme: dark) {
:root {
	--bg: linear-gradient(
		90deg,
		hsla(0, 0%, 10%, 1) 0%,
		hsla(0, 0%, 0%, 1) 100%
	);
	--txt: hsl(0, 0%, 95%);
	--border: hsl(0, 0%, 20%);
	--a: var(--txt);
	--ah: var(--primary);

	--manual-bg: linear-gradient(
		270deg,
		hsla(200, 66%, 18%, 1) 0%,
		hsla(216, 61%, 18%, 1) 100%
	);
	--manual-txt: hsl(0, 0%, 100%);
}
header .icon {
	filter: invert(1);
}
}
@media screen and (max-width: 1023px) {
:root {
	--grid-cols: 1;
}
aside {
	display: none !important;
}
}

body {
	color: var(--txt);
	background: var(--bg);
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	font-weight: normal;
	padding: 2rem;
}

header {
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	padding-inline: 1rem;
}
header .title {
	display: flex;
	flex-flow: column;
	flex: 50px 1 1;
}
header .title .main {
	font-size: 1.2em;
	font-weight: 700;
}
header .title .extra {
	font-size: 0.8em;
}
header .icon, 
header .logo
{
	width: 50px;
}

main section {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
	/* flex-flow: column nowrap; */
	gap: 1rem;
}
a.manual {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	color: var(--manual-txt);
	background: var(--manual-bg);
	border-radius: 10px;
	overflow: clip;
	text-decoration: none;
	position: relative;
	isolation: isolate;
}
a.manual:hover::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: white;
	z-index: -1;
	opacity: 0.05;
}
.manual::after {
	content: url('/img/shop-icon.svg');
	width: 4rem;
	position: absolute;
	top: 0.35rem;
	left: 1ch;
	z-index: -2;
	transform: rotate(350deg);
	filter: invert(1);
	opacity: 0.075;
}
.manual .title {
	font-weight: 700;
}
.manual .lang,
.manual .code
{
	font-size: 0.8rem;
}
.manual .lang {
	margin-right: 1ch;
}
.manual .code {
	text-transform: uppercase;
}
.manual picture {
	max-width: 75px;

}
.manual picture img.flag {
	border-radius: 5px;
	overflow: clip;
	aspect-ratio: 16/10;
	object-fit: cover;
}

aside .kraje picture {
	max-width: clamp(400px, 100%, 720px);
	margin-inline: auto;
}

.content {
	margin-left: 1rem;
}

/* mapa jest stylowana w map.html :) */