body {
    font-family: 'Space Mono', monospace;
    /* height: 100%;
    width: 100%; */
    background-color: #C5E4E7;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img {
    margin-top: 100px;
    height: auto;
    width: 80px;
}

#container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: stretch;
    margin-top: 50px;
    /* column-gap: 50px; */
}

#input-card {
background-color: white;
width: 100%;
padding: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top: 20px;
}

#input-card h2{
    color:#006e74;
    font-size: large;
}

#output-card{
    background-color: #00474B;
    width: 100%;
    padding: 20px;
    height: auto;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 20px;
    /* display: flex;
    flex-direction: row; */
}

#output-card h2{
    color:#C5E4E7;
    margin: 0%;
}

#output-card section{
    color: #77acb0;
    margin: 0%;
}

#output-card h3{
    color: #32C0B0;
    text-align: end;
    font-size: 24px;
}

input.bill-input {
    background-image: url(./images/icon-dollar.svg);
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 20px;
    padding: 5px;
    height: 20px;
    background-color: #F3F8FB;
    border: none; 
    border-radius: 5px;
}
input.bill-input::placeholder{
    font-family: 'Space Mono', monospace;
    text-align: end;
    margin: 3px;
    font-size: 16px;
    color:#9fc3c6;
}

input.bill-input[type=number]{
    text-align: end;
    font-family: 'Space Mono', monospace;
}
input.people-input {
    background-image: url(./images/icon-person.svg);
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 20px;
    background-color: #F3F8FB;
    border:none;
    height: 20px; 
    padding: 5px;
    border-radius: 5px;
}
input.people-input::placeholder{
    font-family: 'Space Mono', monospace;
    text-align: end;
    margin: 3px;
    font-size: 16px;
    color:#9fc3c6;
}
input.people-input[type=number]{
    text-align: end;
    font-family: 'Space Mono', monospace;
}

button.btns{
    background-color: #00474B;
    color: #C5E4E7;
    border: none;
    border-radius: 5px;
    width: 30%;
    height: 6%;
    font-family: 'Space Mono', monospace;
    font-weight:bold;
    margin: 5px;
}

input.custom {
 background-color: #F3F8FB;
 border: none;
 border-radius: 5px;
 width: 30%;
 height: 8%;
 margin: 5px;
}
input.custom::placeholder{
    color: #00474B;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
}

input.custom[type=number]{
    text-align: center;
    font-family: 'Space Mono', monospace;
}


button.reset-button{
    background-color:#32C0B0;
    border: none;
    border-radius: 5px;
    width: 100%;
    height: 10%;
    color: #00474B;
    font-size: medium;
    font-family: 'Space Mono', monospace;
    font-weight: bolder;
}
/* #00474B  #32C0B0  #F3F8FB*/