main {
  display: block;
}

main::before {
  content: '';
  display: table;
}

main h1,
main h2 {
  margin: 0;
  padding: 11px 12px;
  color: #fff;
  background: #215492;
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: 2.6rem;
  line-height: 1.1;
  margin-left: -12px;
  margin-right: 25px;
}

@media (min-width: 604px) {
  main h1 {
    padding: 16px 12px;
  }
  main h1,
  main h2 {
    margin-left: -62px;
    padding-left: 62px;
    margin-right: 42px;
  }
}

@media (min-width: 850px) {
  main h1,
  main h2 {
    margin-right: 0;
  }
}

main h1:first-child {
  margin-top: -28px;
}

main h2 {
  background: #B03EB3;
  font-size: 1.9rem;
}


.about-me {
  margin-left: -12px;
  margin-right: -12px;
  padding: 0 12px;
  overflow: hidden;
  background: #C9DCEC;
  font-size: 0.9rem;
  display: block;
}

.about-me h1 {
  margin: 0 -12px;
  padding: 0.4em 12px;
  color: #fff;
  background: #3E93B3;
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.1;
}

@media (min-width: 604px) {
  .about-me,
  .about-me h1 {
    margin-left: -34px;
    margin-right: -34px;
    padding: 0 34px;
  }
  .about-me h1 {
    padding: 0.4em 34px;
  }
}

@media (min-width: 850px) {
  :root {
    --about-me-blocker: initial;
  }
  .about-me {
    margin-left: auto;
    margin-right: 0;
    padding: 0 17px;
  }
  .about-me h1 {
    padding: 0.4em 17px;
    margin-left: -17px;
    margin-right: -17px;
  }
}


.comments {
  margin-bottom: 2em;
  display: block;
}

.comments h1:first-child {
  margin-top: 0;
  font-size: 1.7rem;
  padding-top: 11px;
  padding-bottom: 11px;
}

@media (min-width: 604px) {
  .comments h1:first-child {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

.comments header {
  display: flex;
  align-items: center;
  color: #969696;
  margin: 1.9em 0 0;
  margin-left: -12px;
}

.comments .avatar {
  width: 40px;
  height: 40px;
  fill: #969696;
  margin-right: 0.6em;
}

.comments article article {
  border-left: 10px solid #E4E4E4;
  padding-left: 22px;
}


footer {
  background: #2d2d2d;
  padding: 0.9em 12px;
  padding-top: calc(0.9em + 14px);
  overflow: hidden;
  color: #fff;
  font-size: 0.9rem;
  display: block;
}

footer ul {
  display: flex;
  padding: 0;
  margin: 0;
  flex-flow: row wrap;
  justify-content: center;
}

footer li {
  display: block;
  padding: 0 1em;
  border-left: 1px solid #fff;
}

footer li:first-child {
  border-left: none;
}