---
title: �
prevent_zoom: true
---

<style>
  html {
    font-size: min(9svw, 9svh, 4.5rem);
    overscroll-behavior: none;
  }

  cube-scene {
    height: 100%;
  }

  cube-face {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    box-shadow: 0 0 10px var(--foreground);
  }
</style>

{{ set cube_face }}
  <div class="absolute -z-1 size-[100%] shadow-[0_0_10px_black] dark:shadow-[0_0_10px_white]"></div>

  <a class="size-[100%] bg-black     hover:bg-[olive]"       href={{ "/" |> url(true) }}></a>
  <a class="size-[100%] bg-[magenta] hover:bg-[greenyellow]" href={{ "/" |> url(true) }}></a>
  <a class="size-[100%] bg-[magenta] hover:bg-[greenyellow]" href={{ "/" |> url(true) }}></a>
  <a class="size-[100%] bg-black     hover:bg-[olive]"       href={{ "/" |> url(true) }}></a>
{{ /set }}

{{ include "cube.vto" {
  cube_face_front:  cube_face,
  cube_face_back:   cube_face,
  cube_face_left:   cube_face,
  cube_face_right:  cube_face,
  cube_face_top:    cube_face,
  cube_face_bottom: cube_face,

  cube_size: "5rem",
  cube_last: true,
} }}