Scroll naar beneden voor instructies
<style>
  /* Container voor het responsive Scratch-project */
  .responsive-iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 verhouding (portrait) */
  }

  .responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* In landscape: iets platter en maximale hoogte */
  @media (orientation: landscape) {
    .responsive-iframe-container {
      padding-bottom: 50%;
      max-height: 90vh;
    }
    .responsive-iframe-container iframe {
      max-height: 90vh;
    }
  }

  /* 🎮 Uitlegblok onder het project */
  .scratch-info {
    background: #fdf8f4; /* zacht oranjeachtig achtergrondje */
    border-left: 6px solid #ff9f1c; /* Scratch-oranje accent */
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 24px;
    font-family: "Comic Sans MS";
    font-size: 1.1rem; /* iets groter voor betere leesbaarheid */
    color: #2b2b2b;
    line-height: 1.8;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }

  .scratch-info strong {
    color: #0078d7; /* blauw accent zoals in Scratch-links */
  }

  /* 📱 Maak tekst iets groter op kleine schermen */
  @media (max-width: 600px) {
    .scratch-info {
      font-size: 1.2rem;
      padding: 18px 20px;
    }
  }
</style>

<!-- Scratch-project -->
<div class="responsive-iframe-container">
  <iframe 
    src="https://scratch.mit.edu/projects/1227730295/embed"
    allowfullscreen
  ></iframe>
</div>

<!-- Uitleg onder het project -->
<div class="scratch-info">
  🎮 <strong>Klik op de groene vlag</strong> om te starten, selecteer het aantal spelers en de moeilijkheidsgraad van de AI bij 1 speler.<br><br>
  📱 Beweeg je hockeystick 🏑 op en neer om het doel te verdedigen en probeer te scoren.<br><br>
  💻 Speel je op de PC? Gebruik dan de toetsen <strong>“W”</strong> en <strong>“S”</strong> bij 1 speler.<br>
  👥 Bij 2 spelers (alleen op de PC) gebruikt de tweede speler de pijltjestoetsen <strong>“omhoog”</strong> en <strong>“omlaag”</strong>.<br><br>
  🔁 Klik opnieuw op het <strong>groene vlaggetje</strong> om te herstarten en op het <strong>rode stopbordje</strong> om te stoppen met spelen.
</div>
Created by: <a href="https://www.linkedin.com/in/roderik-van-rossem-a88bbb6/">Roderik van Rossem</a> | On behalf of: https://pimsroomburg.nl/ | Making use of: https://scratch.mit.edu/ | Published via: https://github.com/ |
<span class="likebtn-wrapper" data-theme="custom" data-icon_l="thmb4-u" data-icon_d="thmb4-d" data-icon_l_c_v="#fb056a" data-icon_d_c_v="#2105fb" data-i18n_like="Level Up" data-ef_voting="push" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>