@font-face {
    font-family: Robbe;
    src: url(Fonts/Meta-Ironic-Pomo-FontVF.woff2);
    font-display: swap;
  }
  
  body {
    font-family: Robbe, sans-serif;
    letter-spacing: -15px;
    font-size: 0px;
  }
  
  .variable-text {
    position: fixed;
    text-align: center;
    width: 100vw;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    font-size: 150px;
    font-variation-settings: "wght" 500;
    user-select: none;
  }
  
  .variable-text span {
    display: inline-block;
    cursor: pointer;
  }
  
  @keyframes animate-weight {
    0% {
      font-variation-settings: "wght" 100;
    }
  
    50% {
      font-variation-settings: "wght" 800;
    }
  
    100% {
      font-variation-settings: "wght" 100;
    }
  }
  

  header {
    display: flex;
    justify-content: space-between; /* Space between left and right-aligned elements */
    align-items: center; /* Vertically center the items */
    padding: 5px; /* Optional: add padding around the header */
}

.header-right {
    display: flex;
    gap: 10px; /* Add space between buttons */
}

.knop {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    text-decoration: none; /* Remove underline from links */
    color: black; /* Set text color */
    padding: 10px 15px; /* Optional: add padding for better appearance */
    letter-spacing: 0px;

}
.knop:hover {
  color: white; /* Text color on hover */
  background-color: black; /* Background color on hover */

  border-radius: 5px; /* Rounded corners */
}

.Contact{
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: black; /* Set text color */
  letter-spacing: 0px;
  text-align: left;
}
.knop-in-tekst{
  font-family: 'Inter', sans-serif;
  font-size: 35px;
  color: black; /* Set text color */
  padding: 10px 15px; /* Optional: add padding for better appearance */
  letter-spacing: 0px;
}
  hr {
    border: 0;
    height: 2px; /* Thickness */
    background-color: #000; /* Color */
    margin-bottom: 5px;
}


.text{
  font-family: 'Inter', sans-serif;
  font-size: 35px;
  color: black; /* Set text color */
  padding: 10px 15px; /* Optional: add padding for better appearance */
  letter-spacing: 0px;
}

.text-klein{
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: black; /* Set text color */
  padding: 10px 15px; /* Optional: add padding for better appearance */
  letter-spacing: 0px;
}

.video-container {
  margin: 20px 0;
  text-align: center;
}

video {
  max-width: 50%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.characters {
  margin: 20px;
}

.all-characters {
  font-size: 40px;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 75px;
}

.hoverable-character {
  display: inline-block;
  transition: transform 0.1s;
}

.hoverable-character:hover {
  transform: scale(5); /* Increase the size to 1.5 times */
}

.toggle-section {
  text-align: center;
  margin: 5px 0;
}

.toggle-button {
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
}

.hidden-text {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: black;
  padding: 10px 15px;
  letter-spacing: 0px;
}