:root {
  --color-bg: #eee;
  --color-fg: #000;
  --color-logo-blue-dark-2: #355269;
  --color-logo-blue-dark: #3465a4;
  --color-logo-blue-light: #b4c7dc;
  --color-logo-green-dark-3: #05240a;
  --color-logo-green-dark: #127622;
  --color-logo-green-light: #afd095;

  --color-atr-dark: #127622;
  --color-atr-light: #afd095;
  --color-atr-green: #448519;
  --color-dark: #191A19;
  --color-mdark: #1E5128;
  --color-mlight: #4E9F3D;
  --color-light: #D8E9A8;
  --color-fg: #000;
  --color-side-bg: #071a29;
  --color-side-fg: #000;
  --color-side-anchor: #b4c7dc;
  --color-side-border: #000;
  --color-footer-bg: #111;
  --color-footer-fg: #fff;
  --color-anchor: #0B56AD;
  --color-primary: #127622;
  --color-anchor-hover: #e67200;
  --gray-95: #f2f2f2;
  --gray-90: #e5e5e5;
  --gray-85: #d9d9d9;
  --gray-80: #cccccc;
  --gray-75: #bfbfbf;
  --gray-70: #b3b3b3;
  --gray-65: #a6a6a6;
  --gray-60: #999999;
  --gray-55: #8c8c8c;
  --gray-50: #7f7f7f;
  --gray-45: #737373;
  --gray-40: #666666;
  --gray-35: #595959;
  --gray-30: #4d4d4d;
  --gray-25: #404040;
  --gray-20: #333333;
  --gray-15: #262626;
  --gray-10: #1a1a1a;
  --gray-05: #0f0f0f;
}

@font-face {
  font-family: "regular";
  font-weight: 400 700;
  /*src: url("/font/roboto_mono/static/RobotoMono-Regular.ttf") format("truetype");*/
  src: url("/font/OpenSans-VariableFont_wdth,wght.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bold";
  font-weight: 700;
  src: url("/font/roboto_mono/static/RobotoMono-Bold.ttf") format("truetype");
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'regular', monospace;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

a,
a:visited {
  color: var(--color-anchor);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-logo-green-dark-3);
}

/* Update your existing wrapper to act as a horizontal row container */
#page-wrapper {
  width: 100%;
  min-height: 100vh;
}

#page-side {
	background-color: var(--color-side-bg);
	/*min-height: 100vh;*/
	border-right: 1px solid var(--color-side-border);
  padding: 0 1rem;
  text-align: left;
}

#page-main {
	/*border: 1px solid red;*/
  padding: 1rem;
}

#page-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-fg);
  padding: 1rem;
  margin: 0;
}

#page-footer a {
  color: var(--color-logo-green-light);
}

#site-logo {
  max-width: 130px;
  margin: 1rem auto;
}

#main-menu ul,
#main-menu li {
  margin: 0;
  padding: 0;
}
#page-wrap-1 {
  max-width: 100%;
  flex: 1;
}

#main-menu li {
  list-style: none;
  border-bottom: 1px solid var(--color-side-anchor);
  padding: 1rem 1rem 1rem 0;
  font-weight: bold;
  font-size: 1.2rem;
}

#main-menu li a {
  text-decoration: none;
  color: var(--color-side-anchor);
}

/* hamburger menu */

.menu-icon {
  color: #000;
  margin-top: .5rem;
  margin-right: .5rem;
  position: absolute;
  padding: 0;
  right:0;
  top: 0;
}
.menu-icon a {
  text-decoration: none;
  display: none;
}

.main-nav {
  display: none;
}
.main-nav.expand {
  display: block;
}

.main-nav.expand a {
  text-align: left;
  display: block;
  flex: 1 1 100%;
}


/* page footer */
#page-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

hr {
  border: 1px solid var(--gray-70);
}

.copylicense {
  text-align: center;
}


/* toreni */

.toreni {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* min-width 1280px, large screens */
@media only screen and (min-width: 80em) {

  body {
    font-size: 1.2rem;
  }

  #page-side {
  	padding: 1rem;
    min-height: 100vh;
  }

  .menu-icon {
    display: none;
  }

  .main-nav {
    /*flex-wrap: nowrap;*/
    display: block;
  }
  .main-nav.expand a {
    text-align: left;
    display: inline-block;
    flex: 0 1 auto;
  }

  #site-logo {
    max-width: 207px;
    /*margin: 1rem;*/
  }
}


.breadcrumb {
  background-color: var(--gray-90);
  border: 1px solid var(--gray-70);
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 1rem;

  /* 1. Change to flex to eliminate HTML whitespace gaps */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* 3. Streamline the separator logic */
.breadcrumb li+li:before {
  content: "/";
  padding: 0 .6rem;         /* Give even padding strictly to the left and right of the slash */
  color: var(--gray-50);    /* Optional: make slashes slightly lighter than text if desired */
}


/* dark-theme */
/*
@media (prefers-color-scheme: dark) {
	:root {
	  --color-bg: #07130B;
	  --color-fg: #fff;
	}

	#site-logo {
	  filter: brightness(0) invert(1);
	}
}

*/