/* default  setup */ 
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Thasadith:ital,wght@0,400;0,700;1,400;1,700&display=swap');


*{
    font-family: "playfair display", serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
  }
  body{
    background-color: #fdfdfd;
  }
  h1, h2, h3, h4,h5, h6, span{
    color: #181d1e;
    text-align: center;
    line-height:1.25;
  } 
  
  p{
    font-family: 'thasadith','sans-serif';
    line-height:1.25;
    font-size: 16px;
  } 
  li{
  list-style-type: none;
  }
  a{
    text-decoration: none;
  }
  img{
    width:100%;
  }
  /*reusable css*/
  .container--row{
    width:100%;
    max-width:1200px;
    margin:0 auto;
        
  }
 .container--pad{
    padding: 46px 0;
 }
  
  .no-cursor{
    cursor: not-allowed;
  }
  button{
    cursor: pointer;
  }
  
  button:active{
    transform: translateY(1px);
  }
  /*NAV  */
  
  nav{
    height: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url("assets/drinks-32000.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;

  }
  .logo-container{
    width: 250px;
  }
  .search-container{
    background-color:rgba(213, 214,214, 0.5);
    box-shadow: 1px 2px 16px 5px  #696868;
    backdrop-filter: blur(4px);
    padding: 8px;
    border-radius: 4px;
    
 
   

    

  }
  .search-title{
    font-style: italic;
    font-weight: 600;
    font-size: 30px;    
  }
  .search-bar{
    margin-top:6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    border: solid #a5a5a5 2.5px;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }
  .search-bar:hover{
    border: solid #181d1e 2.5px;
  }
.search-bar:focus-within{
    border: solid #2274A5 2.5px;  
}

   input{
    
    border:1px solid  #dcdfe6;
    color: #606266;
    height: 40px;
    line-height: 40px;
    outline:none;
    border: none;
    padding: 0 16px;
    width: 100%;
    max-width: 200px;
    font-size: 16px;
   }
   .search-bar--button{
    border: none;
    background: none;
    font-size: 20px;
   }
   .search-bar--button:hover{
    color: #2274A5;
   }
  
   /*section  for  moment and  special*/
  .sidetoside{
    display: flex;
    justify-content: space-around;
    
  } 
.section--layout{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

  .cocktail__img-container{
    margin-top: 8px;
    max-width: 300px;
    
    
    
  }
  .instruc{
    max-width: 350px ;
  }
.cocktail__loading{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  font-size: 60px;

}
.cocktail__loading--spinner{
 display:none;
}
.cocktail__loading .cocktail__loading--spinner{
display: block;
}

.fa-spinner{
  animation: rotate 600ms  infinite linear;
}
@keyframes rotate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

/*Cocktail html page*/

.cocktails-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start; 
width: 100%;
margin-bottom: 16px;


}

.cocktail__item{
  margin: 16px;
  
  text-align: center;
}

.space{
  width: 432px;
}


.found-title{
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 24px;
}
.instruc__max{
  max-width: 432px;
}
.cocktail-list__img-container{
  max-width: 400px;
}

  /*Small phones, tablets, large smartphone */ 
  @media (max-width: 768px){
    
  } 
  /*Small Phones*/
  @media (max-width: 480px){
    
  }