:root {
  --roboto: "Roboto", sans-serif;
  --playfair: "Playfair Display", serif;
  --text-color: #444;
  --link-color: #444;
  --primary-color: #4d2ca1;
  --primary-color-darker: #331d6b;
  --smoked: #2b2b2b;
  --primary-font: var(--roboto); }

.contact-item {
  border: 1px solid #00000020;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .contact-item > i {
    font-size: 4em;
    margin-bottom: 0.5em;
    color: var(--primary-color); }
  .contact-item strong {
    font-family: var(--playfair);
    font-size: 1.3em;
    margin-bottom: 10px; }
  .contact-item p {
    margin-bottom: 0; }
  .contact-item a {
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
    font-weight: bold; }
    .contact-item a:hover {
      color: var(--primary-color); }
    .contact-item a > i {
      color: var(--primary-color);
      transition: all 0.3s ease-in-out; }
    .contact-item a:hover {
      color: var(--primary-color); }

#contact-form input:not([type="submit"]),
#contact-form textarea {
  border: 1px solid #00000020;
  padding: 5px;
  border-radius: 5px;
  width: 100%; }

#contact-form input[type="submit"] {
  background: var(--primary-color);
  color: white;
  padding: 0.7em;
  border: 2px solid transparent;
  border-radius: 5px;
  width: 100%;
  transition: all 0.3s ease-in-out;
  font-family: var(--primary-font), "Line Awesome Brands"; }
  #contact-form input[type="submit"]:hover {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color); }

#contact-form textarea {
  height: 240px; }