---
import Image from "astro/components/Image.astro";
import redHeartFlat from "../images/red_heart_flat.svg";

const pageTitle = "emma's place";
const motto = "a celebration of self-expression through the personal web";

const backgroundColor = "#ffd4de";
const backgroundColorNightMode = "#240046";
const biPridePink = "#d60270";
const biPridePurple = "#9b4f96";
const biPrideBlue =  "#0038a8";
---

<header>
	<span class="logo">
		{pageTitle} <Image class="header-heart" src={redHeartFlat} alt="a red heart meant to symbolize love" />
	</span>
	<span class="motto">
        {motto}
	</span>
</header>

<style define:vars={{biPridePink, biPridePurple, biPrideBlue, backgroundColor, backgroundColorNightMode}}>
    @font-face {
        font-family: lato-regular;
        src: url("/lato-regular.woff2");
    }

    @font-face {
        font-family: pacifico;
        src: url("/pacifico.woff2");
    }

    header {
        background-color: var(--backgroundColor);
        grid-row: 1/2;
        grid-column: 1/3;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        height: 6vh;
        width: 80vw;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom: 10px solid;
        border-image-slice: 1;
        border-width: 5px;
        border-image-source: linear-gradient(
            to right,
            var(--biPridePink) 0 33%,
            var(--biPridePurple) 33% 66%,
            var(--biPrideBlue) 66%
        );
        font-size: 1.4rem;
        margin-top: 0.43rem;
    }

    .logo {
        font-family: pacifico;
        font-size: 1.35rem;
        letter-spacing: 0.1rem;
    }

    .motto {
        font-family: lato-regular;
        letter-spacing: 0.05rem;
    }

    .header-heart {
        height: 24px;
        width: 24px;
        vertical-align: sub;
    }

    @media (prefers-color-scheme: dark) {
        header {
            background-color: var(--backgroundColorNightMode);
        }
</style>