@font-face {
  font-family: heading;
  src: url(../images/vast-shadow/VastShadow-Regular.ttf);
}
#container1 {
  display: grid;
  grid-template-areas: "nav nav  nav nav nav nav nav nav nav nav nav nav" "header header header header header header header header header header header header" "form form form form form form map map map map map map " "footer footer footer footer footer footer footer footer footer footer footer footer";
  width: 95%;
  margin: 10px auto;
}

nav {
  grid-area: nav;
  background-color: rgb(186, 204, 218);
  padding: 20px;
  text-align: center;
  top: 10px;
  position: sticky;
}
nav img[alt~=logo] {
  float: left;
  height: 50px;
  width: auto;
}
nav li {
  display: inline;
  list-style-type: none;
  margin-right: 1.5em;
}
nav li a {
  color: black;
}
nav .active {
  background-color: rgb(0, 160, 199);
  padding: 10px;
}

header {
  grid-area: header;
  background-image: linear-gradient(rgb(255, 200, 71), rgb(74, 157, 91), rgb(0, 160, 199));
  margin-top: 7px;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-family: "heading", Courier, monospace;
}
header img[alt~=BlackCat] {
  display: block;
  border-radius: 50%;
  width: 100px;
  height: auto;
  margin: 0.5em auto;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.form {
  grid-area: form;
  border-radius: 5px;
  background-color: rgb(74, 157, 91);
  padding: 20px;
  margin: 15px;
}

.btn {
  text-align: center;
  width: 20%;
  background: #ffc847;
  background-image: linear-gradient(to bottom, #ffc847, #b08b33);
  border-radius: 60px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-right: 1%;
  transition-duration: 2s;
}

.btn:hover {
  background: #f2e9d3;
  background-image: linear-gradient(to bottom, #f2e9d3, #faf8f2);
  text-decoration: none;
  transform: scaleX(1.5);
  transform: scaleY(1.5);
}

.button {
  text-align: center;
  width: 15%;
  background: #009fc7;
  background-image: linear-gradient(to bottom, #009fc7, #00627a);
  border-radius: 60px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  transition-duration: 2s;
}

.button:hover {
  background: #aad8e3;
  background-image: linear-gradient(to bottom, #aad8e3, #cce9f0);
  text-decoration: none;
  transform: scaleX(1.5);
  transform: scaleY(1.5);
}

.map {
  grid-area: map;
  margin: 15px;
}
.map img[alt~=map] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  margin: 0.5em auto;
}

@media only screen and (max-width: 900px) {
  #container1 {
    display: grid;
    grid-template-areas: "nav" "header" "form" "map " "footer";
    width: 100%;
  }
  .btn {
    text-align: center;
    width: 30%;
    background: #ffc847;
    background-image: linear-gradient(to bottom, #ffc847, #b08b33);
    border-radius: 60px;
    font-family: Arial;
    color: #000000;
    font-size: 10px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin-right: 1%;
    transition-duration: 2s;
  }
  .btn:hover {
    background: #f2e9d3;
    background-image: linear-gradient(to bottom, #f2e9d3, #faf8f2);
    text-decoration: none;
    transform: scaleX(2);
    transform: scaleY(2);
  }
  .button {
    text-align: center;
    width: 15%;
    background: #009fc7;
    background-image: linear-gradient(to bottom, #009fc7, #00627a);
    border-radius: 60px;
    font-family: Arial;
    color: #000000;
    font-size: 10px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    transition-duration: 2s;
  }
  .button:hover {
    background: #aad8e3;
    background-image: linear-gradient(to bottom, #aad8e3, #cce9f0);
    text-decoration: none;
    transform: scaleX(1.5);
    transform: scaleY(1.5);
  }
}/*# sourceMappingURL=contact.css.map */