*{
padding:0;
margin:0;
box-sizing:border-box;
}
html{
font-size:10px;
scroll-behavior:smooth;
}
body{
min-height:100vh;
display:flex;
justify-content:center;
}
.container{
max-width:50rem;
width:100%;
background-color:hsl(185, 41%, 84%);
display:flex;
align-items:center;
padding-top:3rem;
gap:3rem;
flex-direction:column;
}
.container > h1{
color:hsl(184, 14%, 56%);
}
.wrapper{
background-color:hsl(0, 0%, 100%);
width:100%;
border-radius:3rem;
padding:2rem;
display:flex;
flex-direction:column;
}
h4{
font-weight:700;
font-size:1.4rem;
color:rgba(0,0,0,0.6);
}
.bill{
width:100%;
position:relative;
}
.input-box {
position:relative;}
input[type="number"]{
width:100%;
padding:1rem;
font-size:2rem;
color:hsl(183, 100%, 15%);
font-weight:1000;
text-align:right;
background-color:hsl(189, 41%, 97%);
border:none;
}
.bill img{
position:absolute;
top:50%;
transform:translateY(-50%);
left:2rem;
}
.percent-box {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1.4rem;
}
.percent-box input[type=button]{
width:calc(50% - 1.4rem);
padding:1rem 2rem;
font-weight:500;
font-size:2rem;
text-align:center;
border:none;
border-radius:0.5rem;
}
.input{
color:#fff;
background-color:hsl(183, 100%, 15%);
}
.input-active{
background-color:hsl(172, 67%, 45%);
color:hsl(183, 100%, 15%)
}

.percent-box input:last-child {
background-color:hsl(189, 41%, 97%);
color:hsl(184, 14%, 56%);
}
.flex-col{
display:flex;
flex-direction:column;
gap:1rem;
margin-top:2rem;
}
.second-container{
background-color:hsl(183, 100%, 15%);
align-items:center;
justify-content:center;
padding:2.5rem;
border-radius:0.5rem;
}
.results{
width:100%;
}
.line{
display:flex;
align-items:center;
justify-content: space-between;
}
.column {
display:flex;
flex-direction:column;
gap:0.5rem;
}
.column p{
color:#fff;
font-size:1.4rem;
font-weight:500;
}
.column span{
color:rgba(255,255,255,0.6);
font-size:1.1rem;
}
.result{
color:hsl(172, 67%, 45%);
font-size:2.8rem;
display:flex;
align-items:center;
}
.reset{
width:100%;
}
.result span{
font-size:0.7em;
}
.reset input {
width:100%;
padding:1.2rem;
font-size:1.4rem;
background-color:(185, 41%, 84%);
font-weight:500;
border:none;
}
.flex {
display:flex;
align-items:center;
justify-content: space-between;
}

.reset-btn{
background-color:hsl(172, 67%, 45%);
color:#fff;
}