---
import Item from './item.astro';
---

<Item title="Notion Canvas" id="notion" layout={{
  desktop: { width: '50%', height: '500px' }
}}>
  <div
    id="text206"
    style="font-size: 22px; resize: none; padding: 10px; height: 100%; overflow-y: auto; padding-top: 0px; display: flex; flex-direction: column; gap: 10px;"
  >
    <a href="https://github.com/S1monlol/notionCanvas"><h1 style="width: fit-content; margin: 0;"><i><u><b>Notion Canvas</b></u></i></h1></a>

    <h2 style="margin: 0; flex-shrink: 0;">
      This project allows for integration between a Canvas calendar and a Notion database. It makes it easy to import assignments into your notion assignment database
    </h2>

    <div style="flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;">
      <video id="vid" controls="true" src="/demo.mov" style="max-width: 100%; max-height: 100%; object-fit: contain;"></video>
    </div>
  </div>
</Item>

<script>
  // if document is phone size, hide video
  if (window.innerWidth < 900) {
    document.getElementById("vid").style.display = "none";
  }
</script>
