body {
  margin: 0;
}
#header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  padding: 1vh;
}
#header-image {
  margin: auto;
  width: 1023px;
  height: 189px;
}
nav {
  width: 99vw;
  background-color: #D6EFFF;
}
ul {
  display: block;
  margin: auto;
  padding: 0;
  display: flex;
  width: 1024px;
}
li {
  list-style-type: none;
  margin: 0.25vw 0;
  font-size: 12pt;
}
.main-menu {
  text-decoration: none;
  color: black;
  padding: 0.25vw 1vw;
  font-family: monospace;
}
.main-menu a:hover {
  background-color: #C6E9FF;
}
button {
  display: none;
}

#municipality {
  display: block;
  margin: auto;
  width: 1024px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Map */
#map {
  display: block;
  margin: auto;
  height: 65%;
  width: 1024px;
}

#contact {
  display: block;
  margin: auto;
  width: 1024px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  overflow: auto;
}

div {
  display: block;
}
#contact_info {
  display: block;
  float: right;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

#contact_form {
  width: 50%;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

#error_message {
  display: block;
  margin: auto;
  width: 1024px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  color: red;
  padding-left: 15px;
  padding-right: 15px;
  overflow: auto;
}

#done_message {
  display: block;
  margin: auto;
  width: 1024px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  color: red;
  padding-left: 15px;
  padding-right: 15px;
  overflow: auto;
}

#footer {
  display: block;
  margin: auto;
  padding-top: 15px;
  padding-left: 25px;
  width: 1024px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

@media only screen and (orientation: portrait) {
  #header {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 3vh;
    padding: 2vh;
  }
  #map {
    display: block;
    display: flex;
    height: 80vh;
    width: 100vw;
  }
  #contact {
    display: block;
    display: flex;
    height: 80vh;
    width: 100vw;
    font-size: 3vh;
    padding-top: 1vh;
    padding-left: 1vw;
  }
  
  #footer {
    display: block;
    margin: auto;
    padding-top: 15px;
    padding-left: 25px;
    width: 1024px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 3vh;
  }
  
  #municipality {
    display: block;
    margin: auto;
    width: 100vw;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 2vh;
  }
  /* show elements in a column */
  ul {
    flex-direction: column;
    margin: 0;
  }
  /* deletes margin on top and bottom of the tag*/
  li {
    margin: 0;
    font-size: 3vh;
    display: none;
  }
  /* make sure the tag takes the whole screen */
  a {
    display: block;
    padding: 3vw;
  }
  
  button {
    /* makes the button visible */
    display: block;
    
    padding: 3vw;
    font-size: 3vh;
    background-color: #AFE0FF;
    border: none;
    
    outline: none;
    
    cursor: pointer;
    
    align-self: flex-start;
  }
}