@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Inconsolata:wght@200..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Karla:ital,wght@0,200..800;1,200..800&family=Kumbh+Sans:wght,YOPQ@100..900,300&family=League+Spartan:wght@100..900&family=Lexend+Deca:wght@100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Young+Serif&display=swap');
: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%);
}
body{
    width: 100%;
    min-height: 100vh;
    height: auto;
    margin: 0;
    background-color: var(--Grey200);
    font-family: 'Space Mono';
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
header{
    width: 8rem;
    margin: auto;
    color: var(--Green900);
    margin-block: 2rem;
    letter-spacing: 0.75rem;
    text-align: center;
}
main{
    width: calc(clamp(20rem,100%,25rem) - clamp(1.5rem,7.5%,2rem));
    height: auto;
    background-color: var(--White);
    padding-inline: clamp(1.5rem,7.5%,2rem);
    padding-block: clamp(1.5rem,7.5%,2rem);
    margin-inline: auto;
    position: relative;
    border-radius: 1rem 1rem 0 0;
}
label{
    color: var(--Grey500);
    cursor: pointer;
}
.errorMessage{
    color: red;
    position: absolute;
    right: 1.875rem;
    display: none;
}
.errorMessage.display{
    display: inline;
}
input[type='number']{
    font-family: 'Space Mono';
    font-weight: 700;
    width: 95%;
    height: calc(2.25rem - 10%);
    border-radius: 0.25rem;
    border: none;
    color: var(--Green900);
    background-color: var(--Grey50);
    cursor: pointer;
    appearance: textfield;
    -moz-appearance: textfield;
    margin-block: 0.5rem;
    margin-block-end: 2rem;
    text-align: right;
    font-size: 1.5rem;
    padding-inline-end: 5%;
    caret-color: var(--Green400);
    background-repeat: no-repeat;
    background-position: 5% 50%;
}
input[type='number']:hover{
    outline: 1px solid var(--Green400);
}
#bill.error,#number.error{
    outline: 2px solid red;
}
#bill{
    background-image: url('images/icon-dollar.svg');
}
input[type='number']:focus{
    outline: 2px solid var(--Green400);
}
#number{
    background-image: url('images/icon-person.svg');
}
fieldset{
    width: 100%;
    padding: 0%;
    margin: 0%;
    border: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block-end: 2rem;
}
legend{
    color: var(--Grey500);
    padding: 0;
}
.radioButton{
    display: block;
    width: 45%;
    height: 3rem;
    font-size: 1.5rem;
    color: var(--White);
    background-color: var(--Green900);
    border-radius: 0.25rem;
    margin-block: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.radioButton input[type='radio']{
    opacity: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
}
.radioButton:has(input[type='radio']:checked){
    color: var(--Green900);
    background-color: var(--Green400);
}
.radioButton:has(:not(input[type='radio']:checked):focus){
    outline: 2px solid var(--Green900);
}
.radioButton:has(input[type='radio']:focus){
    outline: 2px solid var(--Green400);
}
#customNumber{
    width: 40%;
    height: 3rem;
    padding: 0;
    padding-inline-end: 5%;
    margin-block: 0;
    color: var(--Green900);
    margin-block: 0.5rem;
}
.results{
    width: 85%;
    height: 11.25rem;
    padding-inline: 7.5%;
    padding-block: 10%;
    border-radius: 0.5rem;
    color: var(--Grey400);
    background-color: var(--Green900);
    display: grid;
    grid-template-columns: repeat(2,auto);
    grid-template-rows: repeat(3,3rem);
    row-gap: 10%;
}
.text{
    color: var(--White);
    display: block;
}
.result{
    font-size: 2rem;
    color: var(--Green400);
    text-align: right;
}
button[type='reset']{
    background-color: var(--Green400);
    color: var(--Green900);
    border: none;
    border-radius: 0.25rem;
    font-weight: 700;
    grid-column: 1/3;
    cursor: pointer;
    filter: brightness(0.25);  
}
button[type='reset'].active{
    filter: brightness(1);
}
button[type='reset']:focus{
    outline: 2px solid var(--Green400); 
}
@media (min-width:54rem) {
    main{
        width: 50rem;
        height: auto;
    }
    form{
        display: flex;
        justify-content: space-between;
    }
    .calculation{
        width: 46%;
        height: 50%;
        position: relative;
    }
    .errorMessage{
        right: 0px;
    }
    #number{
        margin-block-end: 0rem;
    }
    .results{
        width: 40%;
        height: auto;
        padding-inline: 5%;
        padding-block: 5%;
        position: relative;
    }
    button[type='reset']{
        width: 100%;
        height: 3rem;
        position: absolute;
        bottom: 10%;
    }
}