html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  background: #282a2d;
  color: #c7c8c9;
  font-family: 'Roboto', serif;
  ;
}

main {
  margin: 0 auto 40px;
  flex-direction: column;
  display: flex;
  justify-content: center;
}

.title-wrapper {
  width: 350px;

}

.title-wrapper .tag-line {
  font-size: small;
  text-align: end;
  margin-top: -12px;
  font-style: italic;
}

.contacts {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  margin-top: 60px;
}

.contacts>* {
  color: #c7c8c9;
}

.contacts>* .material-symbols-outlined {
  vertical-align: middle;
  margin-right: 4px;
}

footer {
  height: 40px;
  line-height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}