*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--hue: 52;
	--accent-color: hsl(var(--hue), 100%, 10%);
	--link-transition: 250ms 30ms cubic-bezier(0.2, 1, 0.2, 1);
}

html {
	font-size: 24px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 10vh 6vw;
	background-color: hsl(var(--hue), 40%, 98%);
	color: hsl(var(--hue), 80%, 10%);
	font-family:
		"SF Pro Display", ui-sans-serif, system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
	font-size: 0.75rem;
	font-weight: 400;
	overflow-x: hidden;
}

::selection {
	background-color: hsl(var(--hue), 75%, 92%);
}

.accent {
	color: var(--accent-color);
}

section {
	max-width: 16rem;
	margin: 0 auto;
}

.avatar {
	margin-top: 1rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
}

h1 {
	margin: 1.5rem 0 0.4rem;
	color: hsl(var(--hue), 10%, 35%);
	font-size: 0.5rem;
	font-weight: 800;
	letter-spacing: -0.016rem;
	text-transform: uppercase;
}

h2 {
	margin: 1.5rem 0 1rem;
	color: var(--accent-color);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.016rem;
	line-height: 1.3;
}

h3 {
	color: hsl(var(--hue), 15%, 35%);
	font-size: 0.55rem;
	font-weight: 800;
	letter-spacing: -0.016rem;
	text-transform: uppercase;
}

a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	position: relative;
	outline: none;
	transition: color var(--link-transition);
}
a::before {
	content: "";
	display: block;
	height: 0.5rem;
	position: absolute;
	top: 50%;
	right: -0.15rem;
	left: -0.1rem;
	z-index: -1;
	background-color: hsl(var(--hue), 75%, 88%);
	transform: translateY(0%) rotateZ(-3deg);
	transition:
		background-color var(--link-transition),
		transform var(--link-transition);
}
a:hover,
a:focus {
	color: white;
}
a:hover::before,
a:focus::before {
	background-color: var(--accent-color);
	transform: translateY(-50%) rotateZ(-1deg) scaleY(2);
}

p {
	margin: 0 0 1rem;
	text-wrap: balance;
}

strong {
	font-weight: 600;
}

blockquote {
	margin: 1rem 0 2rem 2rem;
	position: relative;
	font-style: italic;
}
blockquote::before {
	content: "\201C";
	position: absolute;
	top: -2.5rem;
	left: -2rem;
	z-index: -1;
	color: hsl(var(--hue), 75%, 92%);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 6rem;
}
blockquote footer {
	margin: 0.5rem 0;
	color: hsl(var(--hue), 15%, 50%);
	font-size: 0.6rem;
	font-weight: 200;
	text-align: right;
}

hr {
	margin: 5rem -6vw 3rem;
	border: none;
	height: 0.05rem;
	background-color: hsl(var(--hue), 0%, 72%);
	transform: rotate(-1deg);
}

ul {
	padding: 0;
	margin: 0 0 1rem;
	list-style: none;
}

li {
	margin-bottom: 0.5rem;
}

ul.inline-list {
	display: flex;
	flex-wrap: wrap;
	font-weight: 500;
}

ul.inline-list li {
	margin-bottom: 0.2rem;
}

ul.inline-list li:not(:last-child)::after {
	content: "/";
	display: inline-block;
	margin: 0 0.3rem;
	color: var(--accent-color);
}

ul.list li::before {
	content: "\2014";
	margin-right: 0.35rem;
	color: hsl(var(--hue), 10%, 50%);
}

ul.icons-list li {
	padding-left: 1rem;
	background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="hsl(0, 0%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: left 8px;
}

ul.icons-list li.check {
	background-image: url("data:image/svg+xml,%3Csvg stroke='hsl(0, 0%, 50%)' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

ul.icons-list li.twitter {
	background-image: url("data:image/svg+xml,%3Csvg stroke='hsl(0, 0%, 50%)' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'%3E%3C/path%3E%3C/svg%3E");
}

ul.icons-list li.github {
	background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="hsl(0, 0%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>');
}

ul.icons-list li.email {
	background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="hsl(0, 0%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>');
}

@media (max-width: 600px) {
	html {
		font-size: 32px;
	}

	h1 {
		font-size: 0.7rem;
	}

	h2 {
		font-size: 1.3rem;
	}
}

@media (min-width: 32rem) {
	html {
		font-size: 28px;
	}

	section {
		max-width: 18rem;
	}

	ul.icons-list li,
	ul.check-list li {
		background-position: left 8px;
		background-size: 18px;
	}
}

@media (min-width: 48rem) {
	html {
		font-size: 32px;
	}

	section {
		max-width: 20rem;
	}

	ul.icons-list li,
	ul.check-list li {
		background-position: left 8px;
		background-size: 22px;
	}
}