@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* for JBM: font-family: "JetBrains Mono", monospace; */

* {
    font-family: "Roboto", sans-serif;
    --warm-1: #ca52c9;
    --warm-2: #c84e9f;
    --warm-3: #c74b75;
    --warm-4: #c6484b;
    --cool-1: #0cf1ff;
    --cool-2: #3cc8f1;
    --cool-3: #6ca0e3;
    --cool-4: #9c77d5;
    --dark: #1a1932;
    --shadow: #00000080;
    --light: #ffffff;
    --gray-1: #92a1b9;
    --gray-2: #424c6e;
}

html {
    font-size: 32px;
    background-image: url("/static/gggg_background.png");
}

div.block {
    color: var(--light);
    backdrop-filter: blur(4px);
    background-color: var(--shadow);
    /* box-shadow: 0.5ch 0.5ch 4px var(--shadow); */
    transition: box-shadow 200ms;
}

a {
    color: var(--cool-3);
    text-decoration: none;
    transition: color 250ms;
}

a:hover {
    color: var(--cool-1);
    transition: color 250ms;
}

span.logo {
    background-image: linear-gradient(var(--cool-1), var(--cool-4));
    color: transparent;
    background-clip: text;
}

button {
    background-color: var(--shadow);
    border: 1px solid var(--gray-1);
    color: var(--light);
    transition: background-color 200ms ease-out;
}

button:active {
    background-color: var(--gray-1);
    transition: background-color 20ms ease-out;
}

img.gameplay {
    margin-bottom: 1ch;
}