@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
@import "./injectionStyles.css";

:root {
    --main-font: "Open Sans", sans-serif;
    --qud-font: "Source Code Pro", "Open Sans", "Segoe UI", "Consolas",
        "Lucida Console", "Courier New", "Courier";
    --bg-color: radial-gradient(
        rgba(5, 41, 41, 0.902),
        rgba(14, 25, 25, 0.902)
    );
    --bg-color-dark: #0f3b3a;
    --hover-darken: rgba(8, 14, 14, 0.3);
    --text-color: white;
    --text-color-inverted: black;
    --text-color-light: #b1c9c3;
    --text-color-faded: rgba(255, 255, 255, 0.5);
    --text-color-dark: rgba(191, 191, 191, 1);
    --anchor-unvisited-color: var(--cybernetic-color); /*#d3adc1;*/
    --anchor-visited-color: white; /*#c27ba0;*/
    --star-filled-color: #f6b26b;
    --h2-color: #e06666;
    --h3-color: #f6b26b;
    --h4-color: #b6d7a8;
    --qudzoo-color: #a64a2e;
    --skills-color: #77bfcf;
    --strength-color: #f15f22;
    --toughness-color: #d74200;
    --intelligence-color: #0096ff;
    --agility-color: #cfc041;
    --willpower-color: #00c420;
    --ego-color: #da5bd6;
    --mutation-color: #b154cf;
    --cybernetic-color: #0096ff;
    --stat-color: #e99f10;
    --misc-color: #98875f;
    --body-size: 19px;
    --heading-height: 5rem;
    --desktop-margin-size: 5rem;
    --mobile-margin-size: 1rem;
    --scanlines-image: url(https://forums.libretro.com/uploads/default/optimized/2X/3/3a57f4a9ca1419203565fd9e8f90cd2d2eb7668a_2_1024x576.png);
}

::-webkit-scrollbar {
    width: 0.5rem;
}

::-webkit-scrollbar-track {
    box-shadow: 0;
    background: var(--bg-color);
}

::-webkit-scrollbar-track-piece {
    outline: 1px solid var(--text-color-faded);
    outline-offset: -0.25rem;
}

::-webkit-scrollbar-thumb {
    background: var(--text-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-dark);
}

::-webkit-scrollbar-button {
    height: 3px;
    background: var(--text-color);
}

html {
    background-image: var(--bg-color);
    color: var(--text-color);
    font-family: var(--main-font);
    scroll-padding-top: var(--heading-height);
}

body {
    margin: 0;
    padding: 0;
}

html::before {
    background-image: var(--scanlines-image);
    content: " ";
    display: block;
    position: fixed;
    z-index: -1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-repeat: no-repeat;
    background-size: cover;
}

a {
    color: var(--anchor-unvisited-color);
}

a:visited {
    color: var(--anchor-visited-color);
}

strong {
    font-weight: 700;
}

code {
    font-family: var(--qud-font);
    color: white;
}