#contact {
  > #contact-details-and-form {
    display: flex;
    justify-content: space-between;
    @media (max-width: 600px) {
      flex-direction: column;
    }
    > #contact-details-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: 35%;
      @media (max-width: 600px) {
        width: 100%;
      }
      > div {
        background-color: var(--colorGreen);
        border-radius: 5px;
        box-shadow: 5px 5px 5px var(--colorBlue);
        display: flex;
        padding: 10px;
        > button {
          background-color: transparent;
          border: none;
          padding: 0px;
          height: 20px;
          width: 20px;
          transition: all 1s ease;
          > img {
            height: 100%;
            width: 100%;
            &:hover {
              cursor: pointer;
            }
          }
          &:active {
            transition: all 0s ease;
            box-shadow: 0px 0px 10px 3px var(--colorBlue);
          }
        }
        > p {
          color: black;
          flex: 1;
        }
      }
      > p {
        font-style: italic;
        font-weight: bold;
        margin-bottom: 10px;
        &:not(:nth-of-type(1)) {
          margin-top: 30px;
        }
      }
    }
    > #contact-form-container {
      display: none;
      flex-direction: column;
      width: 55%;
      @media (max-width: 600px) {
        margin: 50px 0px 0px 0px;
        width: 100%;
      }
      &.active {
        display: flex;
      }
      > div {
        height: 5px;
        width: 60%;
        &#skewer-top {
          background-color: var(--colorGreen);
          margin: 10px 0px 10px 0px;
        }
        &#skewer-bottom {
          background-color: var(--colorBlue);
          margin: 10px 0px 10px 40%;
        }
      }
      > form {
        display: flex;
        flex-direction: column;
        > button,
        input,
        label,
        textarea {
          font-size: 1.6rem;
        }
        > input[type='email'],
        > input[type='tel'],
        > input[type='text'] {
          border: none;
          border-bottom: 1px solid black;
          margin: 0px 0px 10px 0px;
          &:focus {
            outline: none;
          }
          &:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 30px white inset !important;
          }
        }
        > input[type='submit'] {
          align-self: stretch;
          background-color: white;
          border: none;
          cursor: pointer;
          font-weight: bold;
          height: 3.5rem;
          @media (pointer: fine) {
            border: 1px solid var(--colorBlue);
            &:hover {
              background-color: var(--colorBlue);
              color: white;
            }
          }
          @media (pointer: coarse) {
            box-shadow: 1px 1px 3px var(--colorBlue);
          }
        }
        > label {
          font-style: italic;
          margin: 10px 0px 10px 0px;
        }
        > textarea {
          min-height: 250px;
          margin: 0px 0px 20px 0px;
          resize: none;
          &:focus {
            outline: none;
          }
        }
      }
      > p {
        font-weight: bold;
      }
    }
    > #contact-confirmation-container {
      display: none;
      flex-direction: column;
      width: 55%;
      @media (max-width: 600px) {
        margin: 50px 0px 0px 0px;
        width: 100%;
      }
      &.active {
        display: flex;
      }
      > button {
        align-self: stretch;
        background-color: white;
        border: none;
        font-size: 1.6rem;
        font-weight: bold;
        height: 3.5rem;
        @media (pointer: fine) {
          border: 1px solid var(--colorBlue);
          &:hover {
            background-color: var(--colorBlue);
            color: white;
          }
        }
        @media (pointer: coarse) {
          box-shadow: 1px 1px 3px var(--colorBlue);
        }
      }
      > #thank-you {
        font-size: 3rem;
        font-weight: bold;
      }
      > #message-received-text {
        margin: 40px 0px 40px 0px;
      }
    }
  }
}