@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Oswald");

:root {
    --font-body: "Oswald", sans-serif;

    --color-foreground: #F4ECE5;
    --color-background: #575757;

    --color-background-light: oklch(from var(--color-background) calc(l + 0.075) c h);
    --color-background-dark: oklch(from var(--color-background) calc(l - 0.075) c h);

    --color-header-1: #e84a4a;
    --color-header-2: #ea742e;
    --color-header-3: #eacb3a;
    --color-header-4: #46c96f;
    --color-header-5: #4a8fe8;
    --color-header-6: #8f64d8;
    --color-header-7: #1a1a1a;
    --color-header-8: #8a5a3c;
    --color-header-9: #7fcce8;
    --color-header-10: #f2a0bc;
    --color-header-11: #e8e8e8;

    --color-header: var(--color-header-1);
    --color-header-highlight: oklch(from var(--color-header) calc(l + 0.1) c h);
    --color-header-3d-1: oklch(from var(--color-header) calc(l * 0.85) c h);
    --color-header-3d-2: oklch(from var(--color-header) calc(l * 0.8) c h);
    --color-header-3d-3: oklch(from var(--color-header) calc(l * 0.75) c h);
    --color-header-3d-4: oklch(from var(--color-header) calc(l * 0.7) c h);
    --color-header-3d-5: oklch(from var(--color-header) calc(l * 0.65) c h);
    --color-header-shadow-1: rgba(0, 0, 0, 0.05);
    --color-header-shadow-2: rgba(0, 0, 0, 0.1);
    --color-header-shadow-3: rgba(0, 0, 0, 0.15);
    --color-header-shadow-4: rgba(0, 0, 0, 0.2);
    --color-header-shadow-5: rgba(0, 0, 0, 0.25);
    --color-header-shadow-6: rgba(0, 0, 0, 0.3);
    --color-header-shadow-7: rgba(0, 0, 0, 0.35);

    --color-paragraph-background: #151515;
    --color-paragraph-highlight: rgba(255, 255, 255, 0.1);

    --color-nav: #212121;
    --color-nav-shadow: rgba(0, 0, 0, 0.25);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.25;
}

html {
    width: 100%;
    min-height: 100%;
}

body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: linear-gradient(
        135deg,
        var(--color-background-light),
        var(--color-background),
        var(--color-background-dark)
    );
}

main {
    display: grid;
    gap: 0.5rem;
}

main h1 {
    color: var(--color-header);
    font-size: 7.5rem;
    font-weight: bold;
    letter-spacing: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        0 -0.05rem 0 var(--color-header-highlight),
        0 0.05rem 0 var(--color-header-3d-1),
        0 0.1rem 0 var(--color-header-3d-2),
        0 0.15rem 0 var(--color-header-3d-3),
        0 0.2rem 0 var(--color-header-3d-4),
        0 0.25rem 0 var(--color-header-3d-5),
        0 0.3rem 0.05rem var(--color-header-shadow-1),
        0 0 0.25rem var(--color-header-shadow-2),
        0 0.05rem 0.15rem var(--color-header-shadow-3),
        0 0.15rem 0.25rem var(--color-header-shadow-4),
        0 0.25rem 0.5rem var(--color-header-shadow-5),
        0 0.5rem 0.5rem var(--color-header-shadow-6),
        0 1rem 1rem var(--color-header-shadow-7);
}

main p {
    color: transparent;
    background-color: var(--color-paragraph-background);
    background-clip: text;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.125rem;
    text-align: center;
    text-transform: lowercase;
    text-shadow: var(--color-paragraph-highlight) 0 0.05rem 0;
}

footer {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 99;
}

footer nav {
    display: grid;
}

footer ul {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    list-style: none;
}

footer a {
    color: var(--color-nav);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.075rem;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 0 0.075rem var(--color-nav-shadow);
}

footer a:hover, footer a:focus-visible {
    color: var(--color-header); /* highjack these. */
    text-shadow: 0 0 0.075rem var(--color-header);
}