body{
  background:  radial-gradient(circle, rgb(79, 161, 248), rgb(208, 210, 255));
}




#container{
  width: 80%;
  max-width: 1000px;
  display:flex ;

 height: auto;
 justify-self: center;
flex-direction: column;


}

#zoekbox{
   position: relative;
   margin-top: 50px;
  display: flex;

  




}
#Resultatenbox{
   position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 85vh;
  gap: 10px;
  flex-direction: column;
 
  
}

#zoekbalk{
  outline: none;
  
  flex: 1;      
  display: block;
margin-left: auto;
  border: none;
width: 100%;
border-radius: 5px;

height: 40px;
  background-color: rgb(78, 241, 249);
}

#zoekKnop{
background-color: rgb(24, 90, 181);
height: 40px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#zoekKnop:hover{

   filter: brightness(80%);

}


#sugestiebox{
    display: block;
    
position: absolute;
top: 42px;
border-bottom: 1px ;
border-radius: 5px;
top: 35px;
width: calc(100% - 76px);
  z-index: 2;
  background-color: rgb(78, 241, 249);
    cursor: pointer;
}
#Zoekreslutaten{
  position: relative;
  width: 100%;
   height: auto;
  display: block;
  text-align: center;
  z-index: 0;


}
.sugesties:hover{
    background-color: rgb(78, 241, 249);
 filter: brightness(80%);
}
.Resultaat{
  cursor: pointer;
  margin-bottom: 10px;
  padding: 10px;
border-radius: 5px;

background-color: rgb(255, 255, 255);
}
.tussen{
  font-size: 14px;
  color: rgb(90, 90, 90);
}

#Xknop{
   position: absolute;

   background-color: rgb(78, 241, 249);
     transform: translateY(-50%);
  cursor: pointer;
border: none;
  width: 40px;
  height: 42px;
position: relative;
top: 21px;
right: 20px;
font-size: 24px;
transition: filter 0.2s;
border-radius: 5px;
}

#resultatenAantal{
  width: 100%;
  height: 50px;
  display: none;
   position: relative;
 margin-top: 20px;
 justify-self: center;
 text-align: center;
    z-index: 1;
}

#meerladen{
  visibility: visible;
margin-top: auto; 

  display: none;
  width: 100%;

  font-size: 40px;
  text-align: center;
  background-color: blue;
  color: white;
  border-radius: 5px;
 cursor : pointer;
}
@media only screen and (max-width: 450px ){
  .sugesties,.Resultaat,#zoekbalk{
    font-size: 12px;

  }
 
  
}