:root {
	--text-color: #bbb;
	--title-color: #fff;
}

html, body {background: #1a1a1a; color: var(--text-color); padding: 0; margin: 0;}
body {font-family: Cantarell, Ubuntu, Helvetica, Roboto, sans-serif; font-size: 18px;}

h1, h2, h3 {color: var(--title-color);}

header, section {padding: 50px 20px;}
:is(header, section) > .inner {margin: auto; max-width: 700px;}

header {text-align: center; background: #111;}

.photo {max-width: 200px; margin: auto; border-radius: 50%;}

header h1 {font-size: 2.7em; font-weight: 900;}
header h1 small {font-size: .4em; display: block; font-weight: 700; letter-spacing: 2px;}

.btn-row {display: flex; gap: 10px; flex-wrap: wrap; align-items: start;}
.btn-row-center {justify-content: center;}

.btn {border: 0; color: var(--text-color); background: #333; padding: 12px 16px 10px; border-radius: 6px; border-bottom: 4px solid #222; font-weight: 700; top: 0; transition: all .1s; position: relative; text-decoration: none; font-size: 1em; cursor: pointer;}
.btn:hover {color: var(--title-color);}
.btn:active {border-bottom-width: 2px; top: 2px;}

a {color: var(--text-color);}
a:hover {color: var(--title-color);}

.btn-svg {display: flex; gap: 7px; align-items: center;}
.btn-svg svg {height: 1.15rem; width: 1.15rem;}

ul {padding-left: 30px;}
ul li {margin-bottom: 10px;}