@font-face { font-family: 'Arbutus'; font-style: normal; font-weight: 700; src: local('Arbutus Slab'), local('Arbutus-Slab'), url(res/arbutus_slab.ttf) format('ttf'); } body { font-family: Arial, sans-serif; font-size: 17px; margin: 2em auto; max-width: 40em; padding: 0 3px; } header { margin-bottom: 2em; } h1, h2, h3 { font-family: Georgia, serif; font-weight: 700; } h1 { font-size: 60px; margin-bottom: 0px; } h2 { font-size: 27px; } #projects h2 { margin-bottom: 30px; } .split { display: flex; justify-content: space-between; } subtitle { display: inline-block; margin: 0 10px 0 3px; vertical-align: middle; } headerlinks { display: block; } logo { flex-shrink: 0; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #8f82ff; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } logo img { height: 80px; } #eloquentjavascript logo { border: 8px solid #8f82ff; background-image: url(ejs.png); background-position: center; background-size: 100%; } a, a:visited, a:link { color: #1d155e; text-decoration: none; } a.project { display: flex; margin-bottom: 30px; } a.project div { color: black; margin-left: 30px; } a.project h3 { font-size: 35px; margin: 4px 0 10px 0; } hr { border: none; height: 1px; margin: 1em 0; background-color: #6f62df; }