/*------------------------------------*\
  A delightful list of variables borrowed from coolguy.website
  #VARIABLES.CSS
    our defining features
\*------------------------------------*/

:root {
    /*------------------*\
      #Typography
    \*..................*/

    --font: 'Courier New', serif; /* Sans and Mono handled with font-variations */
    --font-root: 26px;
    --font-weight: 300;
    /* Using the musical tetrotonic scale, from https://spencermortensen.com/articles/typographic-scale/ */
    --font-xxs: .5201rem;
    --font-xs: .8409rem;
    --font-s: 1rem;
    --font-m: 1.1892rem;
    --font-ml: 1.4142rem;
    --font-l: 1.6818rem;
    --font-xl: 2rem;
    --font-xxl: 2.3784rem;
    --font-xxxl: 3rem;
    --heading-align: left;



    /*------------------*\
      #Palette
    \*..................*/

    --color-primary: rebeccapurple;
    --color-secondary-a: #005c5c;
    --color-secondary-b: #ca00c6;
    --color-accent: fuchsia ;
    --color-accent-a: darkmagenta;
    --color-accent-b: rgb(89, 207, 207);
    --color-side: #ffb583;

    --black: black;
    --white: white;
    --brown: #6B4423;
    --semi-transparent: rgba(255,255,255,0.1);
    --gray-light: gainsboro;
    --gray-med: lightgray;
    --gray-dark: darkgray;
    --gray-darker: gray;

    --color-body: var(--black);

    --color-nav: var(--color-secondary-a);
    --color-nav-text: var(--color-secondary-a);
    --color-nav-hover: var(--color-secondary-b);
    --color-nav-pressed: var(--color-accent-b);

    --color-link: var(--color-secondary-a);
    --color-link-hover: var(--color-secondary-b);
    --color-link-visited: var(--color-accent-b);
    --color-cglink: var(--color-accent-a);
    --color-cglink-hover: var(--color-secondary-b);
    --color-cglink-visited: var(--color-accent-b);


    /*------------------*\
      #Spacing
    \*..................*/

    --space-unit: 1rem;
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs:  calc(0.375 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
    --space-xxl:  calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));

    --basic-padding: var(--space-sm);


  

    /*------------------*\
      #Sizes
    \*..................*/

    --max-width: calc(var(--space-unit) * 50);
    --readable-width: calc(var(--space-unit) * 18);
    --side-bar: calc(var(--space-unit) * 15);
    --side-col: calc(var(--space-unit) * 18);

  


    /*------------------*\
      #Borders & Shadows
    \*..................*/

    --border-radius: var(--space-xxs);
    --border-radius-s: var(--space-xxxs);
    --shadow-offset: calc(0.2 * var(--space-unit));
    --shadow-offset-s: calc(0.1 * var(--space-unit));
    --shadow-blur: 0;
    --shadow-hue: var(--gray-light);
    --shadow-hue-dark: var(--gray-med);





}