* {
   font-family: "Poppins", sans-serif;
   padding: 0;
   margin: 0;
 }
 
 nav {
   background-color: #333333;
   color: white;
   padding: 20px;
 
 }
 
 nav a {
   color: white;
   text-decoration: none;
 }
 
 #search-bar {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 12px;
   /* margin-left: 50%;
   transform: translateX(-50%);
   display: inline-block; */
 }
 
 #search-bar-input {
   width: 300px;
   height: 30px;
   border: 1px solid #333333;
   border-radius: 8px;
   padding: 0px 8px;
   margin-right: 8px;
 }
 
 .button {
   min-width: 100px;
   height: auto;
   border: none;
   border-radius: 4px;
   background-color: #333333;
   color: white;
   cursor: pointer;
 }

 #search-bar-button{
    padding: 6px 2px;
 }

 #search-bar-button:hover{
  background-color: #4c4c4c;
 }
 
 #sorting {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-bottom: 8px;
 }

 #sort-date-btn{
  padding: 6px 10px;
 }

 #rating-toggle{
  padding: 6px 10px;
 }
 
 .button--white {
   background-color: #d4d6d5;
   color: #000;
   padding: 4px;
 }

 .button--white:hover{
  background-color: #a6a6a6;
}
 
 #tabs {
   margin-left: 20px;
 }
 
 #movie-list {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 20px;
   position: relative;
 }
 
 .movie {
   width: 180px;
   /* height: 300px; */
   height: auto;
   border: 1px solid black;
   font-size: 10px;
   border-radius: 12px;
   overflow: hidden;
 }

 .movie-poster {
   /* width: 200px;
   height: 200px; */
   max-width: 100%;
   height: 200px;
   object-fit: cover;
  }
  
  .movie-poster:hover{
    
 }
 
 .movie-details{
  /* border: 1px solid red; */
 }

 .movie-details h2 {
   font-size: 14px;
   text-align: center;
   margin-bottom: 4px;
 }
 .movie-details p {
   padding: 4px;
   font-size: 14px;
   /* border: 2px solid red; */
 }

 .movie-details p .ratingStar{
   margin-left: 2px;
   color: rgb(255, 217, 0);
 }
 
 .movie footer {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   padding: 4px;
   /* border: 1px solid red; */
 }

 .movie footer .date{
    font-size: 14px;
 }
 
 
 .like {
   font-size: 20px;
   cursor: pointer;
 }

 .red-heart{
  color: red;
 }

 
 .no-fav{
   display: none;
  }
  .show-no-result{
    display: block;
    margin-top: 20px;
 }

  
 .no-fav h1{
   margin-left: 20px;
   color: #333333;
 }
 
 .navigation-buttons {
   display: flex;
   margin-top: 16px;
   justify-content: center;
   align-items: center;
   gap: 8px;
 }

 .pagination-hidden {
    display: none;
 }

 #footer{
   background-color: #333333;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 16px;
 }

 #footer p{
   color: white;
 }