@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
@font-face {
    font-family: 'header-font'; /* Name of the font */
    src: url(../font/AmericanPurposeCasual02-83RD.ttf) format('truetype');
    font-weight: normal; /* Optional: Specify font weight */
    font-style: normal; /* Optional: Specify font style */
  }
  @font-face {
    font-family: 'Futura PT Book';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Book'), url('../font/FuturaCyrillicBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Light';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Light'), url('../font/FuturaCyrillicLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Medium'), url('../font/FuturaCyrillicMedium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Demi';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Demi'), url('../font/FuturaCyrillicDemi.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Heavy'), url('../font/FuturaCyrillicHeavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Bold'), url('../font/FuturaCyrillicBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Futura PT Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Futura PT Extra Bold'), url('../font/FuturaCyrillicExtraBold.woff') format('woff');
    }


/* Algemeen */
:root {
    /* Color Variables */
    --background: #F0F8FF; /* Alice blue background */
    --text-header: #0a6633; /*  green text for headers */
    --box-shadow: 0; /* 2px 3px 20px 5px rgba(0, 0, 0, 0.2); */ /* Box shadow */
    --header-bg: #ADD8E6; /* Light blue background for header */
    --menu-bg: linear-gradient(135deg, #87CEEB 0%, #4682B4 100%); /* Steel blue background for menu */
    --menu-hover: #87CEEB; /* Sky blue for menu hover */
    --text-shadow: #b0bec5 1px 1px 0; /* Gray text shadow */
    --white: #fff; /* White */
    --text-color: #333; /* Dark gray text color */
    --green: #0a6633; /* Green */
    --black: #000; /* Black */
    --red: #ADD8E6; /* Rood */
  
    /* Gradient Variables */
    --button-gradient: linear-gradient(135deg, #87CEEB 0%, #4682B4 100%); /* Sky blue to steel blue gradient for buttons */
    --button-gradient-hover: linear-gradient(135deg, #4682B4 0%, #87CEEB 100%); /* Steel blue to sky blue gradient for button hover */
  
    /* Border Variables */
    --border: 1px solid var(--text-shadow); /* Border using text shadow color */
    --invert: invert(0%);
    --border-radius: 45px; /* Border radius */
  
    /* Font Size Variables */
    --font-size-small: 1.2rem; /* Smaller font size */
    --font-size: 2rem; /* Larger font size */
    --header-font: 'Futura PT Medium', sans-serif; /* Header font */
  }

  [data-theme="dark"] {
    /* Color Variables */
    --background: #000000; /* Alice blue background */
    --text-header: #11b35a; /*  green text for headers */
    --box-shadow: 0; /* 2px 3px 20px 5px rgba(0, 0, 0, 0.2); */ /* Box shadow */
    --header-bg: #3d4d52; /* Light blue background for header */
    --menu-bg: linear-gradient(135deg, #314953 0%, #213c51 100%); /* Steel blue background for menu */
    --menu-hover: #344e58; /* Sky blue for menu hover */
    --text-shadow: #c3d3da 1px 1px 0; /* Gray text shadow */
    --white: #fff; /* White */
    --text-color: #ffffff; /* Dark gray text color */
    --green: #11b35a; /* Green */
    --black: #FFFFFF; /* word wit */
    --red: #3d4d52; /* Rood */
  
    /* Gradient Variables */
    --button-gradient: linear-gradient(135deg, #283f48 0%, #1a3043 100%); /* Sky blue to steel blue gradient for buttons */
    --button-gradient-hover: linear-gradient(135deg, #1a3043 0%, #283f48 100%); /* Steel blue to sky blue gradient for button hover */
  
    /* Border Variables */
    --border: 1px solid var(--text-shadow); /* Border using text shadow color */
    --invert: invert(40%);
}

body {
  font-family: 'Oswald', sans-serif;
	background: var(--background);
	padding: 0;
	margin: 0;
  /* overflow: hidden; */
}

a{
    text-decoration: none;
    color: var(--textcolor);
}



.vak-rechts {
    display: flex;
    justify-content: end;
    align-items: start;
    width: 51vw;
    margin-left: 20vw;
    margin-bottom: 1vw;
    padding: 10px;
    background-color: var(--green);
    color: var(--white);
    border-radius: 25px;
    opacity: 0;
    transform: translateX(100%);
    animation: appearFromRight 2s forwards;
}

@keyframes appearFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.vak-links {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 66vw;
    margin-right: 20vw;
    padding: 10px;
    margin-bottom: 1vw;
    opacity: 0;
    background-color: var(--red);
    color: var(--black);
    border-radius: 25px;
    transform: translateX(-100%);
    animation: appearFromLeft 2s forwards;
}

@keyframes appearFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
        
}


    /* Button */
    .cta-button {
      background: var(--button-gradient); /* Gradient background */
      color: var(--white); /* White text */
      border: var(--border); /* Remove default border */
      padding: 15px 30px; /* Generous padding for better clickability */
      font-size: var(--font-size); /* Larger font size for emphasis */
      font-weight: bold; /* Bold text */
      border-radius: 30px; /* Pill-shaped button */
      box-shadow: var(--box-shadow), 0 4px 6px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
      transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
      cursor: pointer; /* Pointer cursor */
      text-transform: uppercase; /* Uppercase text for emphasis */
      letter-spacing: 1px; /* Slight letter spacing */
      position: relative; /* For the pseudo-element */
      overflow: hidden; /* Hide overflow for the pseudo-element */
    }
    
    .cta-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1); /* Slight white overlay */
      transition: opacity 0.3s ease;
      opacity: 0;
      pointer-events: none; /* Ensure the button remains clickable */
    }
    
    .cta-button:hover {
      background: var(--button-gradient-hover); /* Gradient background on hover */
      transform: translateY(-3px); /* Slight lift effect on hover */
      box-shadow: var(--box-shadow); /* Enhanced shadow on hover */
    }
    
    .cta-button:hover::before {
      opacity: 1; /* Show the overlay on hover */
    }
    
    .cta-button:active {
      transform: translateY(0); /* Remove lift effect on click */
      box-shadow: var(--box-shadow), 0 4px 6px rgba(0, 0, 0, 0.1); /* Reset shadow on click */
    }
  
    .popup-btn{
      position: fixed;
      width: 100px;
      height: 100px;
      left: 100%;
      top: 50%;
  
      transform-origin: 0% 0%;
      -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg) translateX(-50%);
    }

    /* @media */

    @media screen and (max-width: 768px) {
      body {
        animation: none!important;
      }
      .vak-rechts {
        animation: none;
        opacity: 1;
    }
    
    .vak-links {
        animation: none;
        opacity: 1;
          margin-left: 15vw;
        
    }
    .cta-button {
      padding: 12px 24px; /* Slightly reduced padding for tablets */
      font-size: var(--font-size-small); /* Slightly smaller font size */
    }
      }