body {
    position: relative; /* Ensure the pseudo-element is positioned correctly */
    min-height: 100vh; /* Allow scrolling if content exceeds viewport height */
    margin: 0; /* Remove default margin */
    overflow-y: auto; /* Enable vertical scrolling */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background-img, url('../img/backgroundimg.jpg')); /* Default background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
}

.nav {
    background-color: rgba(255, 0, 0, 0.5); /* Transparent red */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border: 2px solid white; /* Slight border for definition */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 40px; /* Rounded corners for a smoother look */
    padding: 10px 10px; /* Add 10px padding to the top, bottom, left, and right */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 90px; /* Set a fixed height for the nav block */
    margin-top: 20px;
}

.nav-subtitle {
    font-size: 1em; /* Smaller font size */
    font-style: italic; /* Make the text cursive */
    color: #000000; /* Match the color of the h1 */
    margin-top: 5px; /* Add some spacing between the h1 and the subtitle */
    font-family: "Rubik", sans-serif; /* Use the same font family */
}

h1 {
    font-size: 2.5em;
    color: #000000;
    text-align: center;
    margin: 0; /* Remove margin to ensure proper centering */
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.scroll-container {
    width: 100%;
    overflow: hidden; /* Prevent horizontal overflow */
  
    position: relative;
    margin-top: 30px;
    margin-bottom: 100px; /* Add spacing below the scroll container */
    height: 400px; /* Adjust height to accommodate both tracks */
    z-index: 1; /* Ensure it stays below other elements */
}

.scroll-track {
    display: flex;
    width: 100%; /* Constrain the width to the viewport */
    animation: scroll-left 60s linear infinite; /* Scroll left for the track */
}

.scroll-track.reverse {
    margin-top: 10px; /* Position the second track below the first */
    animation: scroll-right 60s linear infinite; /* Scroll right for the reverse track */
  
}

.scroll-track img {
    height: 175px;
    margin: 0 10px;
    border-radius: 60px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    border: 3px solid white;
   
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}
  .button-container {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 10px; /* Add spacing from the nav */
    gap: 30px; /* Add 30px spacing between buttons */
}

.circle-button {
    width: 60px; /* Set width for circular shape */
    height: 60px; /* Set height for circular shape */
    border-radius: 50%; /* Make the button circular */
    background-color: rgba(255, 165, 165, 0.5); /* Transparent red */
    border: 2px solid white; /* Slight border for definition */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    display: flex; /* Enable flexbox for content alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-family: "Rubik", sans-serif; /* Match the font style */
    font-size: 1.2em; /* Adjust font size */
    color: #000000; /* Text color */
    cursor: pointer; /* Change cursor to pointer */
    text-decoration: none; /* Remove underline for links */
    transition: transform 0.3s ease; /* Add hover effect */
}

.circle-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.circle-button img {
    width: 30px; /* Adjust icon size */
    height: 30px; /* Adjust icon size */
    display: block; /* Ensure proper alignment */
    filter: brightness(0) invert(0); /* Make the SVG icons black */
}

h2 { font-size: 2.5em;
    color: #000000;
    text-align: center;
    margin: 0; /* Remove margin to ensure proper centering */
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
margin-top: 30px;}

#knopterug {
    padding: 16px;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;
    background-color: #73936300;
    border-radius: 20px;
    color: white;
    text-align: center;
    margin-top: 30px;
}

.uitleg {
    font-size: 14px;
    font-weight: 300;
    font-family: "Rubik", sans-serif;
    color: #555;
    font-style: italic;

    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .hoevaak {
    font-size: 24px;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    color: #333;
    text-align: center;
    margin-top: 20px;
 
  }

  table {
    margin: 0 auto; /* Center the table horizontally */
    font-family: "Rubik", sans-serif; /* Use the same font as the rest of the page */
   margin-bottom: 30px;
    margin-top: 30px;
}

.event-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px; /* Add spacing below the scroll container */
    font-family: "Rubik", sans-serif;
}

  .nav-button {
    display: inline-block;
    width: 250px;
    padding: 12px 20px;
    margin-bottom: 50px;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 30px;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
    backdrop-filter: blur(5000px); /* Frosted glass effect */
    transition: background-color 0.2s ease, transform 0.3s ease;
    background-color: rgba(255, 70, 70, 0.5); /* Transparent red */
    border: 2px solid white; /* Slight border for definition */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    cursor: pointer; /* Pointer cursor */
}

