main.css

.content {
    margin-left: 15px;
    margin-right:15px;
}
.header {
    width: 100%;
    height: 57px;
    display: flex;
    justify-content: space-around;
}
.back {
    width: 57px;
    height: 57px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("./static/img/blankheader.png");
}
.button{
    width:35px;
    height:35px;
    background-color:white;
    border: 1px;
}
.logo {

    width: 74px;
    height: 23px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    background-image: url("./static/img/LUDO.png");
    margin:auto;
}

.notify {
    width: 57px;
    height: 57px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    background-image: url("./static/img/notification.png");
}
.advertisement{
    width:100%;
    height:167px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:grey;
}
.search{
    width:100%;
    height:60px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.category1{
    width:100%;
    height:100px;

    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color:white;
}
.category2{
    width:100%;
    height:100px;
    object-fit: cover;
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color:white;
}
input::placeholder{
    color:blueviolet;
}
.recommendation{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    width:100%;
    height:440px;
    background-color:white;
}
.footer{
    width:100%;
    height:70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color:white;
}