body {
    background-color: rgba(252, 241, 162, 0.658);
  }

  h1 {
    color: #09180f;
    font-size:40px;
  }

/* Add a background color to the navigation bar*/
.nav {
  background-color:rgba(252, 241, 168, 0.658);
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.nav a {
  float: left;
  color:black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.nav a:hover {
  background-color:khaki;
  color:whitesmoke;
}

p {
    color: #090c0a;
    /* border: 2px solid rgb(20, 18, 18); */
    text-align: center;

  }

table {
    width: 100%;
    
  }
  table, th, td {
    border-right: 1px solid black;
    text-align: center;
    vertical-align: top;
    justify-content: center;
  }
  input {
    width: 90%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

/* dots are classes */
  .button {
    width: 140px;
    height: 45px;
    text-transform: none;
    background-color:rgba(252, 241, 168, 0.658);
    border: 1px solid black;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    }
  
  .button:hover {
    background-color:khaki;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
  }

  /* image stuff */
  img.pic {
    height: 200px;
    width: 150px;
  }
  img.pic2 {
    height: 200px;
    width: 250px;
  }

  /* about the forms using grids */
  #contact-form { /* part of main page */
    display:grid;
    grid-template-columns: 150px 375px;
  }
  
  #contact-form2 { /* contact page */
    display:grid;
    grid-template-columns: 150px 300px 150px 300px;
  }

  .grid-container {
    display: grid;
    justify-content: space-evenly;
    column-gap: 5px;
    row-gap: 5px;
    grid-template-rows: auto auto auto auto 200px;
    grid-auto-rows: 60px;
    padding: 5px;
  }
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);    
    padding: 2px;
    text-align:left;
  }

  .grid-item2 {
    
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px;
    text-align:left;
  }
/* map uses grids */
  .map-grid-container {
    display: grid;
    justify-content: space-evenly;
    column-gap: 5px;
    row-gap: 5px;
    grid-template-columns: 600px 600px;
    grid-template-rows: 600px;
    padding: 5px;
  }
  .map-grid-item {
    background-color: rgba(255, 255, 255, 0.8);    
    padding: 2px;
    text-align:center;
  }

/* # hashes are id's */
  #services {
    text-align: center;
  }
  #formdata{
    text-align: left;
  }
  #contact{
    border:  1px solid black;
  }
  #logo{
    width:1000px;height:200px;
  }
  #messageSent{
    color:black; background-color: burlywood;border:darksalmon; font-size: larger; font-weight: bolder; text-shadow: 4px 4px 5px rgba(255, 0, 0, 0.24);
  }
  #map-canvas {
    height: 100%;
    width: 100%;
  }