body {
  background: #101114;
}

main {
  color: #fff;
  width: 80%;
  padding: 0 10% 10vh;
  overflow: hidden;
  /* flex */
  display: flex;
  align-items: center;
}

#contact-container {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contact-container1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contact-container>h1 {
  font-weight: 200;
  padding: 2rem;
  letter-spacing: 0.2rem;
}

.contact-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 80%;
  padding: 2rem;
  border-radius: 4px;
  transition: 0.4s;
}

.contact-item>i {
  font-size: 24px;
  margin-right: 30px;
  fill: #bbb;
}

.contact-item>p {
  color: #bbb;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 2.25rem;
}

.contact-item:hover {
  background: rgba(0, 183, 255, 0.05);
  transition: 0.4s;
}

#qr-code {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#qr-code>img {
  width: 100%;
  object-fit: contain;
}

#qr-code>p {
  color: #bbb;
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  main {
    flex-direction: column;
  }

  #contact-container {
    width: 100%;
  }

  .contact-item {
    width: 100%;
  }

  #qr-code {
    margin-top: 10vh;
    width: 60%;
  }
}