@layer initial, mobile, desktop, addons, animation;

@property --foreground {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --background {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --color {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --header-color {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --subheader-color {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --surface-0 {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --surface-1 {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --motto-color {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

@property --motto-shadow {
    syntax: "<color>";
    initial-value: initial;
    inherits: true;
}

:root {
    --black: #1a1a1f;
    --white: #ffffff;

    --red: #fb0a26;
    --dull-red: #3c2633;
    --black-red: #1b080a;

    --light-cyan: #b2fee8;
    --cyan: #00fefe;
    --dark-cyan: #3ecbc3;

    --lilac: #d3a2f5;
    --neon-purple: #bd00ff;
    --light-purple: #a24ce9;
    --purple: #6a1b9a;
    --dark-purple: #3f0d6b;
    --black-purple: #1a003e;

    --orange: #ff5c00;
    --yellow: #fdee00;
    --green: #03d271;

    --foreground: var(--white);
    --background: var(--black-red);
    --color: var(--foreground);
    --header-color: var(--red);
    --subheader-color: var(--white);

    --surface-0: rgb(from var(--red) r g b / 0.75);
    --surface-1: var(--red);

    --motto-color: var(--cyan);
    --motto-shadow: var(--neon-purple);

    --enabled: var(--cyan);
    --disabled: var(--dull-red);

    --header-font: "Michroma", "Impact", "Verdana", sans-serif;
    --body-font:
        "Rajdhani", "Ubuntu", "Roboto Condensed", "Trebuchet MS",
        "Arial Narrow", sans-serif;
    --font-size: 24px;
    --small-font-size: 14px;

    font-family: var(--body-font);
    font-size: var(--font-size);

    --stripe-width: 10px;
    --stripe-hyp: calc((var(--stripe-width) * 2) * 1.41421356);
    --inactive-stripes: repeating-linear-gradient(
        -45deg,
        var(--disabled),
        var(--disabled) var(--stripe-width),
        transparent var(--stripe-width),
        transparent calc(var(--stripe-width) * 2)
    );

    --active-stripes: repeating-linear-gradient(
        -45deg,
        var(--enabled),
        var(--enabled) var(--stripe-width),
        transparent var(--stripe-width),
        transparent calc(var(--stripe-width) * 2)
    );
}

:root[data-theme="red"] {
    --foreground: var(--white);
    --background: var(--black-red);
    --color: var(--foreground);
    --header-color: var(--red);
    --subheader-color: var(--white);

    --surface-0: rgb(from var(--red) r g b / 0.75);
    --surface-1: var(--red);

    --motto-color: var(--cyan);
    --motto-shadow: var(--neon-purple);

    --enabled: var(--cyan);
    --disabled: var(--dull-red);
}

:root[data-theme="purple"] {
    --foreground: var(--white);
    --background: var(--black-purple);
    --color: var(--foreground);
    --header-color: var(--yellow);
    --subheader-color: var(--white);

    --surface-0: rgb(from var(--neon-purple) r g b / 0.75);
    --surface-1: var(--purple);

    --motto-color: var(--yellow);
    --motto-shadow: var(--orange);

    --enabled: var(--yellow);
    --disabled: var(--dark-purple);
}

* {
    min-width: 0;
    transform-style: preserve-3d;
}

body {
    background-color: var(--background);
    color: var(--cyan);
    font-family: var(--body-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--header-font);
    text-transform: uppercase;
}

@layer initial {
    time {
        color: var(--foreground);
        font-size: var(--small-font-size);
        border-bottom: 1px solid white;
    }

    .layout {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .flex {
        display: flex;
    }

    .fit-content {
        width: fit-content;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .stretch {
        align-items: stretch;
    }

    .column {
        flex-direction: column;
    }

    .center {
        justify-content: center;
        align-items: center;
    }

    .grow {
        flex: 1;
    }

    .offset-left {
        margin-left: 3rem;
    }

    .offset-right-xs {
        margin-right: 0.5rem;
    }

    .clip-bl {
        --border-size: 4px;
        --clip-size: 16px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--clip-size)),
            calc(100% - var(--clip-size)) 100%,
            0 100%
        );
    }

    html {
        display: flex;
        height: 100%;
    }

    body {
        align-content: stretch;
        align-items: center;
        background:
            radial-gradient(
                circle,
                transparent 6%,
                var(--background) 6%,
                var(--background) 94%,
                transparent 94%,
                transparent
            ),
            radial-gradient(
                    circle,
                    transparent 6%,
                    var(--background) 6%,
                    var(--background) 94%,
                    transparent 94%,
                    transparent
                )
                75px 75px,
            linear-gradient(#667 1px, transparent 1px) 0 -1px,
            linear-gradient(90deg, #667 1px, var(--background) 1px) -1px 0;

        background-size:
            150px 150px,
            150px 150px;

        flex: 1;
        opacity: 0.8;
    }

    .grid {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;

        --s: 5px;
        background-size: 40px 40px;
        background-image:
            linear-gradient(to right, white 1px, transparent 1px),
            linear-gradient(to bottom, white 1px, transparent 1px);

        mask-image: conic-gradient(
            from 0deg at 5px 5px,
            black 25%,
            transparent 0%
        );
        mask-size: 40px 40px;
        mask-repeat: repeat;
    }

    fs-motto {
        flex: 1 1 10%;
        color: var(--motto-color);
        text-shadow: 2px 2px var(--motto-shadow);
        align-content: flex-end;
    }

    .main-container {
        row-gap: 1rem;
    }

    .main-content {
        align-items: center;
        flex: 1 1 80%;
        justify-content: flex-end;
        padding-right: 1rem;
        margin-left: 1rem;
    }

    .menu {
        width: 100%;
        max-width: 600px;
        row-gap: 4px;
    }

    fs-footer {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 1 10%;

        padding: 0.5rem;
    }

    .js-hidden {
        display: none;
    }

    .themes {
        display: flex;
        flex-direction: row;
        column-gap: 0.75rem;
        margin-right: 1rem;
        justify-content: flex-end;
        flex: 1;

        theme-selector {
            border: 1px solid var(--white);
            width: 2rem;
            height: 1rem;
        }
    }

    .themes:not(.js-hidden) {
        cursor: pointer;
        theme-selector[theme="red"] {
            background-color: var(--red);
        }

        theme-selector[theme="purple"] {
            background-color: var(--purple);
        }
    }
}

@layer desktop {
    @media (min-width: 600px) {
        .layout {
            flex-direction: row;
        }

        .themes {
            justify-content: flex-start;
            margin-left: 1rem;
            theme-selector {
                width: 2rem;
                height: 0.66rem;
            }
        }
    }
}

@layer addons {
    @media (min-width: 600px) {
        fs-footer::before {
            content: "";
            top: -50px;
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: rgb(from var(--white) r g b / 0.6);
            z-index: -1;

            --clip-height: 35px;
            --border-width: 1px;

            clip-path: polygon(
                0 var(--clip-height),
                30% var(--clip-height),
                60% 0,
                100% 0,
                100% var(--border-width),
                60% var(--border-width),
                30% calc(var(--border-width) + var(--clip-height)),
                0 calc(var(--border-width) + var(--clip-height))
            );
            padding: 5px;
        }

        .menu::before {
            content: "";
            position: absolute;
            top: -25px;
            left: -20px;
            height: 100px;
            width: 150px;
            border: 1px solid rgb(from var(--white) r g b / 0.75);
            border-right: 0;
            border-bottom: 0;
        }
    }
}