html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: row;
min-height: 100vh;
align-items: center;
}
.page-wrapper {
display: flex;
flex-direction: column;
max-width: 80ch;
width: 80ch;
margin: 0 auto;
}
#about-me {
padding: 1em;
border: 2px solid white;
border-radius: 1em;
margin: 1em 0;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5em;
border-bottom: 1px dashed #444;
margin-bottom: 0.5em;
}
header > * {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
margin-top: 1em;
text-align: center;
}
.hero-image {
height: 8rem;
border-radius: 8px;
}
section + section {
margin-top: 0.5em;
}
h1 {
margin: 0;
margin-bottom: 0.5em;
font-size: 2.2rem;
}
h2 {
margin: 0;
font-size: 1em;
}
p {
margin: 0.5em 0;
}
p + p {
margin-top: 1em;
}