html,
body {
  background-color: #DEEDE6;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
}

#title {
  text-align: center;
  font-size: 65px;
  font-weight: bold;
  font-family: 'Pacifico', cursive;
  color: #374941;
  text-shadow: 3px 3px 10px #ABBAB4;
}

#main {
  background-color: #FFFFFF;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  box-shadow: 5px 5px 20px #ABBAB4;
}

input {
  width: 175px;
  margin-right: 25px;
  height: 25px;
  font-size: 17px;
  text-align: center;
  margin-top: 4px;
}

#output:disabled {
  background: #FFFAE5;
}

.dropdown {
  width: 164px;
  margin-left: 25px;
  height: 33px;
  background-color: #FBFCFC;
  font-size: 17px;
}

button {
  margin: 0 30%;
  width: 40%;
  background-color: #E5645F;
  color: #FFFFFF;
  padding: 15px 32px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
}

footer {
  background-color: #DEBABA;
	color: #FFFFFF;
	font-size: .70em;
	font-style: italic;
	text-align: center;
  padding: 20px 0px;
  margin: 40px -25px -25px;
  border-radius: 4px 4px 8px 8px;
}

footer a:link,
footer a:visited {
  color: #FFFFFF;
  font-weight: bold;
  padding: 0 5px;
}

footer a:hover {
  color: #F2F2F2;
}

@media only screen and (max-width: 375px) {
  #main { width: auto; }
  #input, #inputDD, #output, #outputDD
    {
      display: block;
      margin: 5px auto;
      width: 275px;
    }
}

@media only screen and (max-width: 320px) {
  #main { width: 288px; }
  #input, #inputDD, #output, #outputDD
  {
    display: block;
    margin: 5px auto;
    width: 220px;
  }
}