main.css

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

:root {
	--hue: 223;
	--accent-color: hsl(var(--hue), 100%, 50%);
	--link-transition: 250ms 33ms cubic-bezier(0.19, 1, 0.22, 1);
}

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

body {
	margin: 0;
	padding: 30vh 6vw;
	background-color: hsl(var(--hue), 40%, 98%);
	color: hsl(var(--hue), 80%, 10%);
	/* System Fonts as used by GitHub */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-size: 0.75rem;
	font-weight: 300;
	overflow-x: hidden;
}

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

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

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

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

h1 {
	margin: 1rem 0;
	color: hsl(var(--hue), 15%, 50%);
	font-size: 0.5rem;
	font-weight: 200;
	letter-spacing: 0.016rem;
	text-transform: uppercase;
}

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

h3 {
	font-size: 0.75rem;
	font-weight: 600;
}

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%, 92%);
	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;
}

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.083rem;
	background-color: hsl(var(--hue), 75%, 92%);
	transform: rotateZ(-1.5deg);
}

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.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(223, 100%, 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 center;
}

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(223, 100%, 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.twitter {
	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(223, 100%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>');
}

ul.icons-list li.linkedin {
	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(223, 100%, 50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></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(223, 100%, 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 (min-width: 32rem) {
	html {
		font-size: 28px;
	}

	.contain {
		max-width: 18rem;
	}

	ul.icons-list li {
		background-position: left 55%;
		background-size: 18px;
	}
}

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

	.contain {
		max-width: 20rem;
	}

	ul.icons-list li {
		background-position: left 60%;
		background-size: 22px;
	}
}