/*font8*/
@font-face {
    font-family: Figtree;
    src:url('/assets/fonts/Figtree-wght.ttf');
}
@font-face {
    font-family: calvino;
    src:url('/assets/fonts/calvino-font/Calvino-Grande-Extralight-trial.ttf');
}

/* Kleuren */
:root {
    --color-white: #ffffff;
    --background-color: #000000;
    --secondary-color: #1d1d1d;
    --color-gray: #a6a6a6;
    --color-rouwtaak1: #64aac7;
    --color-rouwtaak2: #984a4a;
    --color-rouwtaak3: #6e9158;
    --color-rouwtaak4: #7c6097;
  
    --primary-font: 'calvino', sans-serif;
    --details-font: 'Figtree', Tahoma;
  
    --start-button-padding: 8px 12px;
    --start-button-radius: 20px;
  
    --breakpoint-desktop: 64em;
    --breakpoint-tablet: 48em;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--background-color);
    font-family: var(--primary-font);
    color: var(--color-gray);
    line-height: 1.5;
  }
  .border{
    border: 0.1em solid var(--secondary-color);
    border-radius: 1rem;

  }
  img,svg {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /*  TYPOGRAPHY */
  h1, h2, h3, h4 {
    font-family: var(--primary-font);
    color: var(--color-white);
  }
  
  h1 {
    font-size: clamp(2rem, 3vw, 2rem);
    font-weight: bold;
  }
  
  h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  }
  
  h3 {
    font-size: clamp(1rem, 2vw, 1.5rem);
  }
  p, li {
    font-family: var(--details-font);
    font-size: clamp(1rem, 1.5vw, 1rem);
    color: var(--color-gray);
  }

  .theme-blue{
    --main-color:var(--color-rouwtaak1);
  }
  .theme-red{
    --main-color:var(--color-rouwtaak2);
  }
  .theme-green{
    --main-color:var(--color-rouwtaak3);
  }
  .theme-pink{
    --main-color:var(--color-rouwtaak4);
  }
  .them-1, .them-blue {
    --main-color:var(--color-rouwtaak1);
    background-color: var(--color-rouwtaak1);
    border: 1px solid var(--color-rouwtaak1);
    &:hover {
      background-color: var(--color-rouwtaak2);
    }
  }
  
  .them-2, .them-red {
    --main-color:var(--color-rouwtaak2);
    background-color: var(--color-rouwtaak2);
    border: 1px solid var(--color-rouwtaak2);
    &:hover {
      background-color: var(--color-rouwtaak3);
    }
  }
  
  .them-3, .them-green {
    --main-color:var(--color-rouwtaak3);
    background-color: var(--color-rouwtaak3);
    border: 1px solid var(--color-rouwtaak3);
 
    &:hover {
      background-color: var(--color-rouwtaak4);
    }
  }
  
  .them-4, .them-pink {
    --main-color:var(--color-rouwtaak4);
    background-color: var(--color-rouwtaak4);
    border: 1px solid var(--color-rouwtaak4);

    &:hover {
      background-color: var(--color-rouwtaak1);
    }
  }
  .them-1,.them-2,.them-3,.them-4,.them-blue, .them-red, .them-green, .them-pink{
      color: var(--color-white);
  }
  .start-btn-black{
    background-color: var(--background-color);
  }
  .border-black{
    border-color: var(--background-color);
  }


/*need look*/
  .btn-standard {
    min-width: 5vh;
    padding: var(--start-button-padding);
    border-radius: var(--start-button-radius);
    text-decoration: none;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    
  }

 
  .start-btn {
    min-width: 5vh;
    position: absolute;
    bottom: -20px;
    right: 30px;
    padding: var(--start-button-padding);
    border-radius: var(--start-button-radius);
    text-decoration: none;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    
  }

  .form-btn{
    position: fixed;
    bottom: 1em;
    left: 35%;
  
  }

  .start.active {
    background-color: #ff4081;
    color: white;
    animation: start-animation 0.5s ease-out;
  }
  
  @keyframes start-animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    }
    100% {
        transform: scale(1);
    }
  }