:root {
    --color-main: #252525;
    --color-high-light: #bcfff9;
    --color-high-light-darkness: #bcfff999;
    --color-high-light-darkness-max: #bcfff930;
    --color-high-light-darkness-max-static: #323E3D;
    --color-yellow: #f7d967;
    --color-yellow-darkness: #f7d96730;
    --color-red: #f57371;
    --color-red-darkness: #b44e4e;
    --color-red-darkness-max: #962b2e;
    --color-pink: #d43d8a;
    --color-green-blue: #68aca3;
    --color-green-blue-darkness-max: #68aca330;
    --color-light-blue: #597497;
    --color-dark-blue: #542a71;

    --font-main: 'Road_Rage';
    --font-2: 'CyberwarRegular-7BX0E';
    --font-3: 'TaipeiSansTCBetaRegular';
    --font-4: 'TaipeiSansTCBetaBold';
    --font-5: 'SoukouMincho';
    --font-6: 'pressStart2P';
    --font-family-main: var(--font-main), var(--font-4), var(--font-5);

    --text-shadow-main: 1px 1px 5px var(--color-high-light-darkness), 1px 1px 5px var(--color-high-light-darkness);
    --text-shadow-2: 1px 1px 5px var(--color-yellow), 1px 1px 5px var(--color-yellow);
    --text-shadow-3: -5px -5px 2px var(--color-high-light-darkness-max), 5px 5px 2px var(--color-high-light-darkness-max);
    --text-shadow-4: -5px -5px 2px var(--color-red-darkness-max), 5px 5px 2px var(--color-red-darkness-max);
    --text-shadow-5: -5px -5px 2px var(--color-green-blue-darkness-max), 5px 5px 2px var(--color-green-blue-darkness-max);
}

svg {
    pointer-events: none;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #353535;
}

::-webkit-scrollbar-thumb:hover {
    background: #353535;
}

::-webkit-scrollbar-track {
    background: #ffffff00;
}

::selection {
    color: white;
    background-color: #3498db;
}

button {
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
    border: 1px solid #ffffff70;
}

button:hover {
    border: 1px solid #ffffffaa;
}

.text-yellow {
    color: var(--color-yellow);
}

.text-red {
    color: var(--color-red);
}

.text-green {
    color: var(--color-green-blue);
}