/* test stukje  */
.voorbeeld
{
background-color: rgb(0, 0, 255);

border: 2px rgb(0, 0, 255) solid;
border-radius: 10px;
}
/* de opmaak van  de navigatie balk en dat het zo groot blijft  */
.bovenbalk
{
    position: fixed;
    display: block;
    background-color: blue;
    left: 0px;
    top: 0%;
    right: 0%;
    text-align:center;
    background-color: rgb(21, 152, 179);
    background-position: 34%;
    background-size: 0px 0px;

}
/*  er een grooter stukje tustten de text maken */
a{
    margin-right: 20px;
    text-decoration: none;
}


/*  een grid maken en dat voor de text niet onder de boven bakt gaat*/
body
{

    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    grid-template-rows: 10% 1fr 1fr 1fr;
    height: 100%;
  padding-top: 80px;
}


/* maakt het logo en de groote er van */

.logo{height:50px}

/* is het stukje van de coppyrigt logo en mijn naam  */
.onderbalk
{
    position: fixed;
    display: block;
    background-color: rgb(48, 175, 143);
    left: 0px;
    bottom: 0%;
    right: 0;
    text-align: center;
    color: #000000;
}
.darkbalk
{
  background-color: #d42f2f;
  color: rgb(6, 6, 6);
}

 
/* maakt de text wit  */
ul li a {
  display: block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 10px;
}

/* maakt het dat je als je er oven heen gaat met je muiscorser dat die zwart word */
ul li a:hover {
  background-color: #111111;
  color: white;
}


/* dit maakt dat het naast elkaar komt en niet onder elkaar  */
ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: rgb(21, 152, 179);
}

/* Standaard licht thema */
body {
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode */
body.dark {
    background-color: #121212;
    color: #ffffff;
}
/* dark mode voor de text box */
.dark-box{
  background-color: #213e7d;
}

/* Knop styling */
#darkModeToggle {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Knop in light mode wanneer dark actief is */
body.dark #darkModeToggle {
    background-color: #ffffff;
    color: #000000;
}

.midden{
  grid-column: 2 / 4;
}
.links{
  grid-column: 2/3;
}
.rechts{
  grid-column: 3/4;
}

.r1{
  grid-row: 1 / 2;
}
.r2{
  grid-row: 2 / 3;
}
.r3{
  grid-row: 3 / 4;
}

.text-box {
  background-color: rgb(30, 211, 228);      /* lichtblauwe achtergrond */
  border-left: 6px solid #1976D2; /* blauwe streep aan de linkerkant */
  padding: 15px 20px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  margin: 15px 0;
}

.text-box2 {
  background-color: rgb(30, 211, 228);      /* lichtblauwe achtergrond */
  border-right: 6px solid #1976D2; /* blauwe streep aan de linkerkant */
  padding: 15px 20px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  margin: 15px 0;
}

 .fotoborder{
  border-right: 6px solid #1976D2; /* blauwe streep aan de linkerkant */
  border-radius: 8px;
 }

  .fotoborder2{
  border-left: 6px solid #1976D2; /* blauwe streep aan de linkerkant */
  border-radius: 8px;}