index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;/*padding + border are included in width */
    font-family:sans-serif;

}
 body{
    background-color: black;
    padding-top: 70px;
 }
/* ----------------------------Header---------------------------------- */
/* .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#79d13097;
    /* box-shadow:2px 10px 4px 0px rgba(153, 205, 50, 0.267); */
               /* verticle horizontal blur spread color */
    
   /* height:70px
    
} */
.filter{
    /* display: flex;
    height: 400px;
    width: 300px;
    gap:15px;
    margin:15px;
    background-color: aliceblue; */
}
.filter > .searchContainer{
   
}
/* .logo-container{
    width:20px;
    display: flex;
    height: 100%;
    align-items: center;
    margin:10px ;
} */
/* .logo{
     height:90%;/*parent height must to given  */
     /* border-radius:500px;
    

} */ 
.nav-items>ul{
    display: flex;
    list-style: none;
    padding-right: 50px;
    

}
.nav-items>ul>li{
    padding: 10px;
    margin:10px;
    font-size: 18px;
    letter-spacing:1px;
    
 
}
/* .loginbutton{
    background-color:#24b4edc7;
    border-radius: 10px;
    color:black;
} */
/* ------------------------------------------------------body------------------------------------------------------ */
.single-line{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    
    }
.res-container{
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    /* border:1px solid black; */
    width:90vw;
    justify-content:flex-start;
}
.res-card{
    background-color: whitesmoke;
    height:300px;
    width:220px;
    margin:20px;
    box-shadow:0px 0px 10px 7px #cbc9c97b;
    border-radius:25px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
     
}
.res-card:hover{
    box-shadow:0px 0px 10px 10px rgba(203, 201, 201, 0.482);
}
.res-img{
    width: 100%;
    height:60%;
    object-fit: cover;
    border-radius:25px 25px 10px 10px;
}
.res-card  .name{
    text-align: center;
    color:rgb(255, 145, 0);
}
.res-card .cuisine{
    font-size: 0.7rem;
    color:grey;
    text-align: center;
    margin-left:10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.avgRating{
    background-color: rgb(5, 179, 3);
    border-radius: 10%;
    padding:0 10px;
    margin-bottom: 10%;
}
.con-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px;
}
.con-container > *{
    background-color: whites;
    width:150px;
    box-shadow:0px 0px 10px 4px #cbc9c97b;
    border-radius: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.shimmerContainer{
    display: flex;
    flex-direction:row;
    gap:10px;
    flex-wrap:wrap;

}
.shimmerCard{
    height:100px;
    width:150px;
    background-color: rgba(128, 128, 128, 0.433);
    border-radius: 10%;
}
 
.shimmerContainer2{
    margin:100px 0 0 100px;
    display: flex;
    flex-direction:row;
    gap:20px;
    flex-wrap:wrap;

}
.shimmerCard2{
    height:300px;
    width:250px;
    background-color: rgba(128, 128, 128, 0.336);
    border-radius: 10%;
}
.shimmerContainer3{
    margin:10px;
    display: flex;
    flex-direction:column;
    gap:20px;

}
.shimmerCard3{
    height:70px;
    flex-grow:1;
    background-color: rgba(128, 128, 128, 0.41);
    border-radius:0;
}
/* ------------------------------------------About US page--------------------------------- */
/* .user-card{
    margin:20px;
    padding: 20px;
    line-height:2rem;
    width: fit-content;
    border: 1px solid black;
} */
.shadowcss{
    box-shadow:0px 2px 6px 2px #cac8c87b;
}
.rotatable-element {
    transition: transform 0.5s ease; /* Add a smooth transition */
  }
  
  .rotated {
    transform: rotate(180deg); /* Adjust the rotation angle as needed */
  }
  /* .transitioncss{
    animation: mymove 14s linear;
    transition: height 14s;
  }
  
  @keyframes mymove {
    0%{height: 0px;}
    50%{height:0px}
    100%{height:auto;}
  } */
  /* -----------------------------------------------------------------
   */
.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
    z-index: 60;
    position:fixed;
    top:10vh;
    left:30vw;
    width:30vw;
    text-align: center;
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}

.failure {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    display: none;
}
.cleared{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    display: none;
}