:root {
    --Strongcyan: hsl(172, 67%, 45%);
    --VeryDarkCyan: hsl(183, 100%, 15%);
    --DarkGrayishCyan: hsl(186, 14%, 43%);
    --GrayishCyan: hsl(184, 14%, 56%);
    --LightGrayishCyan: hsl(185, 41%, 84%);
    --VeryLightGrayishCyan: hsl(189, 41%, 97%);
    --White: hsl(0, 0%, 100%);
}
* {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Space Mono', 'JetBrains Mono';
    font-weight: 700;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--LightGrayishCyan);
}
h1 {
    letter-spacing: 5px;
    text-transform: uppercase;
    border: none;
    font-size: 18px;
    color: var(--VeryDarkCyan);
}

section#whole {
    padding: 20px;
    max-width: 750px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(auto-fit,minmax(250px, 320px));
    grid-auto-rows: auto;
    gap: 10px;
    margin: 50px 0px;
    border-radius: 20px;
    background-color: white;
}
section#whole>* {
    height: 100%;
}
.div {
    border-radius: 10px;
}



.first {
    padding: 15px;
}
label {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: var(--DarkGrayishCyan);
}
label:first-of-type {
    margin-top: 0;
}
input {
    border: none;
}
input#bill-el {
    background-image: url(images/icon-dollar.svg);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 10px;    background-position-x: 15px;
}
input#num-el {
    background-image: url(images/icon-person.svg);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position-x: 15px;
}
input#bill-el, input#num-el {
    display: block;
    width: 100%;
    text-align: right;
    padding: 5px;
    font-size: 18px;
    margin-top: 5px;
    background-color: var(--VeryLightGrayishCyan);
    border-radius: 5px;
    color: var(--VeryDarkCyan);
}
input#percent-el {
    display: block;
    width: 100%;
    outline: none;
    border: none;
    text-align: right;
    font-size: inherit;
    background-color: var(--VeryLightGrayishCyan);
    color: var(--VeryDarkCyan);
    height: 100%;
}
input#percent-el::placeholder {
    text-align: center;
    font-size: 18px;
    color: var(--DarkGrayishCyan);
}
form#tip-el {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 40px;
    grid-auto-flow: dense;
    gap: 10px;
}
@media (max-width: 500px) {
    form#tip-el {
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }
}
form#tip-el>* {
    border: none;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: var(--VeryDarkCyan);
    color: white;
}
label#numOfPeople {
    display: flex;
    justify-content: space-between;
}
#peoplezero {
    text-align: right;
    color: rgb(189, 86, 49);
}



.second {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-color: var(--VeryDarkCyan);
    color: white;
}
.amount-grid {
    width: 100%;
    display: grid;
    gap: 15px;
    margin-bottom: 20px;
}
.amt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
    gap: 10px;
    justify-content: center;
    align-items: center;
}
#tipAperson,#totalAperson {
    display: grid;
    justify-content: left;
    text-align: left;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
}
#perPerson {
    display: block;
    font-size: 12px;
    color: var(--DarkGrayishCyan);
    padding-top: 5px;
}
#moneyPerPerson {
    text-align: right;
    font-size: 35px;
    display: flex;
    justify-content: right;
    align-items: center;
    color: var(--Strongcyan);
}
button {
    border: none;
    border-radius: 5px;
    display: block;
    width: 100%;
    text-transform: uppercase;
    padding: 10px;
    background-color: var(--Strongcyan);
    color: var(--VeryDarkCyan);

}

/*Active states*/
:is(input,form#tip-el>div,button):hover,:active {
    cursor: pointer;
}
input:hover,input:active {
    border: 2px solid var(--Strongcyan);
    outline: none;
}
input#num-el:hover,input:active {
    border: 2px solid var(--Strongcyan);
    outline: none;
}
form#tip-el>div:not(:last-child):hover {
    background: var(--Strongcyan);
    color: var(--VeryDarkCyan);
}
button:active {
    border: none;
    outline: none;
}
:is(button,form#tip-el>div:not(:last-child)):active {
    opacity: 50%;
}



/*Footer Elements*/
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }