:root {
    --background-color: #3e3e3e;
    --bg_transparent: #3e3e3ee3;
    --text-color: #ffffff;
    --article-title_a-color: #e8b656;
    --navbar_hover-color: #faf9f5;
    --article-title_h2: #fff;
    --date: #fff;
    --comment_form: #515151;
    --input: #2d2d2d;
    --input_text: #fff;
    --cadre: #4f4f4f;
    --filter: brightness(0) invert(1);
    --footer: #373737;
    --color: khaki;
    --col_date:#f0f0f0;
    --bg_comment_form: #3e3c3c;
}

[data-theme="light"] {
    --background-color: #fff;
    --bg_transparent: #ffffffdb;
    --text-color: #121212;
    --article-title_a-color: #121212;
    --navbar_hover-color: #121212;
    --article-title_h2: #2f2f2f;
    --date: #2f2f2f;
    --comment_form: #fafafa;
    --input: #fff;
    --input_text: #000;
    --cadre: #4f4f4f;
    --filter: initial;
    --footer: #f1f1f1;
    --col_date:#666;
    --bg_comment_form: #fff;
}

html{
    background-color:var(--background-color);
}

.content{
    color:var(--text-color);
}

* {
  font-family: 'Inter',sans-serif;
}

@font-face {
    font-family: 'Rubik';
    src: url('font/Rubik-Regular.woff2') format('woff2'),
        url('font/Rubik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('font/Quicksand-Regular.woff2') format('woff2'),
        url('font/Quicksand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kaushan Script';
    src: url('font/KaushanScript-Regular.woff2') format('woff2'),
        url('font/KaushanScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('font/Inter-Regular.woff2') format('woff2'),
        url('font/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url('font/Exo-Regular.woff2') format('woff2'),
        url('font/Exo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alex Brush';
    src: url('font/AlexBrush-Regular.woff2') format('woff2'),
        url('font/AlexBrush-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arimo';
    src: url('font/Arimo-Regular.woff2') format('woff2'),
        url('font/Arimo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
      margin: auto;
  max-width: 800px;
  min-height: inherit;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

ul.breadcrumb {
  padding-left: 1em;
  list-style: none;
}
ul.breadcrumb li {
  display: inline;
  font-size: 14px;
  color: var(--text-color);
}
ul.breadcrumb li+li:before {
  padding: 4px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}