/* Fill these variables with your own settings */

:root {

  /* Custom Colors */
  --darkest: rgba(23, 27, 28, 1);
  --darker: rgba(45, 54, 57, 1);
  --dark: rgba(79, 92, 99, 1);
  --medium-dark: rgba(128, 143, 153, 1);
  --medium: rgba(156, 169, 176, 1);
  --lighter: rgba(184, 193, 198, 1);
  --lightest: rgba(213, 218, 221, 1);

  --special-color: var(--red);

  --warning-color: var(--orange);
  --danger-color: var(--red);
  --success-color: var(--green);

  --slideshow-text: var(--medium);
  --slideshow-background: var(--darker);

  /* Font Family */
  font-family: "Helvetica";

  --template:
    "navbar" "navbar" "navbar"
    "header" "header" "header"
    "main" "main" "main"
    "footer" "footer" "footer";

  --default-columns: 2;
  --subgrid-columns: 3;
  --gallery-columns: 5;

  --header-h: 14vh;
  --logo-h: 8vh;
  --navbar-h: 4vh;
  --footer-h: 8vh;
  --main-h: calc(100vh - var(--header-h) - var(--navbar-h) - var(--footer-h));
  --sidebar-w: 25vw;

  /* For non-rounded elements set to 0 */
  --border-radius: 0.25em;
  --border-size: 0.1em;

  --navbar-tab-style: var(--border-radius) var(--border-radius) 0 0;
  --navbar-link-style: 0;

}

:root:is(.adaptative),
:root:is(.light),
:root:not(.dark) {

  --logo-url: url("../../custom/media/logo2.png");

  --primary-color: var(--lightest);
  --secondary-color: var(--medium);
  --accent-color: var(--medium-dark);
  --contrast-color: var(--dark);

  --button-color: var(--accent-color);

  /* Text color */
  --text-color: var(--medium-dark);
  --inverted-text-color: var(--lightest);

  --link-color: var(--text-color);
  --hovered-link-color: var(--special-color);

  /* The layout colors */
  --background-color: var(--white);
  --header-color: var(--primary-color);
  --navbar-color: var(--dark);
  --main-color: var(--background-color);
  --footer-color: var(--primary-color);
  --border-color: var(--primary-color);

  --sidebar-color: var(--medium-dark);
  --sidebar-text-color: var(--inverted-text-color);
  --sidebar-border-color: var(--secondary-color);

  --table-head-color: var(--secondary-color);
  --table-row-color: var(--background-color);
  --table-row-hovered-color: var(--primary-color);

  --shadow-color: var(--medium);
  --backlite-color: var(--lightest);

  --overlay-color: rgba(45, 54, 57, 0.85);
  --overlay-text-color: var(--lightest);

}

@media(prefers-color-scheme:dark) {

  :root:is(.adaptative),
  :root:is(.dark),
  :root:not(.light) {
    --logo-url: url("../../custom/media/logo-light.png");

    --primary-color: var(--medium-dark);
    --secondary-color: var(--darker);
    --accent-color: var(--medium-dark);
    --contrast-color: var(--darkest);

    --button-color: var(--accent-color);

    /* Text color */
    --text-color: var(--lighter);
    --inverted-text-color: var(--darker);

    --link-color: var(--text-color);
    --hovered-link-color: var(--special-color);

    /* The layout colors */
    --background-color: var(--dark);
    --header-color: var(--secondary-color);
    --navbar-color: var(--secondary-color);
    --main-color: var(--background-color);
    --footer-color: var(--secondary-color);
    --sidebar-color: var(--darkest);
    --sidebar-text-color: var(--text-color);
    --sidebar-border-color: var(--secondary-color);
    --border-color: var(--accent-color);

    --table-head-color: var(--secondary-color);
    --table-row-color: var(--background-color);
    --table-row-hovered-color: var(--primary-color);

    --shadow-color: var(--darkest);
    --backlite-color: var(--medium-dark);

    --overlay-color: rgba(23, 27, 28, 0.75);
    --overlay-text-color: var(--lightest);

  }

}