/* default look of Simplicity */
:root {

  /* ######################################################################################## */
  /* ##                  Content: Text Colors                                              ## */
  /* ######################################################################################## */

  --main-text-color: #cacaca;          /* ## content text is displayed in this color       ## */
  --main-text-faded-color: #bababa;    /* ## less important text, e.g. lastModified        ## */
  --link-color: #c1b2ba;
  --link-empty-color: #b7b6b6;
  --infobox-border-color: #8c6e7e;     /* ## for infoboxes. ( <div class="infobox"> )      ## */
  --quote-mark-color: #31222f;         /* ## for nice large block quotes...                ## */
  --quote-cite-color: #8a8a8a;         /* ## ...and for the author of the block quote      ## */

  --image-border-width: 8px;           /* ## border for stand-out images. '0' to disable.  ## */


  /* ######################################################################################## */
  /* ##              Header and Footer Elements                                            ## */
  /* ######################################################################################## */

  /* ###############################    A p p e a r a n c e   ############################### */

  /* ## Logo left of Home text. To disable, comment out this line.                         ## */
  /* ## The Home button will then acquire the same shape as the other buttons.             ## */
  /* --home-bg-image: url('/.simplicity-content/.skeleton/favicon.svg'); */
  --home-bg-image: url('/.simplicity/.skeleton/media/simplicity-logo.svg');
  --home-bg-image-width: 4em;          /* ## adjust this if your logo is not square        ## */
  --main-border-radius: 1em;           /* ## radius of main content box. Disable: 'none'.  ## */
  --nav-border-radius: 1em;            /* ## shape of buttons. Use 'none' for rectangle.   ## */


  /* #############################  H i d e   E l e m e n t s   ############################# */

  /* ## Uncomment to hide header.                                                          ## */
  /* ## Before doing so, please disable all elements from the header in the config file.   ## */
  /* --show-header: var(--no); */
  /* ## Uncomment to hide contactinfo in footer.                                           ## */
  /* --show-contactinfo: var(--no); */ /* ## this is not needed anymore - remove ## */


  /* ######################################################################################## */
  /* ##                      Typography                                                    ## */
  /* ######################################################################################## */
  /* ## Note that you also need corresponding '@font-face' rules for all styles            ## */
  /* ## (bold, italic, bold + italic) to be able to use a font.                            ## */
  --main-font: "URWPalladioL"; /* used for your content */
  /* ## This font should have small capitals, and be defined as such in '@font-face' rule. ## */
  --main-font-sc: "TeXPalladioL-SC";
  /* ## Font used for header buttons and navigation menus.                                 ## */
  --header-font: var(--main-font-sc);


  /* ######################################################################################## */
  /* ##               Background: Images and Colors                                        ## */
  /* ######################################################################################## */

  /* ## To not use a background image, set 'bg-image'                                      ## */
  /* ## and 'body-bg-filter' (see "Advanced Background Tweaks", below) to 'none'           ## */
  --main-bg-color: #583954;            /* ## main background color                         ## */
  --main-contrast-color: #ca6036;      /* ## needs to contrast well with 'main-bg-color'   ## */
  --header-bg-color: #774d74;          /* ## try a shade of 'main-bg-color'                ## */
  --content-bg-color: #583954;         /* ## Try '#00000040' for beautiful contrast        ## */
  --bg-image: url("/.simplicity/.skeleton/media/simplicity-default-background-opt.svg");
    --bg-size: cover;                /* ## try 100vmax or 100vmin.                       ## */
    --bg-position-y: 0rem;             /* ## image offset. Try +(-?) ~50%.                 ## */
    --bg-repeat: no-repeat;            /* ## try 'repeat' if image is smaller than window  ## */
  --content-bg-image: var(--body-bg-image);   /* ## normally same as body, or none         ## */

  /* ## Image to use for the fade-in intro. Set to 'none' to use only color for intro.     ## */
  --intro-bg-image: url('/.simplicity/.skeleton/media/simplicity-logo.svg');

  /* ## Note: See "Advanced Background Tweaks" below for more control over                 ## */
  /* ## background images or to specify distinct header and footer images.                 ## */


  /* ######################################################################################## */
  /* ##                  Navigation Menu: Colors                                           ## */
  /* ######################################################################################## */

  /* ## Navigation menu color. Usually same as 'header-bg-color'.                          ## */
  --nav-menu-bg-color: var(--header-bg-color);
  --nav-menuitem-text-color: #c899d9;                 /* ## header buttons and menu items  ## */
  --header-text-color: var(--main-text-color);        /* ## breadcrumbs, mainly            ## */
  --header-link-color: var(--link-color);             /* ## breadcrumbs, mainly            ## */
  --nav-link-empty-color: #919191;                    /* ## empty, disabled menu items     ## */
  --nav-link-checkmark-color: var(--link-color);      /* ## tick in language menu          ## */
  --nav-selected-highlight-color: #ee82ee;            /* ## open menus without focus       ## */
  --nav-text-shadow-color: black;                     /* ## set to 'none' for no shadow    ## */

  /* ######################################################################################## */
  /* ##                  Footer: Colors                                                    ## */
  /* ######################################################################################## */
  --footer-text-color: var(--nav-link-empty-color);
  --footer-link-color: var(--header-link-color);


  /* ######################################################################################## */
  /* ##             Advanced Background Tweaks                                             ## */
  /* ######################################################################################## */

  /* ## These filters and gradients are combined with the background image and color.      ## */
  --header-bg-gradient: linear-gradient( #707070 0%, #555555 50%, #707070 100%);
  --body-bg-gradient: linear-gradient( #444444 0%, #707070 50%, #444444 100% );
  --body-bg-filter: grayscale(40%) contrast(122%) brightness(50%);

  /* ## Here the images are combined with the gradients and filter.                        ## */
  /* ## To disable filters and gradients, remove the gradient part from these two lines.   ## */
  --body-bg-image-with-gradient: var(--bg-image), var(--body-bg-gradient);
  --header-bg-image-with-gradient: var(--bg-image), var(--header-bg-gradient);

  /* ## Here you can specify separate images and colors for the header and footer.         ## */
  --header-bg-image: var(--header-bg-image-with-gradient);
  --body-bg-image: var(--body-bg-image-with-gradient);
  --footer-bg-image: var(--header-bg-image-with-gradient);
  --footer-bg-color: var(--header-bg-color); /* by default, same as header for harmony */

}