* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button {
    all: unset;
    cursor: pointer;
}

.hide {
    animation: hide .5s forwards;
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.show {
    animation: show .5s forwards;
}

@keyframes show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html {
    color-scheme: light dark;
    background-color: var(--bg-dark);
}

:root {
    --primary-color: #0095ff;
    --primary-color-dark: #0062a5;
    --primary-color-transparent: #0095ff08;
    --bg: #f6f6f6;
    --bg-dark: #fff;
    --color: #111;
}

svg path:not([fill]),
svg path[fill^="#fff"],
svg path[fill^="#000"] {
    fill: var(--color);
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a0a;
        --bg-dark: #111;
        --color: #fff;
    }
}