@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
    --color-white:white; --color-black:#000; --grey600:#3D6666; --grey550:#547878; --grey500:#5E7A7D; --grey400:#7F9D9F;
    --grey300:#9EBBBD; --grey200:#C5E4E7; --grey50:#F3F9FA; --green900:#00474B; --green800:#085C61; --green750:#0D686D; 
    --green400:#26C2AE; --green200:#9FE8DF; --orange400:#E17052; --main-font:'Space Mono', monospace;
}
body {
    width:100vw;
    background-color:var(--grey200);
    font-family:var(--main-font);
}
button { border:none; }

label { font-weight: bold; color: var(--grey500); }
#bill, #number-people {
   width:100%;
   text-align:right;
   margin-top: 8px;
   padding:8px 16px;
   height:48px;
   border-radius:5px;
   border:none;
   background-color:var(--grey50);
   color:var(--green900);
   font-weight:bold;
   font-size:24px;
   outline:none;
}
#bill:hover { border:solid 3px var(--green400); }
#number-people:hover { border: solid 3px var(--green400); }

#bill {
    background-image: url('images/icon-dollar.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 14px;
}
#number-people {
    background-image: url('images/icon-person.svg');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 14px;
}
.logo-container {
    display:flex;
    justify-content:center;
    padding:50px 0 40px 0;
}
.card-main-container {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    background-color: var(--color-white);
    border-radius:25px 25px 0 0;
    padding:32px 24px;
    height:100vh;
}
.form-input-container {
    display:flex;
    flex-direction:column;
    row-gap:32px;
}
.select-tip-btn-container {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:8px;
}
.select-tip-btn {
    width:47%;
    height:48px;
    background-color:var(--green900);
    color:var(--color-white);
    border-radius:5px;
    font-size:24px;
    font-weight: bold;
    transition:color 0.3s ease-in-out , background-color 0.4s ease-in;
}
#select-btn:hover { background-color: var(--green400); color:var(--green900); }

.select-tip-btn.custom {
    background-color: var(--grey50);
    color: var(--grey550);
    border:none;
    font-weight:bold;
    text-align:center;
    outline:none;
}
.number-of-people-label-container { display: flex; justify-content:space-between; }

.error-message { color:var(--orange400); font-weight:bold; }

.results-output-container { background-color:var(--green900); border-radius:15px; padding:24px; }

.tip-amount-container { 
    display: flex; 
    justify-content:space-between; 
    flex-wrap:wrap; 
}
.tip-amount-container.amount { margin-bottom:24px; }
.tip-amount-container.total { margin-bottom: 32px; }

.tip-amount-text-container { display:flex; flex-direction:column; }
.tip-amount-text { font-weight: bold; color:var(--color-white); }

.tip-amount-quote { color: var(--grey400); font-size:13px; font-weight: bold; } 
.tip-amount { font-size: 32px; font-weight: bold; color:var(--green400); }

.results-output-reset-button {
    text-transform:uppercase;
    width:100%;
    height:48px;
    background-color:var(--green750);
    font-size: 20px;
    font-weight: bold;
    color: var(--green800);
    border-radius:5px;
    transition: background-color 0.3s ease-in-out;
}
.resset-button-state-enable { background-color: var(--green400); color: var(--green900); }
.resset-button-state-enable:hover { background-color: var(--green200); color: var(--green900); }
.error-state-input { border:solid 3px var(--orange400) !important; }

                                                     /* MEDIA QUERIES */
/* TABLET STYLES */
@media (min-width:768px) {
    body {
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:0 80px 80px 80px;
        height: 100vh;
    }
    .card-main-container {
        padding: 48px 80px;
        border-radius:25px;
        row-gap:40px;
        height: fit-content;
    }
    .results-output-container { padding:24px 32px; }
    .tip-amount { font-size:48px; }
    .form-input-container { row-gap: 40px; }
    .select-tip-btn { width:30%; }
}
/* DESKTOP STYLES */

@media (min-width:1440px) {
    body { padding:0 260px; }   
    .card-main-container {
        flex-direction:row;
        column-gap:48px;
        padding:32px;
    }
    .form-input-container { width:45%; row-gap:40px; }
    .results-output-container {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
    .select-tip-btn { width: 27%; }
    .results-output-reset-button { margin-top:auto; }
}