/* These are comments.

:root means following is block of code
{} this applies to the whole page
 ::backdrop
 -- is a variable
 @media is a media query. This rule specifies the the style rules inside the block should apply if the user indicated a preference for dark mode.
 Colors can be represented with named CSS colors, rgb, or hex.

*/

/*
body {} 
--sans-font: responsible for most of the text
--mono-font: used for things like showing code
font-family: will read font in order for the first one that will work on the system
serif will use the default serif font on the browser
web fonts can be shown on a website even if its not installed on a visitor's system.

*/

/* Global Vaiables */
@media (prefers-color-scheme: light) {
:root,
::backdrop {
    --bg: #ffe7c4;
    --accent-bg: #fdc97b;
    --text: #3a1f12;
    --text-light: #585858;
    --border: #5f3e2f;
    --accent: #c43812;
    --accent-hover: #58FCEC;
    --accent-text: var(--bg);
    --code: #58FCEC;
    --preformatted: #444;
    --marked: #ffdd33;
    --disabled: #efefef;
}
}


    /* Dark theme */
    @media (prefers-color-scheme: dark) {
     :root,
     ::backdrop {
          color-scheme: dark;
         --bg: #21160E;
          --accent-bg: #37241b;
          --text: #FFFCEB;
          --text-light: #FFE66D;
          --border: #5f3e2f;
         --accent: #58FCEC;
          --accent-hover: #FFA58B;
         --accent-text: var(--bg);
         --code: #FFA58B;
         --preformatted: #FFE66D;
          --disabled: #111;
         }
        /* Add a bit of transparency so light media isn't so glaring in dark mode */
         img,
         video {
           opacity: 0.9;
         }
    
}