/* The screen (or content) of the device */
.smartphone .content {
  width: 360px;
  height: 640px;
  background: white;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  margin-bottom: 50px; /* Voeg de gewenste afstand toe aan de onderkant van de pagina */
  background-image: url('../Afbeeldingen/Test3.png'); /* Voeg het pad naar je foto toe */
  background-size: Cover; /* Hiermee wordt de achtergrondafbeelding volledig bedekt */
  background-position: Fixed; /* Hiermee wordt de afbeelding in het midden van het scherm geplaatst */
  background-repeat: repeat; /* Hiermee wordt de afbeelding niet herhaald */
}

header {
  background-color: #33333300;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  border-bottom: 5px solid #ffffff00;
  height: 40px;
}


/* Contactknop */


nav li.contact-button {
  margin-left: auto; /* Plaats de contactknop aan de rechterkant */
}

nav li.contact-button a {
  background-color: #1e1e1e00;
  color: #fff7f7;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

nav li.contact-button a:hover {
  background-color: rgba(255, 255, 255, 0.6);
}


/* Navigatiemenu */


nav {
  background-color: #1e1e1e00;
  padding: 10px;
}

/* Lijststijl verwijderen en lijstitems zij-aan-zij plaatsen */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* Stijl voor elk lijstitem in het navigatiemenu */
nav li {
  margin-right: 20px;
}

/* Stijl voor de link in het navigatiemenu */
nav a {
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
  transition: color 0.3s ease;
  padding: 10px 15px; /* Voeg wat ruimte toe rondom de tekst */
  transition: text-decoration 0.3s ease; /* Voeg een soepel overgangseffect toe */  
  transition: box-shadow 0.3s ease; /* Voeg een soepel overgangseffect toe */
}

/* Hover-stijl voor de link in het navigatiemenu */
nav a:hover {
  color: #010101; /* Verander deze kleur naar jouw wens */
  box-shadow: 0 0 5px rgb(1, 0, 0); /* Voeg een subtiele schaduw toe bij hover */
  background-color: rgba(255, 255, 255, 0.6); /* Witte achtergrond met minder transparantie */
  border-radius: 8px; /* Voeg een rondere hoek van 8px toe */
  text-decoration: underline; /* Onderstreep de tekst bij hover */
}

/* H en P Teksten*/


h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  color: white;
}

section {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.641);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  color: black;
}

h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  color: black;
}



p {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6em;
  text-align: justify;
  color: black;
}

p1 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6em;
  color: black;
}


/*Footer*/
Footer {
  font-family: 'Open Sans', sans-serif;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.work-gallery {
  max-width: 800px;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.work-tile {
  width: 350px;
  margin: 15px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.work-tile img {
  width: 100%;
  border-radius: 5px;
}

.about-section {
  max-width: 800px;
  margin: 20px auto;
  display: flex;
}

.text-container {
  flex: 1;
  padding: 20px;
}

.image-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  
}

.image-container1 {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container1 img {
  width: 70%;
  height: auto;
  border-radius: 10px;
  
}

  /* Mediaquery voor smartphones */
  @media only screen and (min-width: 601px) {
    /* Pas hier aanvullende stijlen aan voor smartphones indien nodig */
  }