@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: #1a193280;
    --light: #ffffff;
    --gray-1: #92a1b9;
    --gray-2: #424c6e;
}

html {
    font-size: 32px;
    background-image: linear-gradient(var(--warm-1), var(--warm-4));
}

div.block {
    color: var(--light);
    background-color: var(--gray-2);
    box-shadow: 0.5ch 0.5ch var(--shadow);
    transition: box-shadow 200ms;
}

div.block:hover {
    box-shadow: 1ch 1ch var(--shadow);
}

a {
    color: var(--cool-2);
    background-clip: text;
    text-decoration: none;
    transition: none;
}

a:hover {
    color: transparent;
    background-image: linear-gradient(var(--cool-2), var(--cool-4));
    transition: color 250ms;
}

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

button {
    background-color: var(--gray-2);
    border: 1px solid var(--gray-1);
    color: var(--light);
    box-shadow: 0.5ch 0.5ch var(--shadow);
    transition: box-shadow 200ms, background-color 200ms;
}

button:hover {
    box-shadow: 0.75ch 0.75ch var(--shadow);
}

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