style.css

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    overflow: hidden;
}
.container1{
    width: 100%;
    min-height:95vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-image:url("Resources/Images/bg1.jpeg") ;
    background-size: contain;
}

.hidden{
    display: none;
}


.flexRow{
    display: flex;
    flex-direction: row;
}

.flexCol{
    display: flex;
    flex-direction: column;
}

.space{
    justify-content: space-between;
}


.btn1 {
    width: 100px;
    height: 50px;
    border-radius: 20px;
    border: none;
}
.btn1:hover{
    color:red;
}


.dropItem{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

.incDec{
    margin: 5px;
    padding: 5px 5px;
    width: 60px;
    border-radius: 20px;
    border: none;

}

/* Start Of Left Side Style */
.leftSide{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
}

.product{
    width: 300px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    margin-left: 10px;
}

.product:nth-child(odd){
    border-radius: 15px;
    background: #976f47;
}
.product:nth-child(even){
    border-radius: 15px;
    background-color: #e1cbb1;
}

.product .image1{
    width: 250px;
    height: 200px;
    border-radius: 20px;
}

/* End Of Left Side Style */


/* Start Of Right Side Style */
.rightSide{
    width: 100%;
    height: 85vh;
    display: grid;
    grid-template-rows:1fr 2fr;

}

#droppable{
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    /*overflow-y: scroll;*/

}

#buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}