/* Styling for contact.html */
/* Jack Ryan 2021 */

/* Variables */
@import "variables.css";

/* Mobile */
@media (max-width: 650px) {
  /* Form styling */
  #contact-form-container {
    background: var(--cyan);
    color: var(--white) !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
  }

  #contact-form-container h2 {
    font-size: var(--heading-two-mobile);
    font-weight: bold;
    color: var(--white);
    text-align: center;
    padding-top: 5%;
    grid-column: 1/1;
    grid-row: 1/1;
    margin: 40px 0px 0px 0px !important;
  }

  #contact-form-container h3 {
    font-size: var(--heading-three-mobile);
    color: var(--white);
    grid-column: 1/1;
    grid-row: 2/2;
    padding: 0% 5% !important;
    text-align: center;
  }

  #contact-form-container h3 a {
    color: var(--white) !important;
    font-size: inherit !important;
    margin: 0% !important;
    font-weight: normal !important;
    text-decoration: underline;
    text-align: center;
  }

  legend {
    font-size: var(--para-desktop);
  }

  #contact-form {
    grid-column: 1/1;
    grid-row: 3/3;
    padding: 5% !important;
  }

  fieldset {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #contact-form label {
    color: var(--white);
    font-size: var(--para-desktop);
  }

  div.uk-form-controls {
    max-width: 100%;
  }

  .form-button {
      border: none;
      transition: all .5s;
  }

  .form-button:hover,
  .form-button:focus {
    border: solid 1px var(--white) !important; 
    transition: all .5s;
  }
}

/* Tablet */
@media screen and (min-device-width: 651px) {
  /* Form styling */
  #contact-form-container {
    background: var(--cyan);
    color: var(--white) !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
  }

  #contact-form-container h2 {
    font-size: var(--heading-two-tablet);
    font-weight: bold;
    color: var(--white);
    text-align: center;
    padding-top: 5%;
    grid-column: 1/1;
    grid-row: 1/1;
    margin: 20px 0px 0px 0px;
  }

  #contact-form-container h3 {
    grid-column: 1/1;
    grid-row: 2/2;
    font-size: var(--heading-three-tablet);
    color: var(--white);
    padding: 2.5% !important;
  }

  #contact-form-container h3 a {
    color: var(--white) !important;
    font-size: inherit !important;
    margin: 0% !important;
    font-weight: normal !important;
  }

  #contact-form {
    grid-column: 1/1;
    grid-row: 3/3;
    padding: 2.5% !important;
  }

  legend {
    font-size: var(--para-tablet);
  }
  fieldset {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #contact-form label {
    color: var(--white);
    font-size: var(--para-tablet);
  }

  div.uk-form-controls {
    max-width: 75%;
  }

  .form-button {
    border: none;
    transition: all .5s;
}

   .form-button:hover,
   .form-button:focus { 
    border: solid 1px var(--white) !important;
    transition: all .5s;
}

/* Desktop */
@media screen and (min-device-width: 1023px) {
    #contact-form-container h2 {
        font-size: var(--heading-two-desktop);
      }
    
      #contact-form-container h3 {
        font-size: var(--heading-three-desktop);
      }
    
      legend {
        font-size: var(--para-desktop);
      }
    
      #contact-form label {
        font-size: var(--para-desktop);
      }
    
      div.uk-form-controls {
        max-width: 50%;
      }
}