/* Add a black background color to the top navigation */
.topnav {
    position: fixed;
    top: 0%;
    height: 10vh; /* Set the height of the top bar */
    width: 100%; /* Full width */
    background-color: rgb(0, 48, 48);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 1000;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 3vw;
    font-family:Verdana, Tahoma, sans-serif;
    border: solid 5px black;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #811136;
    color: white;
  }
  h1,h2, p {
    color: white;
    text-align: center;
    margin: 0; /* Remove default margin */
    padding: 0;
  }
  body {
    background-color: #6D3131;
    margin: 0;
    padding: 0;
    position: relative; /* Set position relative to allow absolute positioning of children */
    height: 100%; /* Full height of the viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  @media (max-width: 600px) {
    h1 {
      font-size: 8vw; /* Larger text for smaller screens */
    }
  
    h2 {
      font-size: 6vw; /* Larger text for smaller screens */
    }
  }

.projecten {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 120px;
  margin-bottom: 30px;
}

.projecten h1 {
  font-size: 60px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.projecten p {
  font-size: 35px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.projecten img {
  width: 350px;
}

.project{
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  gap: 10px;
  padding: 30px;
  padding-bottom: 30px;
  border-radius: 50px;
  background-color: gray;
  height: 450px;
}

img {
  border-radius: 20px;
}