/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}


ul, li , input, button{ 
  padding: 0;
  margin: 0;
  font-family: inherit;
}

@font-face { 
    font-family: "MonoSpace-Bold";
    src: url("./fonts/SpaceMono-Bold.woff2");
    font-display: swap;
    font-weight: 700; 
}

:root { 
    /* ### Primary */
    --Green-400: hsl(172, 67%, 45%); 
    /* ### Neutral */
    --Green-900: hsl(183, 100%, 15%);
    --Grey-500: hsl(186, 14%, 43%);
    --Grey-400: hsl(184, 14%, 56%);
    --Grey-200: hsl(185, 41%, 84%);
    --Grey-50: hsl(189, 47%, 97%);
    --White: hsl(0, 100%, 100%);
}


body { 
  font-family: "MonoSpace-Bold";
  background-color: var(--Grey-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  min-height: 100vh;
}

.container { 
  display: flex;
  flex-direction: column; 
  gap: 2rem;
  background-color: var(--White);
  padding: 2rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 1020px;
}

/******* Left Side ******/
.left-side { 
  padding: 1em;
}

/***** Input labels ******/

.label-bill, 
.number-of-people-label { 
  display: flex;
  flex-direction: column;
  gap: .8em;
  color: var(--Grey-500);
  position: relative;
  margin-bottom: 1em; 
}

.label-bill::before { 
  content: url("./images/icon-dollar.svg");
  position: absolute;
  top: 60%;
  left: 3%;
  z-index: 1;
}

.number-of-people-label:before {
  content: url("./images/icon-person.svg"); 
  position: absolute;
  top: 60%;
  left: 3%;
  z-index: 1;
}

.error-mess:after { 
  content: "Can't be zero"; 
  position: absolute;
  top: 0%;
  left: 65%;
  z-index: 2;
  font-size: 19px;
  color: tomato;
}


/* *********** Input fileds ********/

.user-bill-input, 
.number-of-people-input {
  position: relative; 
  border: 2px solid transparent;
  outline: none;
  background-color: var(--Grey-50);
  width: 100%;
  color: var(--Green-900);
  font-size: 1.5rem;
  text-align: right;
  padding: .3em;
  padding-inline: 1rem;
}

.user-bill-input:hover, .number-of-people-input:hover { 
  border: 2px solid var(--Green-400); 
}

.select-tip-label { 
  margin-bottom: .5em;
  color: var(--Grey-500);
}

.tip-buttons-grid { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .7rem; 
  margin-bottom: 1em;
}

.select-tip-button { 
  background-color: var(--Green-900);
  color: var(--White);
  border: none;
  padding: .2rem .3rem;
  font-size: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s all ease;
}

.select-tip-button:hover { 
  background-color: var(--Grey-200);
  color: var(--Green-900);
}

.clicked { 
  background-color: var(--Grey-200);
  color: var(--Green-900);
}

.select-tip-custom { 
  width: 100%;
  border: 2px solid transparent;
  outline: none;
  font-size: 18px;
  background-color: var(--Grey-50);
  text-align: center;
}

.select-tip-custom::placeholder { 
  color: var(--Grey-400); 
  font-size: 1.3rem;
}

.select-tip-custom:hover { 
  border: 2px solid var(--Green-400);
}

/******* Rigth Side *********/

.right-side { 
  flex-basis: 75%;
  background-color: var(--Green-900);
  padding: 1.5rem;
  border-radius: 8px;
  display: grid;
}

.amount-con, 
.total-con { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: start;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.amount-text h2, 
.total-text h2 { 
  color: var(--White);
  font-size: 1.3rem;
}

.amount-text p, 
.total-text p { 
  color: var(--Grey-400);
  font-size: .90rem;
}

.price-amount, .price-total { 
  font-size: 2.5rem;
  color: var(--Green-400);
}

.reset-button { 
  height: fit-content;
  align-self: end;
  font-size: 1.3rem;
  border: none;
  background-color: var(--Green-400);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: var(--Green-900);
}

.reset-button:hover { 
  background-color: var(--Grey-200);
  cursor: pointer;
}



@media(min-width: 850px) { 
  .container { 
    flex-direction: row;
  }

  .tip-buttons-grid { 
    grid-template-columns: repeat(3, 1fr);
  }
}