/* Mobile first Screens*/
.container {
  /* initially each element has it's own row for small screens */
  grid-template-areas:
    "nav"
    "contact"
    "ft";
  grid-template-rows: 192px 1fr;
}
#contact-us {
  grid-area: contact;
}
p#contact-message {
  text-align: center;
  margin: 12px;
}
input#subject {
  min-height: 33px;
  min-width: 340px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid black;
  font-family: "Oswald", sans-serif;
  font-size: 1em;
}
textarea#message {
  min-height: 300px;
  min-width: 340px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid black;
  font-family: "Oswald", sans-serif;
  font-size: 1em;
}
#contact-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
#contact-submit-btn {
  border: 2px solid #4caf50;
  border-radius: 12px;
  color: darkseagreen;
  background-color: white;
  text-align: center;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 15px;
  padding-bottom: 2px;
  display: inline-block;
  min-width: 75px;
  font-size: 15px;
}
/* Medium Screens*/
@media (min-width: 660px) and (max-width: 1100px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 106px 2fr 2fr 1fr 30px 170px 30px;
  }
  input#subject {
    min-height: 33px;
    min-width: 450px;
    padding: 5px;
    margin-bottom: 24px;
  }
  textarea#message {
    min-height: 300px;
    min-width: 450px;
    padding: 5px;
    margin-bottom: 24px;
  }
  #contact-submit-btn {
    border: 1px solid #4caf50;
    border-radius: 12px;
    color: #4caf50;
    width: 175px;
    padding: 9px 32px;
    text-align: center;
    margin-left: 25px;
    margin-right: 25px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
}
/* Large Screens */
@media (min-width: 1101px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "contact contact contact contact contact contact contact contact"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 100px 2fr 2fr 1fr 30px 170px 30px;
  }
  input#subject {
    min-height: 33px;
    min-width: 450px;
    padding: 5px;
    margin-bottom: 24px;
  }
  textarea#message {
    min-height: 300px;
    min-width: 450px;
    padding: 5px;
    margin-bottom: 24px;
  }
  #contact-submit-btn {
    border: 1px solid #4caf50;
    border-radius: 12px;
    color: #4caf50;
    width: 175px;
    padding: 9px 32px;
    text-align: center;
    margin-left: 25px;
    margin-right: 25px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
}