@charset "UTF-8";
/* this is whatever css just to make it more fancy */
@import url("https://fonts.googleapis.com/css?family=Dancing+Script|Roboto|Inconsolata");
.no-spacing, *, ol ol, ul ul, nav ul, nav ul li {
  margin: 0;
  padding: 0; }

body {
  font-family: "Roboto", sans-serif; }

#main, nav ul li {
  clear: both;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  max-width: 40em;
  min-height: 800px; }

.wrapper {
  margin-left: auto;
  margin-right: auto;
  margin: 2%; }

.window {
  background: #051005;
  color: #2e3436;
  font-size: medium; }

header.window {
  border-bottom: 4px solid lightslategrey; }

.window a, .window a:visited, #sitename {
  background-clip: text;
  -webkit-background-clip: text; }

.window a {
  text-shadow: 0 0 0.4em #30bb30;
  background-color: #30bb30; }
.window a, .window a:visited, .window #sitename {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(3deg, transparent, transparent 3%, black 3%, black 5%, transparent 5%, transparent 10%);
  background-position: 0px 0px;
  background-size: 100% 50px;
  animation: animatedBackground 40s linear infinite;
  -webkit-animation: animatedBackground 40s linear infinite; }
.window a:visited {
  text-shadow: 0 0 0.2em #b0ffb0, 0 0 0.4em #b0ffb0, 0 0 0.8em #b0ffb0, 0 0 1.6em #b0ffb0;
  background-color: #b0ffb0; }

a {
  color: black;
  text-shadow: 0 0 0.05em #30bb30;
  border-radius: 3px;
  display: inline-block;
  text-decoration: none; }

a.tag, .entry-content a {
  text-decoration: underline; }

a:first-letter {
  color: #729fcf;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

a.tag:first-letter {
  color: #2e3436;
  text-shadow: none; }

.entry-content {
  margin-top: 0.5em;
  overflow: hidden; }

.entry-content figure {
  overflow: hidden; }

.entry-content a:first-letter {
  color: lightslategrey;
  text-shadow: none; }

a:visited {
  color: lightslategrey;
  text-shadow: 0 0 0.2em lightslategrey, 0 0 0.4em lightslategrey, 0 0 0.8em lightslategrey, 0 0 1.6em lightslategrey; }

a:hover:first-letter, a.tag:hover:first-letter, .entry-content a:hover:first-letter {
  color: #ffff54; }

a:hover, #sitename:hover {
  color: white;
  background: #30bb30; }

.entry-content a {
  margin-right: -4px;
  margin-left: -4px;
  padding-left: 4px;
  padding-right: 4px;
  display: inline; }
  .entry-content a + a {
    margin-left: 0px; }
.entry-content span + a {
  margin-left: 0px; }
.entry-content tr a {
  margin: 0; }

a:active {
  text-decoration: underline;
  text-decoration-color: #54ffff; }

footer.window {
  text-align: center;
  width: 100%;
  border-top: 4px solid lightslategrey; }

footer.pagination {
  margin-top: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em; }

footer p + p {
  text-indent: 0; }

#sidebar {
  width: 20%;
  margin-left: auto;
  display: inline-block;
  margin-right: 1%;
  text-align: left;
  vertical-align: top;
  padding: 0.5; }

#content {
  width: 53%;
  margin-right: auto;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 4%;
  padding-bottom: 1%;
  border-top: 2px solid #051005;
  border-bottom: 2px solid #051005;
  position: relative;
  z-index: 1; }

.padded {
  margin: 2%; }

#recent_posts {
  list-style: none; }

li {
  list-style-position: outside;
  padding-left: 1em;
  margin-left: 1em; }

ol {
  margin: 1em; }
  ol ol {
    margin-left: 1em; }

ul {
  margin: 1em; }
  ul ul {
    margin-left: 1em; }

nav ul li:hover h3 {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

nav {
  display: block;
  /* border: 1px solid $col-border */
  width: 100%;
  margin-top: 1em; }
  nav ul {
    list-style: none;
    text-align: justify;
    text-align-last: justify;
    margin: 0 20em; }
    nav ul li {
      overflow: hidden;
      text-align: center;
      display: inline; }
      nav ul li .description {
        font-size: 0.4em; }
      nav ul li h2 {
        font-size: 1.5em; }

.navigation li {
  margin: 0 auto; }

.navigation li a, #recent_posts li {
  display: inline-block; }

.bracket {
  display: inline-block;
  vertical-align: super; }

.category-glyph {
  height: 1em;
  /* this works cause its inline?? */
  vertical-align: middle; }

.link {
  display: inline-block;
  font-family: "Fira Mono", monospace;
  text-align: center;
  text-align-last: center; }

p {
  overflow-wrap: break-word;
  line-height: 1.3; }
  p a {
    color: black; }
  p + p {
    text-indent: 1.375em;
    margin-top: 0; }
    p + p > img {
      margin-left: -1.375em; }

.entry-content p, pre, table {
  line-height: 1.5rem;
  margin-top: 1.5rem; }

.entry-content sup {
  line-height: 0; }

footer ul li {
  width: 49%; }

ul.horizontal {
  list-style: none; }

ul.horizontal li {
  text-align: left;
  display: inline-block; }

/* Move title into center */
#title {
  clear: both;
  overflow: hidden;
  position: relative;
  margin-bottom: -2px; }
  #title h1 {
    text-align: center; }

