h1, h2, p {
  margin: 0;
  padding: 0;

}

body {
  color: #333;
  font-family: 'PT Sans', sans-serif;
  padding: 50px 0;

}

h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;

}

h1 {
  font-size: 300%;
  text-align: center;
  margin-bottom: .5em;
  text-transform: uppercase;

}

h2 {
  font-size: 130%;
}

.invisible {
  color: #AABCCC; //at the beginning it hides the result

}

.container {
  width: 700px;
  margin: auto;
  padding: 20px;
  text-align: center;


}

.top {
  background: #EBF6BE; //background color for top container

}

.bottom {
  background: #AABCCC; //background color for bottom container

}

p {
  margin-bottom: 1em;
}

#directions {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 120%;

  padding: 15px 0;
  width: 100%;
}

/* Forms */
input[type="text"] {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;

  text-align: center;
  width: 80px;
}

input[type="text"]:focus {
  border: 1px solid #33C3F0; //highlight border
  outline: 0; 
}

label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; 
}



/* Buttons */
input[type="submit"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
}

input[type="submit"]:hover {
  color: #333;
  border-color: #888; //change border hover color
}


input[type="submit"].button-primary {
  color: #FFF;
  background-color: #33C3F0; //primary button color

  border-color: #33C3F0;
}

input[type="submit"].button-primary:hover {
  color: #FFF;
  
  background-color: #1EAEDB; //darker shade on hover

  border-color: #1EAEDB;
}