/* headers navigatie */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    align-items: center;
}

nav ul li {
        margin-right: 20px;
}

/* Zoekicoon naar rechts */
nav ul li:last-child {
    margin-left: 1050px; /* Duwt de zoekicoon helemaal naar rechts */
}

nav ul li a {
    color: white;  
    text-decoration: none;  
    font-size: large;
    font-style: normal; 
    white-space: nowrap; /* Voorkomt dat woorden worden afgebroken */   
}


/* ruimte bij scrollen */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; /* betere beheer ruimte */
}

header{
    display: flex;
    align-items: center;
    padding: 10px;
    background-image: url("../images/ruimteachtergrond.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -8px;
    background-color: rgba(25, 30, 40, 0.7); /* transparante kleur */
    

}

.zoekicoon {
    width: 40px;
    height: auto;
    margin-left: 100%;
    
}


.logo {
    width: 50px;
    height: auto;
    margin-right: 10px;
    
}

.search-container {
    position: relative;
    display: inline-block; /* Zorgt ervoor dat het input veld goed wordt uitgelijnd */
  }
  
  .search-input {
    width: 0; /* Begin met een breedte van 0 */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    transition: width 0.4s ease;
    opacity: 0; /*  onzichtbare invoer */
    position: absolute; /* Maak het absoluut gepositioneerd */
    top: 50%; /* Centreer het verticaal */
    left: 20%; /* Centreer het horizontaal */
    transform: translate(-50%, -50%); /* naar het midden */
    z-index: -1; /* achter andere elementen staat */
  }
  
  .search-button {
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .search-container:focus-within .search-input {
    width: 150px; /* De gewenste breedte voor het zoekveld */
    opacity: 1; /* Maakt het invoerveld zichtbaar */
    z-index: 1; /* Brengt het naar voren */
   height: 80%;
  }