@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|PT++Mono);

:root{
  --primary-color: #F08080; /* lightcoral */
  --secondary-color: #696969; /* dimgrey */
  --tertiary-color: #DCDCDC; /* gainsboro */
  --color-container: #f7f7f7; /* gray97 */
  --color-white: #fff; /* white */
}

  body{
    background-color: var(--primary-color);
    font-size: 0.938rem; /* 15px */
    font-family: Lato, sans-serif;
  }

  #container{
    height: 37.5rem; /* 600px */
    width: 22.5rem; /* 360px */
    margin: 3.25rem auto; /* 52px */
    background: var(--color-container);
    box-shadow: 0.188rem 0.188rem 0.188rem -0.188rem   var(--tertiary-color); /* 3px 3px 3px -3pxs */
    border-radius: 20px; /* 15px */
  }

  .title{
    background: var(--tertiary-color);
    color: var(--secondary-color);
    padding: 1.25rem; /* 20px */
    text-transform: uppercase;
    font-size: 1.125rem; /* 18px */
    font-weight: normal;
    border-top-left-radius: 1.25rem; /* 20px */
    border-top-right-radius: 1.25rem; /* 20px */
    text-align: center;
  }

  .tipsForm{
    padding-left: 1.25rem; /* 20px */
    padding-right: 1.25rem; /* 20px */
  }

  .formInput{
    background: var(--color-white);
    width: 2.5rem; /* 40px */
    padding: 0.313rem 0.313rem 0.5rem 0.5rem ; /* 5px 5px 8px 8px */
  }

  .formInput:focus,
  .formSelect:focus{
    border: 0.188rem solid var(--primary-color); /* 3px */
    outline: none;
  }

  .formSelect{
    width: 11.25rem; /* 180px */
    padding: 0.313rem; /* 5px */
    font-size: 0.75rem; /* 12px */
  }

  .formSubmit{
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    margin: 1.875rem auto; /* 30px */
    background: var(--primary-color);
    border-radius: 0.313rem; /* 5px */
    width: 12.5rem; /* 200px */
    height: 3.125rem; /* 50px */
    font-size: 1.063rem; /* 17px */
    color: var(--color-white);
  }

    input[type=number]::-webkit-inner-spin-button { 
      -webkit-appearance: none;
  }

  #totalTip{
    font-size: 1.25rem; /* 20px */
    margin-top: 0.313rem; /* 5px */
    text-align: center;
  }

  .project span{
    font-size: 1.25rem; /* 20px */
    display: flex;
    justify-content: center;
    margin-top: -1.438rem; /* -23px */
  }