@import url("/assets/css/variables.css");

:root {
	--view: 18rem;
}

body {
	font-family: sans-serif;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

main {
	padding: 2rem 2rem 4rem calc(var(--view) + 2rem);
	overflow: hidden;
}

article {
	height: max-content;
	padding: 2rem;

	& p {
		margin: 1rem 0;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* Header */
header {
	margin: 0 var(--view);
}

/* Navigation */
body > nav {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1rem;
	position: fixed;
	top: 0;
	width: var(--view);
	height: 100%;
}

body > nav ul {
	margin: 0;
	padding: 0;
}

nav > details {
	font-size: 1.5rem;
}

body > nav ul li {
	display: inherit;
	flex-direction: row;
}

body > nav a {
	display: flex;
	font-size: 1.125rem;
	font-weight: bold;
	height: 2rem;
	line-height: 2rem;
}

details {
	cursor: pointer;
}

/* Navigation > Icons */
svg {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
}

body > nav li img {
	border-radius: 100%;
}

body > nav a svg,
body > nav li img,
body > nav summary svg {
	margin: 0 8px 0 8px;
	width: 20px;
	height: 20px;
}

body > nav li img,
body > nav a svg {
	align-self: center;
}

body > nav details {
	display: flex;
	align-items: center;
}

body > nav > ul > svg {
	overflow: visible;
	text-anchor: start;
}

/* Images */
img[src*="/assets/img/pkmn/"] {
	height: fit-content;
	image-rendering: pixelated;
}

img[src*="/assets/img/flag/"] {
	height: 32px;
}

ul:has(img, svg):not(article ul) {
	list-style-type: none;
}

article {
	max-width: 75ch;
}

iframe {
	border: 0;
}