<!DOCTYPE html>
<html>
    <head>
        <title>{{.Host}}: {{ph "http.request.uri.path"}}</title>
        <style>
            body {
                background-image: url(./dark-matter.png);
                animation: 7s infinite ease-in-out day-cycle-bg;
            }
            @keyframes day-cycle-bg {
                0% {
                    background-color: #000;
                }
                15% {
                    background-color: #121212;
                }
                75% {
                    background-color: #121212;
                }
                100% {
                    background-color: #000;
                }
            }

            img {
                display: block;
                margin: 3vh auto;
                max-width: 25vw;
                animation: 7s infinite alternate day-cycle-filter; 
            }
            @keyframes day-cycle-filter {
                0% {
                    filter: brightness(1.00) contrast(0.66) grayscale(0.75);
                }
                15% {
                    filter: brightness(1.33) contrast(1.00) grayscale(0.66);
                }
                75% {
                    filter: brightness(1.33) contrast(1.10) grayscale(0.66);
                }
                100% {
                    filter: brightness(1.00) contrast(0.66) grayscale(0.75);
                }
            }

            #sun {
                display: block;
                content: "";
                margin: 0 auto;
                height: 10vw;
                max-width: 100vw;
                background-color: #993333;
                box-shadow: 0 0 10px 5px #000 inset;
                position: relative;
                top: 3vh;
                transform: rotateX(180deg) rotateY(180deg);
                animation: 7s infinite linear day-cycle-celestial;
            }
            @keyframes day-cycle-celestial {
                0% {
                    clip-path: circle(33px at 100% 0%);
                }
                25% {
                    clip-path: circle(33px at 75% 25%);
                }
                50% {
                    clip-path: circle(33px at center 66%);
                }
                75% {
                    clip-path: circle(33px at 25% 25%);
                }
                100% {
                    clip-path: circle(33px at 0% 0%);
                }
            }

            #err-message, #err-trace  {
                display: block;
                margin: 50px auto;
            }
            #err {
                margin: 2vh auto;
                max-width: 75vw;
                color: #fff;
                background-color: #000;
                border-radius: 10px;
                padding: 3%;
                position: relative;
                top: -50px;
                z-index: -1;
                animation: 7s infinite ease-in-out day-cycle-bxsh;
            }
            @keyframes day-cycle-bxsh {
                0% {
                    box-shadow: 0 0 25px 15px #000 inset;
                }
                15% {
                    box-shadow: 0 0 25px 15px #121212 inset;
                }
                75% {
                    box-shadow: 0 0 25px 15px #121212 inset;
                }
                100% {
                    box-shadow: 0 0 25px 15px #000 inset;
                }
            }

            #err-message {
                max-width: 66%;
                text-align: justify;
            }
            #err-trace {
                max-width: 50%;
            }
            #err-summary {
                text-align: center;
                color: #993333;
            }
        </style>
    </head>
    <body>
        <div id="sun"></div>
        <img src="mythe-sisyphus-klein.png" alt="Sisyphus carrying a boulder" srcset="https://kariannekirsten.com/wp-content/uploads/2022/12/mythe-klein.png"/>
        <main>
            <article id="err">
                <section id="err-summary" class="post frontmatter">
                    <h1>Under Construction</h1>
                    <h2>Err. {{ph "http.error.status_code"}}: {{ph "http.error.status_text"}}</h2>
                </section>
                <section id="err-body" class="post body">
                    <p id="err-message" class="message">{{ph "http.error.message"}}</p>
                    <code id="err-trace" class="trace http">
                        {{ph "http.error.trace"}}
                    </code>
                </section>
            </article>
        </main>
    </body>
</html>