:root {
    --foreground-light-color: #d9d9d9;
    --foreground-dark-color: #a5a5a5;
    --background-light-color: #393E46;
    --background-dark-color: #222831;

    --telegram-backcolor: var(--foreground-light-color);
    --itch-io-backcolor: var(--foreground-light-color);
    --github-backcolor: var(--foreground-light-color);
}

* {
    font-family: Hikasami;
}

html {
    font-size: min(2vw, 1.5vh);
}

body {
    margin: 0;
}

.section {
    transition: background-color 0.25s;

    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.focused {
}

.unfocused {
}

.focused > .transition-all {
    opacity: 100%;
    transform: translateY(0em);
}

.unfocused > .transition-all {
    opacity: 0;
    transform: translateY(2em);
}

.transition-all {
    transition: all 0.25s;
}

button {
    cursor: pointer;

    padding: 0.75em 1.25em;

    border-radius: 0.75em;
    border: none;

    font-weight: bold;
    font-size: 1em;

    transition: background-color 0.1s, color 0.1s;

    color: var(--background-light-color);
    background-color: var(--foreground-light-color);
}

button:hover {
    color: color-mix(in xyz, var(--background-light-color) 75%, #000000 100%);
    background-color: color-mix(in xyz, var(--foreground-light-color) 75%, #000000 100%);
}

a:link,
a:hover,
a:active {
    color: var(--foreground-light-color);
}

a:visited {
    color: var(--foreground-dark-color);
}