/*
===========
Variables
===========
*/

 



:root{
 --text-color:#242424;
 --pink:#FB92B6;
 
 
 }
 
 
 /* || RESETS */
 
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
 }
 
 
 body {
   line-height: 1.5;
 }
 
 img, picture, video, canvas {
   display: block;
   max-width: 100%;
 }
 
 button {
   /* all: unset; */
   outline-color: transparent;
 
 }
 
 
 li{
 list-style-type:none;
 }
 
 html {
   height: 100%;
 
 
 }
 
 body {
   width: 100%;
   min-height: 100vh;
 /* height:100%*/
 }

 /*
 ===========
 TYPOGRAPHY
 ===========
 */
*{
  font-size: 1rem;
    font-family: "Irish Grover", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;

 }

 body{
  color: var(--text-color);
 }
 /*
   ===========
   LAYOUT
   ===========
   */
   
 /* || Header  */
/*  ========== */
header{
  /* border: 2px solid red; */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4em;
}

/* Main Container */
/* ============== */
#container{
/* border: 1px solid pink; */
display:flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
}





   /* ||Form */
   input{
    display:block;
    width: 100%;
    padding: 10px 5px;
    outline: none;
    border: none;
    caret-color: var(--pink);
   }

   button{
    background-color: #fff;
    padding: 10px 20px;
   }

   .update-button{
    background-color: #A1ADFA;
  }

   #items-form input{
    border-bottom: 4px solid black;
    margin-bottom: 16px;
   }
   #items-form button{
     border-radius: 24px;
   }

   #form-control{
   position: relative;
   /* border: 2px solid yellow; */
   margin-top: 40px;
   }

   #filter-item-input{
    border-bottom: 2px solid black;
    margin-bottom: 24px;
    padding: 10px 20px;
  }
   #form-control #search-icon{
    position: absolute;
    top:20%;
    left: 0;
   }
   
   /* ||List items  */
   #items-list{
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 100%;
    gap: 16px;
    place-items: center;
   }

   #items-list li{
    width: 80%;
    border: 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
   }

   #delete-btn{
    width: 21px;
    height: 16px;
    background-image:url("data:image/svg+xml;utf8,<svg width='21' height='16' viewBox='0 0 21 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.9 12L10.5 9.4L13.1 12L14.5 10.6L11.9 8L14.5 5.4L13.1 4L10.5 6.6L7.9 4L6.5 5.4L9.1 8L6.5 10.6L7.9 12ZM2.5 16C1.95 16 1.47933 15.8043 1.088 15.413C0.696667 15.0217 0.500667 14.5507 0.5 14V2C0.5 1.45 0.696 0.979333 1.088 0.588C1.48 0.196666 1.95067 0.000666667 2.5 0H18.5C19.05 0 19.521 0.196 19.913 0.588C20.305 0.98 20.5007 1.45067 20.5 2V14C20.5 14.55 20.3043 15.021 19.913 15.413C19.5217 15.805 19.0507 16.0007 18.5 16H2.5Z' fill='black'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    border: none;
   }
 /* || Footer */
 #clear-all-btn{
  background-color: rgba(251, 146, 182,0.2);
  margin-top: 40px;
  border-radius: 8px;
  
 }
 
 
 
 
 
 
 /*
 =================================
 BACKGROUND/IMAGES/COLORS
 =================================
 */
 
 
 
 
  /*
 =============
 ACTIVE-STATES
 =============
 */
 
 
 /*
 =====================================
 RESPONSIVE DESIGN
 =====================================
 */
 
 /* * Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px){}
 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px){}
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px){
  header{
    justify-content: start;
  }

  #container{
    /* border: 2px solid; */
    max-width: 665px; 
  }

  #items-list{
    /* border: 2px solid red; */
    grid-template-columns: 45% 45%;
    justify-content: center;
  }

  #items-list li{
    width: 100%;
    /* border: 2px solid green; */
   
   }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px){}
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px){}*/