html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 10px;
    
}
:root {
    --Green400: hsl(172, 67%, 45%);

    --Green900: hsl(183, 100%, 15%);
    --Grey500: hsl(186, 14%, 43%);
    --Grey400: hsl(184, 14%, 56%);
    --Grey200: hsl(185, 41%, 84%);
    --Grey50: hsl(189, 47%, 97%);
    --White: hsl(0, 100%, 100%);

    --spacemonoBold: 700;

    --fspreset1: 4.8rem;
    --fspreset2: 3.2rem;
    --fspreset3: 2.4rem;
    --fspreset4: 2rem;
    --fspreset5:1.6rem;
    --fspreset6: 1.3rem;

    --lhpreset1: 7.1rem;
    --lhpreset2: 4.7rem;
    --lhpreset3: 3.6rem;
    --lhpreset4: 3rem;
    --lhpreset5: 2.4rem;
    --lhpreset6: 1.9rem;

    --lspreset1: -1px;
    --lspreset2: -0.67px;
    --lspreset3: 0px;
    --lspreset4: 0px;
    --lspreset5: 0px;
    --lspreset6: 0px;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--Grey200);
    min-height: 100vh;
    font-family: 'Space Mono', serif; 
    margin: 0;
    padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
label {
    font-size: var(--fspreset5);
    color: var(--Grey500);
    line-height: var(--lhpreset5);
    letter-spacing: var(--lspreset5);
    font-family: 'Space Mono', serif; 
}

h2 {
    font-size: var(--fspreset5);
    color: var(--White);
    line-height: var(--lhpreset5);
    letter-spacing: var(--lspreset5);
    margin: 0;
}
h3 {
    font-size: 3.2rem;
    color: var(--Green400);
    line-height: auto;
    letter-spacing: var(--lspreset2);
    margin: 0;
    
}
p {
    font-size: var(--fspreset6);
    color: var(--Grey400);
    margin: 0;
}

.logo {
    margin-bottom: 4.86rem;
    margin-top: 5rem;
}

.main-container {
    background-color: white;
    padding: 3.2rem 2.4rem;
    border-radius: 2.5rem 2.5rem 0 0;
    margin: 0;
}
.bill-header {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: 3.2rem;
}
.input-field {
    padding: 1.6rem 2.4rem 1.6rem .8rem;
    background-color: var(--Grey50);
    border-radius: .5rem;
    text-align: right;
    font-size: var(--fspreset3);
    color: var(--Green900);
    border: none;
    font-family: 'Space Mono', serif; 
}
.input-field::placeholder {
    opacity: 35%;
}
#bill-input{
    background-image: url(./images/icon-dollar.svg);
    background-position: 5%;
    background-repeat: no-repeat;
}
.tip-selection-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 3.2rem;
    gap: .8rem;
}
.tip-options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.6rem;
    place-content: center;
}

.tip-options-container button {
    background-color: var(--Green900);
    color: white;
    font-size: var(--fspreset3);
    line-height: var(--lhpreset3);
    letter-spacing: var(--lspreset3);
    font-family: 'Space Mono', serif; 
    padding: .8rem 1.6rem;
    border-radius: .5rem;
    min-width: 14.7rem;
    cursor: pointer;
    border: none;
}
.tip-options-container input {
    font-size: var(--fspreset3);
    line-height: var(--lhpreset3);
    letter-spacing: var(--lspreset3);
    font-family: 'Space Mono', serif; 
    padding: 0;
    border-radius: .5rem;
    min-width: 14.7rem;
    border: none;
    text-align: center;
    background-color: var(--Grey50);
    color: #547878
}
.tip-options-container button.active {
    background-color: #9FE8DF; 
    color: var(--White);
}

.people-container {
    gap: .8rem;
    margin-bottom: 3.2rem;
    display: flex;
    flex-direction: column;
}

#people-Input {
    background-image: url(./images/icon-person.svg);
    background-position: 5%;
    background-repeat: no-repeat;
}
.results-container {
    background-color: var(--Green900);
    border-radius: 1.5rem;
    padding: 2.4rem;
}
.results-details {
    margin-bottom: 3.2rem;
}
.tip-amount-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.4rem;
}
.total-amount-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.reset-button {
    padding: .8rem 3.2rem;
    width: 100%;
    background-color: #0D686D;
    border: none;
    height: 4.8rem;
    border-radius: .5rem;
    color: #085C61;
    font-size: var(--fspreset4);
    font-family: 'space mono', serif;
    letter-spacing: var(--lspreset4);
    line-height:  var(--lhpreset4);
}
.labels {
    display: flex;
    justify-content: space-between;
}
#error {
    color: #E17052;
    display: none;
}


@media screen and (min-width: 768px) {
    body {
        padding: 8rem;
    }
    .logo {
        margin-top: 0;
    }
    .main-container {
        padding: 4.8rem 8rem;
        border-radius: 2.5rem;
    }
    .tip-options-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .results-container {
        padding: 2.4rem 3.2rem;
    }
    .results-container h3 {
        font-size: var(--fspreset1);
    }
}
@media screen and (min-width: 1024px) {
    .main-container {
        padding: 3.2rem;
        max-height: 48.1rem;
        max-width: 92rem;
    }
    .content-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4.8rem;
    }
    .results-container {
        padding: 2.4rem 3.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .reset-button {
        margin-top: 12.8rem;
        cursor: pointer;
    }
    .reset-button:hover {
        background-color: #9FE8DF;
    }

    .input-field:focus {
        outline: 1px solid #9FE8DF;
    }
    .tip-options-container button:hover {
        background-color: #9FE8DF;
        transform: scale(1.1);
    }
    
}