* {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
     font-family: 'Space Mono',sans-serif;
}
body {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     font-size: 1.5rem;
     background-color:hsl(135,41%,84%);
}
#logo {
     width: 50px;
}
#content {
     background-color:white;
     border-radius: 18px;
     margin-bottom: 0.2rem;
     padding: 1rem;
}
.input-title {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0.2rem;
}
h1 {
     color:hsl(186,14%,43%);
     font-size: 0.8rem;
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number] {
     -moz-appearance: textfield;
     appearance: textfield;
}
.normal-input {
     width: 100%;
     height: 40px;
     text-align: right;
     padding: 0.5rem;
     font-size: 1.2rem;
     border: none;
     border-radius: 3px;
     outline: none;
     background-color:hsl(189,41%,97%);
     background-repeat: no-repeat;
     background-position: left center;
     background-origin: content-box;
     background-size: 10px;
}
.normal-input:focus {
     border: 2px solid hsl(172,67%,45%);
}
.normal-input::placeholder {
     color: hsl(184,14%,56%);
}
#input-total-bill {
     background-image: url('./images/icon-dollar.svg');
}
#input-total-people {
     background-image: url('./images/icon-person.svg');
}
.first-entry {
     margin-bottom: 2rem;
}
.select-tip-div {
     margin-bottom: 1.3rem;
}
.title {
     color:hsl(186,14%,43%);
     font-size: 0.8rem;
}
.tip-title {
     margin-bottom: 1rem;
}
.tips {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
}
.tip,.custom-tip {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     background-color:hsl(183,100%,15%);
     color:white;
     border-radius: 4px;
     cursor: pointer;
     margin-bottom: 0.7rem;
     height: 45px;
}
.custom-tip {
     background-color:hsl(189,43%,97%);
}
.custom-input {
     height: 100%;
     border: none;
     outline: none;
     text-align: right;
     background-color:hsl(189,41%,97%);
     color:hsl(183,100%,15%);
     padding: 0.5rem;
     font-size: 1.3rem;
     border-radius: 4px;
}
.custom-input:focus {
     border: 2px solid hsl(172,67%,45%);
}
.custom-input::placeholder {
     text-align: center;
     font-size: 1.23rem;
     color:hsl(183,100%,15%);
}
#totals {
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color:hsl(183,100%,15%);
}
.value-per-person {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
}
.value-title {
     display: flex;
     flex-direction: column;
     color:white;
     font-size: 0.9rem;
}
.value-title span {
     font-size: 0.7rem;
     color:hsl(184,14%,56%);
}
.total {
     font-size: 2rem;
     color:hsl(172,67%,45%);
}
#reset-button {
     height: 40px;
     font-size: 1rem;
     text-transform: uppercase;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     background-color:hsl(172,67%,45%);
     color:hsl(183,100%,15%);
}
#reset-button:hover {
     background-color:hsl(183,79%,24%);
}
.selected-tip {
     background-color:hsl(172,67%,45%);
     color:hsl(183,100%,15%);
}
.error-span {
     display: none;
     color:hsl(0,82%,59%);
}
.error-input:focus {
     border: 2px solid hsl(0,82%,59%);
}
@media only screen and (min-width:700px){
     #logo{
          margin-bottom: 3rem;
     }
     #content{
          width: 650px;
          display: flex;
          flex-direction: row;
     }
     #entries{
          padding: 1rem;
          width: 55%;
          margin-right: 1rem;
     }
     .tip, .custom-tip{
          width: 92.2px;
     }
     .five, .ten, .twenty-five, .fifty{
          margin-right: .7rem;
     }
     #totals{
          width: 45%;
          padding: 2rem 1rem;
     }
}
@media only screen and (max-width:700px){
     #logo{
          margin: 1rem 0 1rem 0;
     }
     #content{
          max-width: 350px;
          display: flex;
          flex-direction: column;
     }
     #entries{
          padding: 1rem 0 1rem 0;
     }
     .tip, .custom-tip{
          width: 153.42px;
     }
     .five, .fifteen, .fifty{
          margin-right: .7rem;
     }
     .second-entry{
          margin-bottom: 1rem;
     }
     #total-values{
          margin-bottom: 2rem;
     }
     #totals{
          padding: 1.5rem 1rem;
     }
}