@import url(uno.css);
@import url(monokai.css);

/* Modifications */

html.nn-bare header.panel-cover,
html.nn-bare .btn-mobile-menu {
  display: none !important;
}
html.nn-bare .content-wrapper {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
html.nn-bare .content-wrapper__inner {
  margin: 0 auto;
  padding: 40px 20px;
}

b {
  font-weight: 500;
}

pre.highlight,
.highlight pre {
  padding: 10px;
}

pre.highlight code,
.highlight pre code {
  white-space: pre-wrap;
}

.btn, 
.navigation__item a {
  margin: 5px 0;
  white-space: nowrap;
}

.pagination__page-number {
  display: inline-block;
  padding: 10px;
}

.categories a,
.tags a {
  border: 1px solid #e25440;
  border-radius: 20px;
  color: #e25440;
  display: inline-block;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px 10px;
  text-shadow: none;
  white-space: nowrap;
}

.post-meta__tags {
  font-size: 12px;
  padding: 0 5px;
}

.footer__copyright {
    margin: 0 20px 10px;
}

.user-image {
  margin-bottom: 1.2em;
  position: relative;
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  border-radius:100%;
}

/* Plot/chart images. The SVG itself ships with a solid white background
   so axis labels stay readable on dark page backgrounds; this rule just
   smooths the edge between the white card and the surrounding text. */
img.nn-chart {
  display: block;
  margin: 1.5em auto;
  background-color: #ffffff;
  padding: 12px;
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}

/* Dark mode: apply when OS preference is dark */
@media (prefers-color-scheme: dark) {
  body { background-color: #121212; color: #e0e0e0; }
  h1, h2, h3, h4, h5, h6, p, li, blockquote { color: #e0e0e0; }
  a, a:visited { color: #bb86fc; }
  a:hover, a:focus { color: #ffffff; }
  .navigation__item a, .blog-button, .categories a, .tags a {
    border-color: #bb86fc;
    color: #bb86fc;
  }
  .navigation__item a:hover, .blog-button:hover, .categories a:hover, .tags a:hover {
    background-color: #bb86fc;
    color: #000000;
  }
  .panel-cover { background-color: #000000; }
  .panel-cover--overlay {
    background-color: rgba(0, 0, 0, 0.7);
    background-image: none;
  }
  .panel-inverted, .panel-inverted a {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  }
  .footer { background-color: #000000; }
  .footer__copyright { color: #e0e0e0; }
  pre, code {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }
  /* Soft halo so the white plot card doesn't look pasted onto the dark page. */
  img.nn-chart {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 4px 14px rgba(0, 0, 0, 0.45);
  }
}