:root {
    --gray: #2e2e2e;
    --lightGray: #3e3e3e;
    --borderRadius: 8px;
    --paddingH: 24px;
    --paddingV: 12px;
    --fontSize: 18px;
    --padding: 6px 12px;
  }
  
  * {
    font-family: 'Outfit', sans-serif;
    color: #fff;
  }
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  html, body {
    margin: 0;
    background-color: #101010;
  }
  
  body {
    padding: 0% 30%;
    display: grid;
  }
  
  main {
    background-color: var(--gray);
    border-radius: var(--borderRadius);
    padding: var(--paddingH) var(--paddingV);
    display:grid;
    gap: 12px;
  }
  main > * {
    font-size: var(--fontSize);
  }
  
  #price-wrapper {
    font-size: 24px;
    padding-bottom: var(--paddingV);
  }
  
  #price {
    padding: var(--padding);
    border-radius: var(--borderRadius);
    border: 2px solid white;
  }
  
  #input-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  
  input {
    outline: 2px white solid;
    border: none;
    border-radius: var(--borderRadius);
    padding: var(--padding);
    background-color: var(--gray);
    font-size: var(--fontSize);
    flex-grow:1;
  }
  
  button {
    border: none;
    padding: var(--padding);
    color: var(--gray);
    background-color: #fff;
    border-radius: var(--borderRadius);
    outline: 2px solid #fff;
    font-size: var(--fontSize);
  }
  button:hover {
    background-color: var(--lightGray);
    color: #fff;
  }
  button:focus {
    background-color: var(--gray);
    color: #fff;
  }
  
  #drawer {
    display: flex;
    flex-flow: wrap row-reverse;
    justify-content: space-evenly;
    gap: 8px;
  }
  #drawer > *{
    display: flex;
    flex-flow: nowrap row;
    background-color: var(--lightGray);
    padding: var(--padding);
    gap: 4px;
    border-radius: var(--borderRadius);
    flex-grow:1;
  }

  footer {
    text-align: center;
    padding: var(--paddingH);
    font-size: var(--fontSize);
  }
  
  
  @media (max-width: 420px) {
    :root {
    --paddingH: 24px;
    --paddingV: 3%;
    }
    
    body {padding: 0% 2%}
  }
  @media (max-width: 600px) and (min-width: 420px) {
  :root {
    --paddingH: 24px;
    --paddingV: 3%;
    }
    body {padding: 0% 15%}
  }
  @media (max-width: 860px) and (min-width: 600px) {
    :root {
    --paddingH: 24px;
    --paddingV: 3%;
    }
    body {padding: 0% 17.5%}
  }
  @media (max-width: 1200px) and (min-width: 860px) {
    body {padding: 0% 25%}
  }