:root {
	--font-body: sans-serif;
	--font-size: clamp(16px, 3vw, 20px);

	--bg: white;
	--text: #2C2C2C;

	--sp-edge: clamp(1.25rem, 3vw, 3rem);
}

body {
	background: var(--bg)
	color: var(--text);

	font-family: var(--font-body);
	font-size: var(--font-size);
	line-height: 1.5;

	margin: 0;
	padding-inline: var(--sp-edge);
}

img {
	max-width: 100%;
}


/* Layout */
.container {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-column-gap: 2em;

	margin-inline: auto;
	max-width: 1200px;
	width: 100%;
}

@media screen and (max-width: 600px) {
	.container {
		display: block;
	}
}

/* Sidebar
=============================== */

.sidebar {
	padding-block: 2em 1em;
}
.sidebar ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}
.sidebar li {
}
.sidebar li a {
	color: var(--text);
	text-decoration-color: #aaa;
	text-underline-offset: 3px;
}

.sidebar li.home {
	margin-bottom: 1em;
}
.sidebar li.about {
	margin-top: 1em;
}

.sidebar__avatar {
	border-radius: 100%;
	display: block;
	margin-bottom: 1em;
	width: 60px;
}