:root
{
    --size-text-header-main: 23px;
    --size-text-header-sub:  19px;
    --size-text-paragraph:   15px;

    --space-large:  40px;
    --space-medium: 20px;
    --space-small:  10px;

    --duration-animation-short : 0.50s;
    --duration-animation-medium: 0.75s;
    --duration-animation-long  : 1.00s;

    --color-accent: rgba(255, 32, 96, 0.8); /* use super duper rarely */
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --color-background0: rgba(0, 0, 0, 1);
        --color-foreground0: rgba(255, 255, 255, 1);
        --color-background1: rgba(64, 64, 64, 1);
        --color-foreground1: rgba(192, 192, 192, 1);
        --color-background2: rgba(92, 92, 92, 1);
        --color-foreground2: rgba(160, 160, 160, 1);
    }
}
@media (prefers-color-scheme: light)
{
    :root
    {
        --color-background0: rgba(255, 255, 255, 1);
        --color-foreground0: rgba(0, 0, 0, 1);
        --color-background1: rgba(192, 192, 192, 1);
        --color-foreground1: rgba(64, 64, 64, 1);
        --color-background2: rgba(160, 160, 160, 1);
        --color-foreground2: rgba(92, 92, 92, 1);
    }
}

@font-face
{
    font-family: "Space Grotesk";
    src: url("https://xetute.com/fonts/Space%20Grotesk.ttf");
}

@font-face /* to make slow animation (e.g. to save bandwidth / client processing) look nice */
{
    font-family: "Edu QLD Hand";
    src: url("https://xetute.com/fonts/Edu%20QLD%20Hand.ttf");
}

*
{
    margin: 0;
    padding: 0;

    font-family: "Space Grotesk", monospace;
    font-weight: 400;
    font-size: var(--size-text-paragraph);
    line-height: 1.4;

    color: var(--color-foreground0);
    background: rgba(0, 0, 0, 0);
    border: 0px solid rgba(0, 0, 0, 0);

    outline: none;
    resize: none;

    scrollbar-width: none;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar { display: none; }

html, body
{
    width: 100dvw;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--color-background0);
}

::selection
{
    background: var(--color-foreground0);
    color: var(--color-background0);
}

i  { font-style: italic; }
strong { font-weight: 500; }
h1     { font-weight: 600; font-size: var(--size-text-header-main); }
h2     { font-weight: 600; font-size: var(--size-text-header-sub ); }
h3     { font-weight: 500; font-size: var(--size-text-header-sub ); }
h4     { font-weight: 400; font-size: var(--size-text-header-sub ); }
h5     { font-weight: 300; font-size: var(--size-text-header-sub ); }

input, textarea, button
{
    border-width: 0 1px;
    border-style: solid;
    border-color: var(--color-background2);

    padding: var(--space-medium);
    height: calc(var(--size-text-paragraph) * 1.4);

    transition: var(--duration-animation-short) ease-in-out;
    backdrop-filter: blur(4px);
}
input:focus, textarea:focus, button:hover, button:focus
{
    border-color: var(--color-foreground0);
    backdrop-filter: blur(6px) brightness(90%);
}
input::placeholder, textarea::placeholder { color: rgb(128, 128, 128); }

button
{
    border: 1px solid var(--color-background2);
    height: calc(var(--size-text-paragraph) * 1.4 + var(--space-medium) * 2 + 2px);
}

@keyframes fade_in
{
      0% { scale: 0.95; opacity: 0.0; filter: blur(8px); }
    100% { scale: 1.00; opacity: 1.0; filter: blur(0px); }
}

@keyframes fade_out
{
      0% { scale: 1.00; opacity: 1.0; filter: blur(0px); }
    100% { scale: 0.95; opacity: 0.0; filter: blur(8px); }
}