:root {
--font-family: ABeeZee, sans-serif;
--max-width: 860px;
--bg-color: #fefefe;
--font-size: 1.3rem;
}
* {
padding: 0;
margin: 0;
outline: 0;
body {
font-family: var(--font-family);
background-color: var(--bg-color);
font-size: var(--font-size);
div.container {
max-width: var(--max-width);
margin: auto;
nav {
border-bottom: 1px solid #999999;
font-weight: bold;
position: fixed;
left: 0;
top: 0;
width: 100%;
.nav {
display: grid;
grid-template-columns: 1fr 9fr;
grid-gap: 20px;
padding: 1em 0;
div.nav--left {
div.nav--right {
text-align: right;
ul.nav--links {
ul.nav--links li {
display: inline;
text-transform: uppercase;
padding: 0 4px;
a {
color: #000000;
text-decoration: none;
transition: all 0.2s;
a:hover {
border-bottom: 3px solid #000000;
article#about {
margin-top: 5em;
article#projects {
margin-bottom: 5em;
article#about p {
article#about p.hero {
font-size: 2em;
article#about a {
margin: 200px 0 !important;
footer {
bottom: 0;
border-top: 1px solid #999999;
text-align: center;
a.button {
padding: 5px 10px;
border: 3px solid #000000;
a.button:hover {
background-color: #000000;
color: #ffffff;
article {
margin: 2em 0;
p.title {
font-size: 2rem;
margin: 10px 0;