body{
 

 background-attachment: fixed; /* houdt de gradient vast aan het scherm */ 
 padding: 0px;
 margin: 0px;
   font-size: clamp(9px, 1.5vw, 16px);
  word-break: keep-all;
}



#container{
  width: 100%;
  max-width: 1100px;
   min-width: 300px; 
 margin-top: 150px;

  height: auto;
  justify-self:center;
}#zoekbox{
 
  display: flex;
  gap: 10px;
}
#zoekbalk{
  width: 100%;
  height: auto;
  outline: none;
  border: none;
  border-radius: 50px;

}
#zoekKnop,#Wissel-°C°F{
display: flex;
align-items: center;
padding: 2px;
  text-align: center;
  cursor: pointer;

border: none;
border-radius: 8px;




}
#Wissel-°C°F:hover,#zoekKnop:hover{

 color: white;
}

#weerinfo{

  margin-top: 20px;
padding-top: 20px;
min-height: 300px;
border-radius: 50px;


/* background-color: transparent; */
  
text-align: center;
display: none;

}

.Knop{
  
  justify-self: center;
  cursor: pointer;
  border-radius: 8px;
  max-width: 250px;
margin-bottom: 20px;

}
.Knop:hover{
transform: scale(1.1);
transition: 0.2s;
}
#tabel{

   min-width: 250px; 
    word-wrap: break-word; 
  width: 100%;
  table-layout: fixed; /* zorgt dat kolombreedtes gelijk blijven */

}

table, th, td {

  width: calc(100% / 8);
border: 5px solid rgb(6, 122, 163);
  border-collapse: collapse;
}


th, td {
  overflow-wrap: anywhere; /* breekt alleen als het écht nodig is */
  word-break: normal; /* behoud natuurlijke woordgrenzen */
  white-space: normal; /* tekst mag over meerdere regels */
 
  hyphens: auto; /* voegt nette koppeltekens toe als woorden breken */
}


img{
  width: 100%;
  height: auto;
  max-width: 120px;
}