* {
    background-color: rgb(23, 23, 23);
}

.sidebar1 {
    width: 250px;
    /* height: 400px; */
    /* border: 4px solid white; */
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.logo {
    margin-right: 00px;
}

.icon {
    margin: 20px;
    margin-top: 15px;
}

.side {
    display: flex;
    width: 100%;
    height: 50px;
}
.sidebar :hover{
  
 background: rgb(90, 90, 90);  
  filter: brightness(1.2);
}
.sidebar2 {
    width: 250px;
    border-bottom: 1px solid rgb(63, 63, 63);
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.sidebar3 {

    width: 250px;
    border-bottom: 1px solid rgb(63, 63, 63);
    color: white;
    display: flex;
    flex-wrap: wrap;
}

.topbar {
    height: 20px;
    width: 100%;
    border: 3px solid;
}

.parent {
    display: flex;
}

.sidebar {
    background-color: rgb(132, 129, 129);

}

#src {
    border: 1px solid grey;
    margin-left: 300px;
    width: 700px;
    height: 50px;
    align-items: flex-start;
}

.main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
}
.topbar{
    display: flex;
}
.midbar{
    display: flex;
    height: 60px;
    width: 100%;
    color: white;
    border-top: 2px solid rgb(52, 51, 51);
    border-bottom: 2px solid rgb(62, 62, 62);
    margin-top: 40px
}
.all p{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(74, 74, 74);
    height: 30px;
    width: 100px;
    margin-right: 15px;
    border-radius: 20px;
}
.coke{
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
}
.coke{
   height: 340px;
   width: 300px;
   /* border: 3px solid white; */
   margin-right: 20px;
}
.content{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-left: 30px;
}
.cokimg{
 width: 400px;
     margin-bottom: 0px;

}