body{
   margin: 0;
   scroll-behavior: smooth;
   background-color:#f3ead7;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header{
   background-color: #af1d12;
   height: 50px;
   color: #ffff;
   display: flex;
   gap: 8px;
   padding: 10px;
   align-items: center;
}

header img{
   width: 40px;
   object-fit:contain;
}

nav{
   background-color: #000000;
   height: 50px;
   display: flex;
   justify-content: center;
}

.input_box{
position: absolute;
top: 15px;
width: 145px;
height: 140px;
background-color: #ffff;
border-radius: 100%;
border: 60px solid #000000;
}

input{
position: absolute;
top: 55px;
width: 90px;
border: none;
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #cecccc7a;
}

.navbar{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
}

.main_container{
   margin: 320px 20px 50px 20px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 16px;
}

::-webkit-scrollbar {
   width: 8px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px rgb(110, 110, 110); 
   border-radius: 10px;
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: rgb(228, 179, 20); 
   border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #b30000; 
 }

 .loadMoreContent{
   display: flex;
   justify-content: center;
 }

 button{
   width: 150px;
   padding: 10px 0 10px 0;
   border-radius: 10px;
   border: none;
   background-color:#071e68dc;
   color: #ffff;
   transition: 225ms;
   z-index: 2;
 }

 button:hover{
   transform: scale(1.1);
   box-shadow: 0 0 15px #ffee10;
   color: #ffee10;
   box-shadow: 0 0 5px #ffee10;
   text-shadow: 0 0 5px #ffee10;
 }

 .search_btn{
  width: 20px;
  position: relative;
  top: 55px;
  left: 110px;
  cursor: pointer; 
  object-fit:fill;
  padding: 3px;
  border-radius: 9px;
  background-color: #6866661c;
 }
 .search_btn:hover{
  width: 18px;
  object-fit:cover;
  transition: 225ms;
  background-color: #6866661c;
 }

 #errorContent{
  color: #e00a0af8;
  position: relative;
  top: 50px;
  left: 5px;
  font-size: 14px;
  width: 135px;
  text-align: center;
 }

 /* responsive */

 @media (max-width:451px){
  .input_box {
    position: absolute;
    top: 35px;
    width: 145px;
    height: 140px;
    background-color: #ffff;
    border-radius: 100%;
    border: 20px solid #000000;
}
}

@media (max-width:351px){
  .input_box {
    position: absolute;
    top: 55px;
    width: 145px;
    height: 140px;
    background-color: #ffff;
    border-radius: 100%;
    border: 20px solid #000000;
}
}