{{ define "head" }}
<style>
    html {
        background: var(--f_high);
    }

    body {
        -webkit-text-size-adjust: 100%;
        margin: 0;
    }

    a {
        color: var(--f_med);
    }

    ul {
        list-style: none;
        text-align: center;
        font-size: 1.25rem;
        padding: 0;
    }

    li {
        padding-bottom: 1rem;
    }

    .content {
        margin: 3rem auto 8rem;
        border: 3px solid var(--b_inv);
        padding: 2rem;
        box-shadow: 8px 8px var(--background);
        max-width: 30rem;
        background: var(--background);
    }

    .ident-imgs {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .logo {
        display: block;
        width: 8rem;
        height: 8rem;
        margin: 0 auto;
    }

    .name {
        display: block;
        letter-spacing: 0.5rem;
        font-family: monospace;
        color: var(--b_high);
        font-size: 2rem;
        margin-left: 1rem;
        text-align: center;
        animation: 1s ease-in-out fade-in, 1s ease-in-out spacing;
    }

    h2 {
        letter-spacing: 0.5rem;
        font-family: monospace;
        color: var(--b_high);
        text-align: center;
    }

    blockquote {
        color: var(--f_high);
        text-align: center;
        margin: 3rem 0.5rem 1rem;
    }

    blockquote + p {
        color: var(--f_med);
        text-align: center;
    }

    blockquote + p > span {
        font-style: italic;
    }

    .round-img {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }

    .header {
        height: 40vh;
    }

    .header-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        image-rendering: crisp-edges;
    }

    .divider > hr {
        top: -4rem;
        position: relative;
        padding: 0;
        margin: 0;
        animation: none;
        border: 1px solid var(--b_low);
    }

    .divider > .round-img {
        z-index: 1;
        position: relative;
        border: 1rem solid var(--background);
        image-rendering: crisp-edges;
    }

    nav {
        margin-bottom: 4rem;
    }

    nav ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    nav li {
        padding: 0;
        margin-top: 1rem;
    }

    nav li > a {
        border: 1px solid var(--b_med);
        width: fit-content;
        padding: 0.25rem 0.5rem;
        margin: 0.5rem;
        box-shadow: 4px 4px var(--b_low);
        text-decoration: none;
        font-family: monospace;
        font-size: 1rem;
        border-radius: var(--border-radius);
    }

    nav li > a:hover {
        background: var(--b_high);
        color: var(--background);
        border-color: var(--background);
        box-shadow: 4px 4px var(--b_high);
    }

    @media screen and (max-width: 600px) {
        .header {
            height: 30vh;
        }

        .content {
            max-width: 17rem;
        }

        .name {
            font-size: 1.5rem;
        }

        .logo {
            width: 6rem;
            height: 6rem;
        }

        .round-img {
            width: 4rem;
            height: 4rem;
        }

        .divider > hr {
            top: -3rem;
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes spacing {
        from {
            letter-spacing: normal;
        }

        to {
            letter-spacing: 0.5rem;
        }
    }
</style>
{{ end }}

{{ define "body" }}
<div class="header">
    <img class="header-img" src="/assets/img/sunset-d.png">
</div>
<div class="content">
    <img class="logo" src="/assets/svg/logo-light.svg">
    <h1 class="name">deserthorns</h1>
    <nav>
        <ul>
            <li>
                <a href="/creative">creative</a>
            </li>
            <li>
                <a href="/projects">projects</a>
            </li>
            <li>
                <a href="/about">about</a>
            </li>
            <!-- <li>
                <a href="/now">now</a>
            </li>
             -->
            <li>
                <a href="https://git.deserthorns.net/">git</a>
            </li>
        </ul>
    </nav>
    <div class="divider">            
        <img class="round-img" src="/assets/img/vista-d.png">
        <hr>
    </div>
    <blockquote>
        <p>Your hearts know in silence the secrets of the days and the nights.</p>
        <p>But your ears thirst for the sound of your heart’s knowledge.</p>
    </blockquote>
    <p>- Khalil Gibran, <span>The Prophet</span></p>        
</div>
{{ end }}

{{ define "scripts" }}
{{ end }}