* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
 html,
 body {
     height: 100%;
     font-family: 'Arial', sans-serif;
     overflow: hidden;
 }
 
 .container {
     display: flex;
     height: 100vh;
     flex-direction: row;
     transition: all 0.5s ease-in-out;
 }
 
 .panel {
     flex: 1;
     position: relative;
     transition: flex 0.5s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     overflow: hidden;
     padding: 2rem;
 }
 
 .panel.left {
     background-color: #006C45;
 }
 
 .panel.right {
     background-color: #219EBC;
 }
 
 .container.hover-left .left {
     flex: 2;
 }
 
 .container.hover-left .right {
     flex: 1;
 }
 
 .container.hover-right .right {
     flex: 2;
 }
 
 .container.hover-right .left {
     flex: 1;
 }
 
 .content {
     text-align: center;
     z-index: 2;
     max-width: 400px;
 }
 
 .content h1 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
 }
 
 .content p {
     margin-bottom: 1.5rem;
 }
 
 .content a {
     padding: 0.75rem 1.5rem;
     background: white;
     color: black;
     text-decoration: none;
     font-weight: bold;
     border-radius: 30px;
     transition: background 0.3s;
 }
 
 .content a:hover {
     background: rgba(255, 255, 255, 0.8);
 }
 
 .panel img {
     position: absolute;
     max-height: 80%;
     bottom: 0;
     right: 10%;
     opacity: 0.2;
     pointer-events: none;
     border-radius: 50px 50px 0px 0px;
 }
 
 .topbar {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 1.5rem;
     z-index: 10;
     color: white;
     font-weight: bold;
 }
 
 .topbar img{
     padding: 10px;
    margin-top: 40px;
 }
 
 .menu-toggle {
     font-size: 2rem;
     cursor: pointer;
     pointer-events: all;
 }
 /* Overlay menu */
 
 .overlay-menu {
     position: fixed;
     inset: 0;
     background: transparent;
     color: white;
     display: none;
     z-index: 999;
     animation: fadeIn 0.4s ease;
     flex-direction: column;
 }
 
 .overlay-menu.active {
     display: flex;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.98);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }
 
 .overlay-split {
     display: flex;
     flex-direction: row;
     height: 100%;
     width: 100%;
     flex: 1;
 }
 
 .overlay-left,
 .overlay-right {
     flex: 1;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 2rem;
 }
 
 .overlay-left {
     background-color: rgba(0, 108, 68, 1);
 }
 
 .overlay-left a,
 .overlay-left h2 {
     text-align: left;
 }
 
 .overlay-right a,
 .overlay-right h2 {
     text-align: right;
 }
 
 .overlay-right {
     background-color: #219EBC;
 }
 
 .overlay-content {
     text-align: center;
 }
 
 .overlay-content h2 {
     margin-bottom: 1.5rem;
     font-size: 1.8rem;
 }
 
 .overlay-content a {
     display: block;
     font-size: 4rem;
     color: white;
     text-decoration: none;
     margin: 0.5rem 0;
     transition: transform 0.2s ease;
 }
 
 .overlay-content a:hover {
     transform: scale(1.05);
 }
 
 .close-button {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 2.5rem;
     cursor: pointer;
     z-index: 1000;
     color: white;
 }
 /* Mobiel */
 
 @media (max-width: 768px) {
     html,
     body {
         height: auto;
         overflow-y: auto;
     }
     .container {
         height: auto;
     }
     .panel {
         height: 100vh;
     }

     body > header > img {
        display: none;
     }
 }
 
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
     }
     .overlay-content a {
         font-size: 1.5rem;
     }
     .overlay-left a,
     .overlay-left h2 {
         text-align: center;
     }
     .overlay-right a,
     .overlay-right h2 {
         text-align: center;
     }
     .panel {
         flex: none;
         height: 50vh;
         padding: 1.5rem;
     }
     .panel img {
         display: block;
         position: absolute;
         max-height: 100%;
         bottom: 0;
         right: 10%;
         opacity: 0.2;
         pointer-events: none;
         border-radius: 50px 50px 0px 0px;
     }
     @media (max-width: 768px) {
         .panel .content {
             z-index: 1;
             position: relative;
         }
         .panel img {
             display: block;
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             object-fit: cover;
             opacity: 0.1;
             z-index: 0;
             border-radius: 0;
         }
     }
     .content h1 {
         font-size: 1.8rem;
     }
     .content p {
         font-size: 1rem;
     }
     .content a {
         font-size: 1rem;
         padding: 0.6rem 1.2rem;
     }
     .container.hover-left .left,
     .container.hover-left .right,
     .container.hover-right .left,
     .container.hover-right .right {
         flex: none;
     }
     .overlay-split {
         flex-direction: column;
     }
     .overlay-left,
     .overlay-right {
         justify-content: flex-start;
         padding-top: 4rem;
     }
 }
 
 .content a.highlight {
     transform: scale(1.15);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
     background: #ffffff;
     color: black;
 }