.contact-container {
  display: flex;
  flex-direction: row;
  width: 50vw;
  margin: auto;
  margin-top: 10vw;
}

.contact-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-icon > img {
  width: 10vw;
  border-radius: 11px;
  box-shadow: 10px 10px var(--text-color);
}

.contact-icon:hover {
  filter: brightness(80%);
  transition: ease-in-out 0.2s;
}

/* adjust for mobile  */

@media only screen and (max-width: 450px) {
  .contact-container {
    width: 80vw;
  }

  .contact-icon > img {
    width: 15vw;
    border-radius: 5px;
    box-shadow: 6px 6px var(--text-color);
  }
}