style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
.body{
    color: black;
    overflow-x: hidden;
}
.container{
    padding: 20px;
    display:flex;
    width: 100vw;
}
.blur{
    filter: blur(8px);
  -webkit-filter: blur(8px);
}
.mealListDiv,
.listDiv{
    width: 20vw;
    padding: 20px;
    height: 82vh;
    overflow: scroll;
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

.recipeDiv{
    display: flex;
    flex-wrap: wrap;
    height: 95vh;
    overflow: scroll;
    width: 55vw;
    padding: 20px;
    font-size: 1rem;
   grid-row: 1/3;
   grid-column: 1/3;
   overflow-x: hidden; /* Hide horizontal scrollbar */
}
.recipe{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px;
    max-height: 275px;
}

.meal-list,
.shopping-list{
    padding: 2px;
    width: 300px;
    display: flex;
    justify-content: space-between;
}



.recipeImg{
   max-height: 200px;
    width: 300px;
    
}

button{
    cursor: pointer;
    height: 30px;
    background-color: rgba(0, 0, 0, .1);
    border: none;
    outline: none;
    min-width: 30px;
    
}
button:hover{
    background-color: rgba(0, 0, 0, .5);
    color: white;
}
button:active{
    background-color: rgba(0, 0, 0, .7);
    color: white;
}

.addBtn{
    width: 300px;
    height: 35px;
}
.fullListBtn{
    width: 125px;
}
.buttonDiv{
    display: none;
    flex-direction: column;
    gap: 10px;
    width: fit-content;
    max-height: fit-content;
    padding: 15px;   
    align-items: center;
    background-color: white;
    position: absolute;
    top: 5%;
}
.instructions{    
    font-size: 1.15rem;   
}

.addItemDiv{    
    display: none;
    height: 50px;
    padding: 5px;    
    width: fit-content;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    left: 12%;
    background-color: rgba(0, 0, 0, .7);
    color: white;
    height: 250px;
    z-index: 9997;
}
.addItemBtn{
    width: 300px;
    
}

.servingSizeDiv{    
    display: none;
    height: 30px;
    padding: 5px;
    position: fixed;
    left: 70%;
    top: 20px;

    
}
.hamburgerIcon{
    width: 25px;
    height: 25px;
    position: relative;
    top: 10px;
}
.saveListBtn{
    width: 300px;
    height: 30px;
    padding: 5px;
    grid-column:3/4;
    grid-row: 3/4;
}
.clearListBtn{
    width: 300px;
    height: 30px;
    padding: 5px;
    grid-column:1/2;
    grid-row: 3/4;
}
.consolidateBtn{
    width: 300px;
    height: 30px;
    padding: 5px;
    grid-column:4/5;
    grid-row: 2/3;
    font-size: .8rem;
    display: flex;
   justify-content: center;
    text-align: center;
    align-items: center;
}
.pdfBtn{    
    width: 300px;
    height: 30px;
    padding: 5px;
    grid-column:2/3;
    grid-row:3/4;
}

.searchDiv{
    height: 50px;
    max-width: fit-content;
    padding: 5px;    
    grid-column: 1/3;
    grid-row: 1/2;
}
.searchInput{
    height: 25px;
    width: 150px;
    padding: 5px;
}
.searchBtn{
    width: 125px;
}


.shopping-list{
    width: 300px;
    grid-row: 2/3;
    grid-column: 3/4;
    
}

.aisleSelect,
.input{
    height: 25px;
    padding: 2px;
    max-width: 150px;
}
.unitInput,
.qtyInput{
    width: 40px;
    
}
.meal-list{    
    grid-row: 2/3;
    grid-column: 4/5;
}
.viewListBtn{
    display: none;
}
.flex{
    display: flex;
    flex-direction: column;
}
.hide{
    display: none;
}
.shopping-list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;      ;   
    min-width: 100%;
    padding: 2px;
    font-size: 1rem;
    height: 35px;
}
.removeBtn{
    width: 30px;
    height: 30px;
    display: flex;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    
}

.addItemFormBtn{
    width: 300px;
    display: block;
    grid-column: 3/4;
    grid-row: 1/2;
}
.aisleOrderDiv{
    display: none;
}
.showHideAisleBtn{
    width: 300px;
}
.instructions{
    display: block;
}
.instructionsBtn{
    width: 300px;
}
.instructionsDiv{
    display: none;
    background-color: white;
    padding: 50px;
    position: absolute;
    top: 10%;
    left: 25%;
    width: 450px;
    height: fit-content;
}
.closeInstrtuctionsBtn{
    position: relative;
    left:45%;
    z-index: 9999;
}

.list-header{
    font-size: x-large;
    text-decoration: underline;
    
}
@media screen and (max-width: 800px) {
    .closeInstrtuctionsBtn{
        position: fixed;
            top: 6%;
            left:80%;
        z-index: 9999;
    }
    .consolidateBtn{
        display: none;
    }
    .instructionsDiv{
       background-color: white;
        top: 5%;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .addItemFormBtn{
        display: none;
        
        text-align: center;
    }
    .addItemDiv{
        display: none;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        background-color: rgba(0, 0, 0, .7);
        color: white;
        height: 250px;
        
    }

    .addItemBtn{
        display: block;
        background-color: rgba(255, 255, 255, 0.9);
    }
    .consolidateBtn{
        display: none;
    }
    .pdfBtn{
        display: none;
    }
    .servingSizeDiv{
        display: block;
        position: relative;
        top: 15px;
        left: 25px;
    }
  
    .container{
        padding: 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .listDiv{
        display: none;
        width: 100%;
        height: auto;
        max-height: 50%;
        overflow: scroll;
        flex-direction: column;
        align-content: space-around;
        justify-content: space-around;
        overflow-x: hidden;
        position: relative;
        top: 30px;
    }
 
    .mealListDiv{
        display: flex;
        width: 100%;  
        flex-direction: column;
        height: fit-content;
        overflow: scroll;     
        overflow-x: hidden; 
    }
  
    .shopping-list{
        display: flex;
        justify-content: space-around;   
        overflow: hidden;
        width: 100%;
        padding: 2px;
        font-size: 1rem;       
}
    
    .recipeDiv{
        width: 100%;
        overflow: scroll;
        height: 80vh;
        justify-content: center;
    }
    .buttonDiv{
        display: none;
        flex-direction: column;
        height:fit-content;
        margin: 15px;
        align-items: center;
        width: 100%;
        justify-content: space-around;
        background-color: white;
        align-content: center;
        z-index: 9998;
    }
    .viewListBtn{
        display: block;
        width: 100px;
        position: absolute;
        top: 15px;
        left: 60%;
    }
    .searchDiv{
       display: block;
       background-color: rgba(0, 0, 0, .1);
    }
    .menuDiv{
        width: 100%;
        height: 60px;
        position: fixed;
        top: 0;
        background-color: white;
        z-index: 9999;
        display: flex;
        
    }
}