* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

h2 {
  color: Green;
}
h3 {
  color: Blue;
}
h4 {
  color: Black;
}
        body {
            margin: 2%;
            justify-content: center;
            overflow: hidden;
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

        /* Stijl voor het hoofdmenu */
        .vertical-menu {
            width: 180px;
            background-color: #F2F2F2;
            height: 100vh;
            position: fixed;
            padding-top: 10px;
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			font-weight: bold;
        }

        /* Stijl voor menu-items */
        .vertical-menu ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .vertical-menu li a {
            display: block;
            padding: 8px 12px;
            color: #33f;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        /* Hover-effect voor menu-items */
        .vertical-menu li a:hover {
            background-color: #ddd;
            color: #000;
        }

        /* Stijl voor submenu */
        .vertical-menu .submenu {
            display: none;
            background-color: #e1e1e1;
            padding-left: 10px;
        }

        /* Toon submenu bij hover */
        .vertical-menu li:hover .submenu {
            display: block;
        }

        /* Actief menu-item */
        .vertical-menu li a.active {
            background-color: #4CAF50;
            color: white;
        }

        .box-wrapper {
            height: 95%vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        #box1 {
            padding: 10px;
            border: none
        }

        #box2 {
            padding: 8px;
            border: none
        }

        #box3 {
            padding:0px;
            width:100%;
            display: flex;
            flex-direction: row;
            border: none;
        }

        #box4 {
		width:25%;
        border: none;
		text-align: left;

        }

        .middle-column {
			text-align: center;
         width: 60%;
         padding:5px;
         box-shadow: 5px 10px 8px 10px #888888;
        }

        .middle-column div {
            text-align: left;
            margin: 0 0px;
            border: none;
        }

        .middle-column div+div {
            margin-top: 0px
        }

        #box8 {
        width: 25%;
        text-align: right;
        border: none;
		padding-left:52px ;
        }
		
        button {
            padding: 8px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
		
header  {
         background-color: #00f;
		 left: 0;
         color: white;
         width: 100%;
         text-align: center;
         padding: 0px;
}

footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #4B4D46;
   color: white;
   text-align: center;
}