main.css

body {
height: auto;
width: auto;
display: grid;
}

#landing-page {
  height: auto;
  width: auto;
}

h1 {
  color: #0d68b3;
  width: 50%;
  margin: auto;
  border-radius: .3rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 15vh;
  margin-bottom: 0px;
  text-align: center;
  font-family: 'Poller One', cursive;
}

h5 {
  color: #0d3b66;
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
}

#state-alerts {
  color: #0b3469;
  padding-left: 15vw;
  padding-right: 15vw;
  margin: auto;
  text-align: left;
}


#state-form {
  text-align: center;
  margin-top: 5px;
  font-family: 'Titillium Web', sans-serif;
}

#state-search {
  text-align: center;
  font-family: 'Titillium Web', sans-serif;
}

#search {
  font-family: 'Titillium Web', sans-serif;
}

::-webkit-input-placeholder {                 /* Found on css-tricks.com */
  color: rgb(120, 161, 161);
}

h3 {
  margin-bottom: 5px;
  font-family: 'Poller One', cursive;
  width: 12vw;
  align-content: flex-start;
  overflow-wrap: break-word;
}

h4{
  color: #0d68b3;
  width: 50vw;
  margin-bottom: 5px;
  margin-top: 5px;
  font-family: 'Titillium Web', sans-serif;
  display: flex;
  align-content: space-around;
}

h3, h4 {
  height: 30px;
  display: inline-block;
  margin: 30px 10px 10px 0px;
  justify-content: flex-start;
}

p {
  margin-top: 10px;
  font-family: 'Barlow', sans-serif;
}

@media screen and (max-width: 600px) {
  h5, h4 {
    display: inline-block;
    padding-left: 7vw;
    padding-right: 7vw;
    height: auto;
  }
  h3{
    margin-top: 30px;
    width: 50vw;
  }
  h4 {
    margin-top: auto;
    text-align: left;
    padding: 0px;
  }
}