<!DOCTYPE html>
<html>
  <head>
    <title>agb - a rust framework for making Game Boy Advance games</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        font: 1.2em/1.62 sans-serif;
        background-color: white;
        font-size: 1.5rem;
        line-height: 1.6;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
      }
      h1,
      h2,
      h3 {
        line-height: 1.2;
      }
      .gameDisplay > div {
        display: flex;
        justify-content: center;
        height: 100%;
      }

      .gameDisplay {
        height: calc(min(480px, 60vh));
        margin-left: auto;
        margin-right: auto;
        max-width: 100vw;
        margin-top: 20px;
      }

      .gameDisplay > div > div {
        aspect-ratio: 17 / 33;
        height: 100%;
      }

      .gameDisplay > div > div > img {
        height: 100%;
        image-rendering: pixelated;
      }

      .gameDisplay > div > iframe {
        border: 0;
        height: 100%;
        max-width: 100vw;
        aspect-ratio: 240 / 160;
      }

      header,
      .help {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-block-end: 40px;
      }

      .red {
        background-color: #f5755e;
        flex-grow: 1;
      }

      .links {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        margin-bottom: 40px;
        max-width: 40rem;
      }

      .links > a {
        text-decoration: none;
        color: black;
        background-color: #fad288;
        border: solid #fad288 2px;
        border-radius: 5px;
        padding: 5px 10px;
      }

      .links > a:hover {
        border: solid black 2px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>agb - a rust framework for making Game Boy Advance games</h1>
    </header>
    <section>
      <div class="gameDisplay">
        <div>
          <div><img src="assets/left.png" /></div>
          <iframe
            onload="this.contentWindow.focus()"
            src="mgba/index.html"
          ></iframe>
          <div><img src="assets/right.png" /></div>
        </div>
      </div>
      <div class="help">
        <p>
          Press escape to open the menu where you can view or change controls
          and restart the game. The game provided is a combination of multiple
          Game Boy Advance games made using agb, you can press left or right on
          the main menu to switch game.
        </p>
      </div>
    </section>

    <section class="red">
      <div class="links">
        <a href="https://github.com/agbrs/agb">GitHub</a>
        <a href="????">Book</a>
      </div>
    </section>
  </body>
</html>