@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;900&display=swap');

html, body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

    /* HERO */
    .hero {
      position: relative;
      min-height: 60vh; /* minimale hoogte */
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
      text-align: center;
      padding: 2rem 1rem;
    }

.flagoverlay {
position: absolute;
top: 0;
	left: 0;
}
.flagoverlay img.flags { width: 100%; object-fit: cover;}


    /* Logo container */
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 1000px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      animation: swingRotate 4s ease-in-out infinite alternate;
    }

    .hero-content img {
      max-width: 100%;
      height: auto;
      margin-bottom: 1.5rem;
    }

    @keyframes swingRotate {
      0% { transform: translateX(-10px) rotate(-3deg); }
      50% { transform: translateX(10px) rotate(3deg); }
      100% { transform: translateX(-10px) rotate(-3deg); }
    }

    /* Intro tekstvak */
    .intro-text {
      position: relative;
      z-index: 2;
      max-width: 900px;
      color: #000;
      font-weight: 800;
      font-size: 1.3rem;
      line-height: 1.5;
      margin-top: .5rem;
      text-align: center;
    }

	.intro-text h2 {
	  background: #c31617; 
	  color: #fff; 
	  font-weight: 900; 
      font-size: 1.3rem;		
	  padding: 15px 25px;
		display: inline-block;
		width: auto;
		margin-bottom: 25px;
		font-family: "M PLUS Rounded 1c", sans-serif;
	}

    .intro-text p {
      margin-bottom: 1rem;
    }

    /* Content sectie onder hero */
    .main-content {
		background: #f7ecd1;
      padding: 4rem 2rem;
      text-align: center;
      font-size: 1.2rem;
      font-weight: 700;
      color: #000;
    }
	.main-content h1 {
	  background: #c31617; 
	  color: #fff; 
	  font-weight: 900; 
      font-size: 1.5rem;		
	  padding: 15px 25px;
		display: inline-block;
		width: auto;
		margin-bottom: 25px;
		font-family: "M PLUS Rounded 1c", sans-serif;
	}

    /* Confetti canvas */
    canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      filter: blur(1px);
    }

footer {
	 width:100%;
	padding: 20px;
      background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
}

#acts {
	padding: 70px 0 50px 0;
      background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
} 
#acts img { width: 400px; height: 300px; object-fit:cover; }
#acts h3 { padding: 15px; font-size: 1.2rem;  font-weight: 900; color: #c31617; font-family: "M PLUS Rounded 1c", sans-serif;}

#sponsor {
		background: #f7ecd1;
	
	padding: 70px 0;
      color: #000;
      font-weight: 800;
      font-size: 1.3rem;
      line-height: 1.5;
      margin-top: .5rem;
      text-align: center;	
}
#sponsor img { width: 400px; height: 300px; object-fit:contain;}
#sponsor h4 { font-size: 1.1rem; font-weight: 900; color: #c31617; font-family: "M PLUS Rounded 1c", sans-serif; line-height: 1.1rem; height: 40px; }
#sponsor .item { background: #fff; padding:20px; margin: 10px; } 
#sponsor h3 {
	  background: #c31617; 
	  color: #fff; 
	  font-weight: 900; 
      font-size: 1.3rem;		
	  padding: 15px 25px;
		display: inline-block;
		width: auto;
		margin-bottom: 25px;
font-family: "M PLUS Rounded 1c", sans-serif;

	}

    @media (max-width: 768px) {
      .intro-text {
        font-size: 1.4rem;
      }
      .main-content {
        font-size: 1.5rem;
      }
	   #sponsor img { width: 250px; height: 200px; object-fit:contain; padding: 20px;}
	   #acts img { width: 250px; height: 200px; object-fit:cover; }

    }

    @media (max-width: 480px) {
      .intro-text {
        font-size: 1.2rem;
      }
      .main-content {
        font-size: 1.2rem;
      }
    }