TipCalculatorStyle.css

body {
    background: #f2f2f2;
    color: brown;
    font-size: 120%;
}

#container {
   width: 20em;
   margin: 10% auto; 
   background: #fff;
   padding: 1%;
   box-sizing: border-box;
   -webkit-border-radius: 0.8em;
   -moz-border-radius: 0.8m;
   -o-border-radius: 0.8em;
   border-radius: 0.8em;
   box-shadow: 0 0.5em 1.5em -0.5em #000;
}

h1 {
   border-bottom: solid 0.05em #ddd; 
   margin: 2% 0 0 2%;
   padding: 1% 0 1%;
   font-size: 200%;
   font-weight: bold;
}

p {
   margin: 0.5%;
}

label {
    padding: 3% 0;
    display: block;
}

form input{
    width: 30%;
    padding: 1.2%;
    margin: 2% 1.5% 0 0;
}

#totalPeople {
   position: relative; 
   left: 1.5%;
   top: -0.5%;
}

#serviceQuality {
   margin-top: 1%;
 }

button {
   background: brown; 
   width: 40%;
   padding: 3%;
   display: inline-block;
   margin: 3% auto;
   font-size: 110%;
   color: white;
   border: none;
   -webkit-border-radius: 0.5em;
   -moz-border-radius: 0.5em;
   -o-border-radius: 0.5em;
   border-radius: 0.5em;
   border-bottom: solid 0.2em #111;
}

#buttons {
   text-align: center;
}

button:hover {
   background: crimson;
   border-bottom-color: #000;
}

button:active {
   background-color: #3e8e41;
   transform: translateY(0.1em);
}

#totals {
   text-align: left;
   margin-top: 2%;
}

span {
   font-size: 110%; 
}

small {
   font-size: 100%;
   font-weight: bold;
}