#sitename {
  font-size: 3.25em;
  font-family: "Dancing Script", cursive;
  /* $col-flash */
  /* color: $window-link */
  padding-left: 1em;
  padding-right: 1em;
  text-shadow: 0 0 0.4em #30bb30;
  background-color: #30bb30; }

@keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    /* background-position: 3px 50px */ } }
#sitename:first-letter {
  color: transparent;
  text-shadow: 0 0 0.4em #30bb30; }

#sitename:hover:first-letter {
  color: #ffff54; }

pre {
  font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
  border-top: 1px dotted #051005;
  border-bottom: 1px dotted #051005;
  padding: 0.25em; }

.entry-content h3 {
  font-weight: lighter; }

.entry-content h1 {
  margin-top: 1.5em;
  /* \:before /* doesn't work, wanted to do something like markdown/org for sublevels but nicer */
   * content: repeat("*", $i) */ }

.outline-text-1 {
  margin-top: 0; }

.section-number-1 {
  visibility: hidden;
  display: none; }

.entry-content h2 {
  margin-top: 1.5em;
  /* \:before /* doesn't work, wanted to do something like markdown/org for sublevels but nicer */
   * content: repeat("*", $i) */ }

.outline-text-2 {
  margin-top: 0; }

.section-number-2 {
  visibility: hidden;
  display: none; }

.entry-content h3 {
  margin-top: 1.5em;
  /* \:before /* doesn't work, wanted to do something like markdown/org for sublevels but nicer */
   * content: repeat("*", $i) */ }

.outline-text-3 {
  margin-top: 0; }

.section-number-3 {
  visibility: hidden;
  display: none; }

.entry-content h4 {
  margin-top: 1.5em;
  /* \:before /* doesn't work, wanted to do something like markdown/org for sublevels but nicer */
   * content: repeat("*", $i) */ }

.outline-text-4 {
  margin-top: 0; }

.section-number-4 {
  visibility: hidden;
  display: none; }

.entry-content h5 {
  margin-top: 1.5em;
  /* \:before /* doesn't work, wanted to do something like markdown/org for sublevels but nicer */
   * content: repeat("*", $i) */ }

.outline-text-5 {
  margin-top: 0; }

.section-number-5 {
  visibility: hidden;
  display: none; }

article {
  margin-top: 2em; }

article header {
  margin-top: 1%; }

article li{
    line-break: anywhere;
}

.entry-content img, .entry-content video {
  width: 99%;
  border: 2px lightslategrey solid; }

#category-title {
  font-size: 4em;
  font-size: 4vw;
  margin-top: -45px;
  margin-bottom: 25px; }
  #category-title :first-letter {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

h1 {
  font-size: 2em;
  color: #729fcf; }

article h1 {
  font-size: 1.5em; }

article header h1 {
  font-size: 2em; }

article h2 {
  font-size: 1.25em; }

article h3 {
  font-size: 1.1em; }

article h4 {
  font-size: 1em;
  font-weight: normal; }

.entry-content h4 + p {
  margin-top: 0.5em; }

article.single > footer {
  border-top: 1px solid black;
  margin-top: 1em;
  margin-bottom: 3em;
  list-style: circle; }

table {
  margin: 0 auto;
  margin-top: 1.5rem; }

caption {
  caption-side: bottom; }

/* make tables less cramped */
th, td {
  padding-left: 1em; }

td {
  padding-right: 1em;
  padding-top: 0.2em;
  border-right: 1px dotted #051005;
  border-bottom: grey solid thin; }

abbr {
  letter-spacing: 0.1em; }

.src-block, .figure {
  margin: 1.5em 0;
  text-align: center; }

.highlight {
  padding: 0.75em;
  text-align: left;
  margin-bottom: 0.25em; }

.figure p {
  text-align: inherit; }

.org-ref-bib {
  margin-top: -1em; }

@media (max-width: 1880px) {
  nav ul li .description {
    display: none; }

  .bracket {
    vertical-align: baseline; } }
@media (max-width: 1625px) {
  nav ul li h2 {
    font-size: 0.9em; }

  .bracket {
    font-size: 0.8em; } }
@media (max-width: 1380px) {
  .bracket {
    display: none;
    font-size: 0.8em; } }
@media (max-width: 1050px) {
  #logo {
    display: none;
    /* now the logo is gone, put the title in center */ }

  #title h1 {
    float: none;
    text-align: center; }

  #sitename {
    font-size: 2em;
    /* menu below title */ }

  nav {
    border: none;
    margin-top: 1%;
    /* may as well make the font bigger if the logo is gone */ }
    nav ul {
      margin: 0 5em; }
      nav ul li h2 {
        font-size: 1em; } }
