---
// import start from "../assets/start.jpg";
---

<div
    style="background-color: #D4D0C8; height: 3.5rem; width: 100%; position: absolute; bottom: 0; display: flex; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; justify-content: space-between; box-shadow: 0 -2px #fffdfc, 0 -4px #cce9eb; z-index: 0;"
>
  <button aria-label="startButton">
    <!-- <img class="h-full w-full" src={start.src} alt="start" /> -->
    <h1 id="start-button"></h1>
  </button>
  <div id="taskbar-windows" style="display: flex; gap: 0.25rem; margin-left: 0.5rem; flex: 1; overflow-x: auto;">
  </div>
</div>

<style>
  #start-button {
    min-width: 104px;
    background-image: url(data:image/png;base64,[encoded data, 9612 characters]);
    width: 6.5rem;
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: 0.25rem;
    cursor: pointer;
    height: 2.25rem;

    box-shadow: -2px -2px #e0dede, -2px 0 #e0dede, 0 -2px #e0dede, -4px -4px white, -4px 0 white, 0 -4px white, 2px 2px #818181, 0 2px #818181, 2px 0 #818181,  2px -2px #e0dede, -2px 2px #818181, -4px 2px white, -4px 4px black, 4px 4px black, 4px 0 black, 0 4px black, 2px -4px white, 4px -4px black;
  }

  #start-button:active {
    box-shadow:
      -2px -2px #818181,
      -2px 0 #818181,
      0 -2px #818181,
      -4px -4px black,
      -4px 0 black,
      0 -4px black,
      2px 2px #e0dede,
      0 2px #e0dede,
      2px 0 #e0dede,
      2px -2px #818181,
      -2px 2px #e0dede,
      -4px 2px black,
      -4px 4px white,
      4px 4px white,
      4px 0 white,
      0 4px white,
      2px -4px black,
      4px -4px white;
  }
</style>
