/* ===== FONTS ================================================================== */
@font-face {
  font-family: "myHeader";
  src: url("/myHeader.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* @font-face { */
/* font-family: "myHeader"; */
/* src: url("/myHeader.otf") format("opentype"); */
/* font-weight: normal; */
/* font-style: normal; */
/* } */

@font-face {
  font-family: "myText";
  src: url("/myText.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* @font-face { */
/* font-family: "myText"; */
/* src: url("/myText.otf") format("opentype"); */
/* font-weight: normal; */
/* font-style: normal; */
/* } */



/* ===== THEMES ================================================================== */
.theme-obs-dark .header,
.theme-obs-light .header {
  background-color: #111111;
}

.theme-obs-dark .icon-tray div,
.theme-obs-light .icon-tray div {
  background-color: transparent;
}

.icon-tray div {
  border: 3px solid transparent;
  ;

}

.theme-obs-dark,
.theme-obs-dark *,
.theme-obs-light,
.theme-obs-light * {
  --normal-text-color: #999999;
  --bg-color: #000000;
  --bg-note: #202020;
  --bg-accent: #161616;
  --color-accent: #999999;
  --bg-accent2: #626262;
  --color-accent2: #e6e6e6;
  --bg-accent3: #33383d;
  --color-accent3: #989c9d;
  --divider-color: transparent;
  --header-bg: #000000;
  --code-hightlight-color: #00000022;
  ;
  --homelink-color: #fff;
  --graph-bg: #161616;
  --dir-tree-color: #bbbbbb;
  --marker-color: var(--bg-accent3);
  /* Meine colors */
  --header-color: #fff;
  --header2-color: #fff;
  --link-color: #0cf;
  --link-hover-color: rgb(194, 243, 255);
  --code-color: #99a073;
  ;
  --code-border: #00000044;
  --code-bg: #000000;

}

.theme-obs-light .left_pane,
.theme-obs-light .right_pane,
.theme-obs-dark .left_pane,
.theme-obs-dark .right_pane {
  background-color: var(--bg-note);
  border-radius: 0;
}

/* ===== Body ================================================================== */
body {
  font-family: myText, "Segoe UI", Verdana, Arial;
  font-size: 12pt;
  background: var(--bg-note);
  color: var(--normal-text-color);
  color: #bbbbbb;
}

/* p {
  
  line-height: 1.3pt;
  font-size: 11pt;
} */

h1 {
  color: var(--header-color);
  font-family: myHeader, Verdana;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: none;

}

h2,
h3,
h4 h5 {
  color: var(--header2-color);
  font-family: myHeader, Verdana;
  letter-spacing: 0.1em;
  border-bottom: none;
}

h2 {
  border-top: 1px dotted var(--color-accent);
  line-height: 3rem;
  font-variant: small-caps;
}

a,
a:link {
  color: #0cf;
  text-decoration: none;
}

a:visited {
  color: rgb(0, 162, 202);
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ===== Container ================================================================== */
* {
  --left-pane-active-width: auto;
  --right-pane-active-width: auto;
}

.container {
  overflow: auto;
}

/* ===== Code ================================================================== */
code {
  color: var(--code-color);
  font-size: 10pt;
}

.codehilite {
  background-color: var(--code-border);
  padding: 1px;

}

.codehilite pre {
  margin: 1px;
  background-color: var(--code-bg);
  padding: 12px 6px;
}

/* ===== Zitaat ================================================================ */
blockquote {
  font-style: oblique;
  background-color: transparent;
  border-left: 3px solid #777;
}

/* ===== Header und Buttons ==================================================== */
#homelink {
  margin-left: 3rem;
  margin-right: 1.7rem;
  font-size: 24pt;

  font-family: myHeader, Verdana;
  letter-spacing: 0.1em;
  font-variant: small-caps;
}

#navbar {
  margin-left: -0.8rem;
}

.navbar-link {
  font-family: myText, "Segoe UI", Helvetica, Verdana, Arial;
  font-variant: all-petite-caps;
  margin-top: 0.7rem;
  padding-bottom: 0;

}

a.navbar-link:hover {
  background-color: #333333;
}


/* Icons und Funktionsbuttons nach rechts */
.icon-tray {
  height: 1.6rem;
  margin-top: 0.7rem;
  display: flex;
  margin-left: auto;
}

.download-button {
  /* display: inline-block;
  width: 100%;
  background-color: var(--bg-accent);
  padding: 0.5rem;
  text-align: center; */
  max-width: 400rem;
  /* border-radius: 0.4rem; */
}

/* ===== side Panels ==================================================== */
/* ===== side Panel Links =============================================== */

.dir-list li a:link {
  color: #eee;
  text-decoration: none;
}

.dir-list li a:visited {
  color: #ccc;
  text-decoration: none;
}

.dir-list li a:hover,
.dir-list li a.active:visited {
  color: #fff;
  text-decoration: none;
}

/* ===== side Panel Container =========================================== */
.left_pane,
.right_pane {
  background-color: transparent;
  padding: 10px;
}

.left_pane li,
.right_pane li {
  padding-top: 0;
}

.right_pane_content,
.left_pane_content {
  scrollbar-color: rgba(var(--code-hightlight-color), 0.4) #0000;
  font-family: myText, "Segoe UI", Helvetica, Verdana, Arial;
  overflow: auto;
}


.dir-button,
.dir-container.active,
.dir-container {
  font-family: myText, "Segoe UI", Helvetica, Verdana, Arial;

  line-height: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.8rem;
}

.fold_header {
  padding-top: 0rem;
}

.left_pane_fold_header,
.right_pane_fold_header {
  /* visibility: hidden; */
  border-radius: 1rem;
}

.left_pane_toggle_nav,
.right_pane_toggle_nav {
  visibility: collapse;
}

/* Table of Contents ausblenden */
.toc-header {
  visibility: collapse;
}

/* ===== Unterer Bereich ==============================================*/
.note-footer {
  border-top: 1px solid #666;
  margin-top: 3rem;
  font-family: myText, "Segoe UI", Helvetica, Verdana, Arial;
  font-size: 10pt;
}

.backlinks h2,
.tags h2 {
  border: none;
  line-height: 1rem;
  font-size: 11pt;
  padding-bottom: 0;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

.note-footer ul {
  margin: 0;
  padding-bottom: 0.1rem;
}

.breadcrumbs {
  font-size: 10pt;
  font-variant: all-petite-caps;
}