---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Not found">
    <div id="wrapper">
        <div id="box">
            <svg viewBox="30 -20 450 280" x="0" y="0">
                <!-- Box -->
                <polygon
                    points="100,70 170,0 370,50 370,180"
                    style="fill:#b58747;"></polygon>
                <defs>
                    <linearGradient
                        id="shadow_grad1"
                        x1="50%"
                        y1="0%"
                        x2="0%"
                        y2="50%"
                    >
                        <stop
                            offset="0%"
                            style="stop-color:#876029;stop-opacity:1"></stop>
                        <stop
                            offset="100%"
                            style="stop-color:#000000;stop-opacity:1"></stop>
                    </linearGradient>
                </defs>
                <defs>
                    <linearGradient
                        id="shadow_grad2"
                        x1="0%"
                        y1="0%"
                        x2="50%"
                        y2="100%"
                    >
                        <stop
                            offset="0%"
                            style="stop-color:#876029;stop-opacity:1"></stop>
                        <stop
                            offset="100%"
                            style="stop-color:#000000;stop-opacity:1"></stop>
                    </linearGradient>
                </defs>
                <polygon
                    points="100,70 170,0 330,100 300,120"
                    style="fill:#876029;fill:url(#shadow_grad1)"></polygon>
                <polygon
                    points="100,70 170,0 170,130 100,200, 100,70"
                    style="fill:#876029;fill:url(#shadow_grad2)"></polygon>
                <line
                    x1="170"
                    y1="0"
                    x2="370"
                    y2="50"
                    style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
                ></line>
                <line
                    x1="170"
                    y1="0"
                    x2="170"
                    y2="130"
                    style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
                ></line>
                <!-- Katzenschweif -->
                <path
                    id="schweif"
                    d="M 280,120 C 250 100, 310 70, 320 20"
                    style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round"
                ></path>
                <!-- Box-linien -->
                <polygon
                    points="100,70 300,120 370,50 370,180 300,250 100,200"
                    style="fill:#d19b4f;"></polygon>
                <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
                    <line x1="100" y1="70" x2="100" y2="200"></line>
                    <line x1="100" y1="200" x2="300" y2="250"></line>
                    <line x1="300" y1="250" x2="300" y2="120"></line>
                    <line x1="100" y1="70" x2="300" y2="120"></line>
                    <line x1="300" y1="120" x2="370" y2="50"></line>
                    <line x1="300" y1="250" x2="370" y2="180"></line>
                    <line x1="370" y1="50" x2="370" y2="180"></line>
                </g>
                <!-- Lappen-rechts -->
                <polygon
                    points="300,120 350,150 420,80 370,50"
                    style="fill:#b58747;"></polygon>
                <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
                    <line x1="300" y1="120" x2="370" y2="50"></line>
                    <line x1="300" y1="120" x2="350" y2="150"></line>
                    <line x1="350" y1="150" x2="420" y2="80"></line>
                    <line x1="370" y1="50" x2="420" y2="80"></line>
                </g>
                <!-- Lappen-links -->
                <polygon
                    points="100,70 50,100 120,30 170,0"
                    style="fill:#b58747;"></polygon>
                <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
                    <line x1="100" y1="70" x2="170" y2="0"></line>
                    <line x1="100" y1="70" x2="50" y2="100"></line>
                    <line x1="50" y1="100" x2="120" y2="30"></line>
                    <line x1="170" y1="0" x2="120" y2="30"></line>
                </g>
                <!-- Text -->
                <text
                    x="120"
                    y="120"
                    style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);"
                    >404</text
                >
                <!-- Killeraugen -->
                <ellipse
                    cx="275"
                    cy="150"
                    rx="32"
                    ry="20"
                    style="fill:#291e0f;transform:rotateZ(12deg)"></ellipse>
                <ellipse
                    cx="266"
                    cy="153"
                    rx="7"
                    ry="5"
                    style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
                <ellipse
                    cx="266"
                    cy="153"
                    rx="2"
                    ry="5"
                    style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
                <ellipse
                    cx="285"
                    cy="153"
                    rx="7"
                    ry="5"
                    style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
                <ellipse
                    cx="285"
                    cy="153"
                    rx="2"
                    ry="5"
                    style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
                <rect
                    id="blinzeln"
                    width="40"
                    height="22"
                    x="255"
                    y="139"
                    style="fill:#291e0f;transform:rotateZ(12deg);"></rect>
            </svg>
        </div>
        <div id="errorText">
            The site you requested could not be found.<br />
            <a href="/">&gt; Back to the main page &lt;</a>
        </div>
    </div>
</Layout>

<style>
    /*.container {
    background: #222222;
    width: 100vw;
    height: 100vh;
}*/

    #errorText {
        margin-top: 2vh;
        color: #fff;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 150%;
    }

    #wrapper a:link,
    #wrapper a:visited,
    #wrapper a:hover,
    #wrapper a:active {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }

    #wrapper {
        margin: auto;
        position: relative;
    }

    #box {
        max-width: 800px;
        margin: auto;
    }

    @keyframes schweif {
        0% {
            d: path("M 280,120 C 250 100, 310 70, 320 20");
        }
        12.5% {
            d: path("M 280,120 C 260 100, 280 70, 310 20");
        }
        25% {
            d: path("M 280,120 C 280 100, 260 70, 290 20");
        }
        37.5% {
            d: path("M 280,120 C 280 100, 240 70, 270 20");
        }
        50% {
            d: path("M 280,120 C 280 100, 240 70, 230 20");
        }
        62.5% {
            d: path("M 280,120 C 270 100, 260 70, 250 20");
        }
        75% {
            d: path("M 280,120 C 270 100, 280 70, 270 20");
        }
        87.5% {
            d: path("M 280,120 C 250 100, 310 70, 290 20");
        }
        100% {
            d: path("M 280,120 C 250 100, 310 70, 320 20");
        }
    }

    #schweif {
        animation-name: schweif;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    #box svg:hover > #schweif {
        animation-duration: 1s;
    }

    #blinzeln {
        fill-opacity: 1;
        transition: fill-opacity 0.5s;
    }

    #box svg:hover > #blinzeln {
        fill-opacity: 0;
    }
</style>