.nav-button:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    filter: brightness(0.95); /* Slightly darken on hover */
}

    /* Group buttons with the same color */
    .btn1,
    .btn6,
    .btn8,
    .btn9,
    .btn11,
    .btn12,
    .btn13,
    .btn15,
    .btn16,
    .btn18,
    .btn19,
    .btn20,
    .btn23,
    .btn24,
    .btn26,
    .btn28,
    .btn32,
    .btn34,
    .btn35,
    .btn38,
    .btn40,
    .btn43,
    .btn44,
    .btn46,
    .btn47,
    .btn49,
    .btn50,
    .btn53,
    .btn56, 
    .btn65,
    .btn66, 
    .btn77 {
        background-color: red;
    }

    .btn41 {background-color: darkorange;}  /*koningsdag*/
    .btn7 {
        background-color: goldenrod;  /*fout of goud*/
    }

    .btn10 {
        background-color: plum; /*feest juul*/
    }

    .btn17 {
        background-color: orange; /*mm halloween*/
    }

    .btn25,
    .btn30,
    .btn33,
    .btn37,
    .btn39,
    .btn42,
    .btn52,
    .btn54,
    .btn69  { 
        background-color: lightskyblue; /*ool en varen en zwemmen*/
    }

    .btn27 {
        background-color: rgb(119, 198, 0); /*shh*/
    }

    .btn29 {
        background-color: green; /*kamperen*/
    }

    .btn31 {
        background-color: rgb(0, 198, 198); /*mm summer*/
    }

    .btn2,
    .btn3,
    .btn4,
    .btn5,
    .btn14,
    .btn78 {    /*carnaval*/
        background-image: linear-gradient(to right,   
                #CE1126 25%,
                #FCD116 25%, #FCD116 75%,
                #009460 75%);
        color: rgb(0, 0, 0);   
        font-weight: bold;        
    }

    .btn21, .btn76 {    /*oktoberfest*/
        background-image: repeating-linear-gradient(
            -45deg,
            #ffffff,
            #ffffff 10px,
            #add8e6 10px,
            #add8e6 20px
        );
        color: black;
        font-weight: bold;
    }

    .btn22 {   /*keet neon*/
        background-color: rgb(255, 0, 0);
        color: rgb(255, 255, 255);
        border: 2px solid rgb(255, 0, 0);
        border-radius: 30px;
        padding: 10px 20px;
        font-weight: bold;
        text-shadow: 0 0 5px rgb(255, 0, 0), 0 0 10px rgb(255, 0, 0), 0 0 15px #0ff;
        box-shadow: 0 0 5px rgb(255, 0, 0), 0 0 20px rgb(255, 0, 0), 0 0 30px rgb(255, 0, 0);
        transition: all 0.3s ease;
    }

    .btn36, .btn67 {    /*zomerparkfeest*/
        background-image: repeating-linear-gradient(
            -45deg,
            #00ff00,
            #00ff00 10px,
            #ffff00 10px,
            #ffff00 20px
        );
        color: rgb(0, 0, 0);
        padding: 10px 20px;
        border-radius: 30px;
        font-weight: bold;
    }

    .btn45 {   /*bevrijdingsfestival*/
        background-image: linear-gradient(to top,
                #CE1126 23%,
                #ffffff 23%, #ffffff 77%,
                #0331ff 77%);
        color: black;
    }

    .btn51 {   /*luikse markt*/
        background-image: repeating-linear-gradient(
            -40deg,
            red,
            red 20px,
            white 20px,
            white 40px
        );
        color: darkblue;
        padding: 10px 20px;
        border-radius: 30px;
        font-weight: bolder;
    }
    .btn55 {
        background-color: rgb(255, 75, 216); /* Set the background color to pink */
        color: yellow; /* Set the text color to yellow */
        font-weight: bold; /* Make the text bold */
        padding: 10px 20px; /* Add padding for better appearance */
        border-radius: 30px; /* Rounded corners */
        text-align: center; /* Center the text */
        font-family: "Rubik", sans-serif; /* Match the font style */
        cursor: pointer; /* Change cursor to pointer */
        transition: transform 0.3s ease; /* Add hover effect */
    }

    .btn55:hover {
        transform: scale(1.05); /* Slightly enlarge on hover */
    }
    .btn57, .btn58, .btn59, .btn60, .btn61, .btn62, .btn63, .btn64 {
        background: linear-gradient(
          to bottom,
          #0D5EAF 0%,  /* donker blauw */
          #0D5EAF 25%, 
          white 25%, 
          white 45%, 
          #0D5EAF 45%, 
          #0D5EAF 55%, 
          white 55%, 
          white 75%, 
          #0D5EAF 75%, 
          #0D5EAF 100%
        );
        color: rgb(0, 0, 0);
        
      
        font-family: "Rubik", sans-serif; /* Match the font style */
      }

      .btn68, .btn71 {  /*himmerich*/
        background-color: darkblue;
        color: rgb(255, 255, 255);
        
      
        font-family: "Rubik", sans-serif; /* Match the font style */

      }

      .btn70, .btn72 {  /*keet isis*/
        background-color: darkred;

      }

      .btn73 {
        background-color: yellow;
        color: purple;
        font-weight: bold;
      }

      .btn74{
        background-color: rgb(99, 187, 255);
        color: rgb(255, 0, 0);
        font-weight: bold;
      }

      .btn75{
        background-color: red;
        color: white;
        font-weight: bold;
        background: linear-gradient(to right, red, rgba(253, 78, 15, 0.929));

      }

    
      
    
    
    
    
    

#camera {

    display: block;
    margin-left: auto;
    margin-right: auto;
     
    border-radius: 40px;;
 
     margin-top: 30px;
     width: 420px;
     height: 280px;
  }

  .editie {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
    text-align: center;

    margin-top: 30px;

    font-size: x-large;
  }

  .camera-info {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }
  
  .camera-info h1 {
    font-size: 2.5em;
    color: #000;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
  }
  .camera-info h2 {
    margin-bottom: 15px;
    color: #333;
  }
  
  .camera-info table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    text-align: left;
  }
  
  .camera-info th,
  .camera-info td {
    border: 1px solid #ddd;
    padding: 10px;
  }
  
  .camera-info th {
    background-color: #eee;
  }
  
  .camera-info ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    margin-top: 20px;
  }
  
  .camera-info ul li {
    margin-bottom: 10px;
  }

  .ap {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 20px; /* Rounded corners */
    margin-top: 50px; /* Add some space above the image */
  }

  h4 {
    text-align: center;
    font-size: 1.5em;
    color: #000000;
    margin-top: 20px;
    font-family: "Rubik", sans-serif;
  }

ul  {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 20px auto; /* Center the list and add vertical spacing */
    max-width: 500px; /* Limit width for better readability */
    font-family: "Rubik", sans-serif; /* Use the same font family */
    font-size: 15px; /* Adjust font size for readability */
}



.video-player-container {
  position: relative;
  margin-top: 8px;
  border-radius: 30px;
  overflow: hidden;
  border: white 2px solid;
  background: #000;
}

.custom-video {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-player-container:hover .video-controls {
  opacity: 1;
}

.video-play-btn,
.video-mute-btn {
  background: red;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.video-play-btn:hover,
.video-mute-btn:hover {
  background: darkred;
  transform: scale(1.1);
}

.video-progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.video-progress-bar {
  height: 100%;
  background: red;
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s ease;
}