<script lang="ts">
  import svelteLogo from '../assets/svelte.svg'
  import viteLogo from '../assets/vite.svg'
</script>

<div class="heading">Azalea's Colorful Slither Link</div>
<div class="sub-heading">
  <img src={viteLogo} alt="Logo"/>
  <span><a href="https://github.com/hykilpikonna/colorful-link">GitHub</a> | <a href="https://aza.moe">Blog</a></span>
  <img src={svelteLogo} alt="Logo"/>
</div>
<div class="rules">
  Welcome to SlitherLink! 🧩 The rules are simple: Draw lines between the dots to create one big loop (no crossings, no branches). The numbers are your hints – they tell you how many lines should surround them. Left-click to draw, right-click to mark with an X. Can you crack the perfect path? <a href="https://www.youtube.com/watch?v=fqwE-CpeGS4&list=PLH_elo2OIwaBk44COgFhnJRt0-8xKMBQn">YouTube Tutorial</a>
</div>