@media (max-width: 1650px) {
  #category-title {
    margin-top: -25px;
    margin-bottom: 0px; } }
@media (max-width: 1250px) {
  #category-title {
    margin-left: -18px; } }
@media (max-width: 850px) {
  #category-title {
    margin-top: 0px; }

  #main, nav ul li {
    margin-left: 1em;
    margin-right: 1em; } }
@media (max-width: 750px) {
  #title {
    border-bottom: none; } }
@media (max-width: 575px) {
  /** face to big */
  #my-face {
    display: none; } }
@media (max-width: 550px) {
  #category-title {
    margin-left: 0px; } }
@media (max-width: 500px) {
  #sitename {
    font-size: 1.5em; }

  nav ul li h2 {
    font-size: 0.8em; }

  article header h1 {
    font-size: 1em; } }
@media (max-width: 400px) {
  #sitename {
    font-size: 1em; }

  nav ul {
    margin: 0 1em; }
    nav ul li h2 {
      font-size: 0.5em; } }
blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  margin: 2em 3em;
  border-left: 1em solid lightslategrey;
  padding: 0.5em;
  quotes: "“" "”";
  padding-left: 1em; }
  blockquote:before {
    color: lightslategrey;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em; }
  blockquote p {
    display: inline; }

.sidebar-tags a {
  margin-right: 1em; }

#my-face {
  width: 575px;
  height: 600px;
  margin: auto; }

code {
  background-color: #d3d7cf;
  padding-left: 0.25em;
  padding-right: 0.25em;
  border-radius: 3px;
  border: 1px solid #AAA;
  font-size: 0.9em; }

.meta {
  font-size: 0.7em; }

ul.footlinks {
  list-style: none;
  text-align: center;
  column-count: 3; }
  ul.footlinks li {
    width: auto; }

.video {
  width: 100%;
  height: 24em; }

.footnote {
  margin: 5em 0; }


#main::after{
  content: "";
  display: block;
  position:fixed;
  width:100vw;
  height:100vh;
  /* background-image:linear-gradient(transparent,rgba(0,30,0,0.5)); */

  background-image:
    linear-gradient(to bottom, rgba(0,30,0,0.5) 0%, transparent 10%),
    linear-gradient(to top, rgba(0,30,0,0.5) 0%, transparent 10%);
  z-index:1;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.footnote li{
  background: rgba(255, 255, 255, 0.85);
}

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

.footnote li{
  background: rgba(0, 0, 0, 0.85);
}

  body {
    color: #eee;
    background: #121212; }

  body a {
    color: #809fff; }

  body a:visited {
    color: #809fff; }

  .window {
    color: #61757b; }

  a.tag:first-letter {
    color: #809fff; }

  header.window {
    background: #134013; }

  div.highlight {
    background: radial-gradient(#134013, #121212);
    border: #162412 solid 0.5em;
    margin-top: 0.5em; }

  div.highlight .k {
    color: #5656a6; }

  div.highlight .ow {
    color: #6767ea; }

  div.highlight .kr {
    color: #9b5afb; }

  div.highlight .ss {
    color: #8c8cb5;
  }
  div.highlight .no {
      color: #ff4343;
  }

}


/* try make some walls out of css ...
/* #main::before::before{ */
/*   content: ""; */
/*   display: block; */
/*   border-bottom: 1em solid #FF0; */
/*   margin-top: 10px; */
/*   position: relative; */
/*   left: 100px; */
/*   top: 300px; */
/*   width: 100px; */
/*   height: 1em; */
/*   border-top: 1em solid gold; */
/* } */

.browser-warning{
    display: none;
    width: 100%;
    background: #ff4444;
    color: white;
    font-weight: bold;
    padding: 8px 0;
    z-index: 9999;
    overflow: hidden;
}


.browser-warning span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}