/* Fonts */

@font-face {
    font-family: Fusion;
    src: url("/static/projectretro/fonts/JEFFE___.TTF");
    font-weight: normal;
}

/* Shared Theme */

:root {
    --theme-content-normal: #eeeeee; /* Normal content. */
    --theme-content-light: #cccccc; /* Content with less emphasis or importance. */
    --theme-background-normal: #111111; /* Normal page background. */
    --theme-surface-normal: #222222; /* Normal surface that appears in front of the background. */
    --theme-surface-behind: #000000; /* Surface that appears behind or inferior to the background. */
    --retro-darkgreen: #75c33c; /* Darkest green pixel from the top of the R in the Project Retro logo. */
    --retro-lightgreen: #b0c538; /* Brightest green pixel from the center of the R in the Project Retro Logo. */
    --dex-blue: #0cccd8; /* DexLabs inspired color. */
    /*
     If we ever add a light theme, change color-scheme to "light dark" and add a media selector to set the new theme vars.
     Ex:
     @media (prefers-color-scheme: light) {
       :root {
         --theme-content-normal: ...
     */
    color-scheme: dark;
}

/* Essential Page Setup */

html, body {
    padding: 0;
    margin: 0;
    font-family: Fusion, sans-serif;
    font-size: 12pt;
    color: var(--theme-content-normal);
    background-color: var(--theme-background-normal);
}

* {
    box-sizing: border-box;
}

/* Global Styling of standard HTML components */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0.6em;
    margin-bottom: 0.4em;
    width: fit-content;
    font-weight: normal;
}

h1, .retroGradient {
    /* Create a gradient background, then clip the background to where the rendered text would be. */
    background: linear-gradient(0deg, var(--retro-darkgreen) 0%, var(--retro-lightgreen) 50%, var(--retro-darkgreen) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback if -webkit-background-clip is not supported */
    color: var(--retro-darkgreen);
}

p {
    font-family: sans-serif;
}

@media screen and (min-width: 501px) {
    h1 {font-size: 48pt;}
    h2 {font-size: 40pt;}
    h3 {font-size: 32pt;}
    h4 {font-size: 24pt;}
    h5 {font-size: 16pt;}
    h6 {font-size: 12pt;}
}

@media screen and (max-width: 500px) {
    /* pt sizes from >=701px divided by 4 */
    h1 {font-size: 12vw;}
    h2 {font-size: 10vw;}
    h3 {font-size: 8vw;}
    h4 {font-size: 6vw;}
    h5 {font-size: 4vw;}
    h6 {font-size: 3vw;}
}

/* Fixes */

/*
 Remove browser styling for buttons.
 https://stackoverflow.com/a/45890842/3116659
 */
button, input[type="button"], input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}