*{
    font-family: arial;

}
header{
    width: auto;
    height: 150px;
    background-color: orangered;
    padding: 20px;
    border-radius: 10px;
}

.one a{
    text-decoration: none;
    color: white;
    margin-right: 15px;
}
.logo{
    margin-top: 20px;
}

.search form input{
    width: 650px;
    font-size: 25px;
    margin-left: 300px;
    border-radius: 9px;
    border: 1px solid black;
    
    
}
.search-bar{
    margin-top: -55px;
}
.extra a{
    font-size: 30px;
    text-decoration: none;
    color: white;
    margin-right: 25px;
    
    
}

.extra-bar{
    margin-left :1000px;
    margin-top: -35px;
    
}

.extra a:hover{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 7px;
}

.side-bar{
    height: 350px;
    width: 300px;
    border: 1px solid;
    border-radius: 10px;
    margin: 10px;
    
}
.side-bar ul li{
    margin-bottom: -10px;
}
.side-bar ul li:hover{
    background-color: gainsboro;
    color: orangered;
    cursor: pointer;
}

.article{
    height: 350px;
    width: auto;
    border: 1px solid;
    border-radius: 10px;
    /* margin-right: 300px; */
    margin-left: 320px;
    margin-top: -360px;
    background-image: url("download.jpg");
    
}
.inline{
    text-align: center;
}
.inline:hover{
    background-color: pink;
}
.inline ul li{
    display: inline-block;
    margin-right: 40px;
}
.grocery{
    width: 10%;
    /* height: 10%; */
    border: 3px solid #000;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 30px 15px 30px 15px;
    /* box-shadow: 30px 20px 10px rgba(0,0,0, 0.5); */
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer;
} 
.grocery>img{
    width: 100px;
    height: 100px;
}
.grocery:hover{
    box-shadow: 5px 5px 7px #000;
}
.fotter-bar{
    background-color: gray;
    width: auto;
    height: 200px;
    border: 10px solid black;
    
}
.fotter{
    text-align: center;
    cursor: pointer;
}