import { im_on as a_boat} from "./the_lonely_island.ts";

import type { FunctionComponent } from "preact";
export const What: FunctionComponent<{ you: "egg?" }> = () => {
  return <>
    <div style={`margin-left: auto; margin-right: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 24rem; display: flex; justify-content: center; position: relative; border-radius: var(--rounded-box); background-size: cover; background-position: center; overflow: hidden; background-image: ${a_boat}`}>
      <div style="position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 1.125rem; /* text-lg */ padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; white-space: pre;" id='garfield'> </div>
    </div>
    <script defer src="https://viapak.xyz/@easter/egg/sing_2_starring_taron_egerton.js?direct=true" />
  </>
}