@import url("https://iosevka-webfonts.github.io/iosevka-fixed/iosevka-fixed.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");

body {
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 3em;
  margin-bottom: 3em;
  background-color: black;
  color: white;
  font-family: Archivo, sans-serif;
  font-size: 15pt;
  line-height: 1.3;
  min-width: 84vw;
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

.img_alt_hidden {
  display: none;
}

.img_popup {
  position: fixed;
  top: 2vh;
  left: 2vw;
  max-width: 100vw;
  max-height: 100vw;
  background-color: #333;
  padding: 1em;
  border: thick solid #9f9;
  border-radius: 5%;
}

.img_popup > img {
  object-fit: contain;
  max-width: 80vw;
  max-height: 80vh;
}

.img_alt_shown {
  position: fixed;
  bottom: 0;
  background-color: #333;
  padding: 1em;
  width: 80vw;
}

@media (prefers-color-scheme: light) {
  .img_alt_shown {
    background-color: #ccc;
  }

  .img_popup {
    background-color: #ccc;
  }
}

.alt_link_hidden {
  display: none;
}

.alt_link_shown {
  padding-left: 5px;
  font-size: 80%;
}

.alt_img > img {
  max-height: 50vh;
  max-width: 80vw;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

sub {
  vertical-align: sub;
  font-size: 75%;
}

sup {
  vertical-align: super;
  font-size: 75%;
}

img {
  overflow-x: scroll;
}

hr {
  color: cyan;
  border-bottom: thin solid #000000;
}

@media (prefers-color-scheme: light) {
  color: #066;
  border-bottom: thin solid white;
}

h1 {
  font-size: 200%;
  font-weight: bold;
  padding-bottom: 0.25em;
  font-family: "Archivo Narrow", sans-serif;
}

h2 {
  font-size: 150%;
  font-weight: bold;
  padding-top: 0.5em;
  font-family: "Archivo Narrow", sans-serif;
}

h3 {
  font-size: 120%;
  font-weight: bold;
  padding-top: 0.5em;
  font-family: "Archivo Narrow", sans-serif;
}

h4 {
  font-size: 110%;
  padding-top: 0.5em;
  font-weight: regular;
  font-family: "Archivo Narrow", sans-serif;
}

h5 {
  font-size: 100%;
  padding-top: 0.25em;
  font-weight: regular;
  font-family: "Archivo Narrow", sans-serif;
}

b,
strong,
i,
em,
cite,
tt,
code,
img,
span {
  display: inline;
}

ul,
ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1em;
}

ul {
  list-style: square outside;
}

ol {
  list-style: decimal outside;
}

ol ol {
  list-style: lower-alpha outside;
}

ol ol ol {
  list-style: lower-roman outside;
}

ul ul {
  list-style: disc outside;
}

ul ul ul {
  list-style: "- " outside;
}

li {
  display: list-item;
  padding-top: 2px;
}

b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

cite {
  font-style: italic;
}

tt,
code,
div.sourceCode,
pre {
  font-family: "Iosevka Fixed Web", monospace;
}

blockquote {
  padding: 0.25em;
  margin-left: 2em;
  color: white;
  background-color: #333;
}

@media (prefers-color-scheme: light) {
  blockquote {
    color: black;
    background-color: #ccc;
  }
}

a:link {
  color: cyan;
  text-decoration: none;
}

.site_name > a.link {
  color: white;
}

@media (prefers-color-scheme: light) {
  a:link {
    color: #009;
  }
  .site_name > a.link {
    color: black;
  }
}

a:visited {
  color: #f492e1;
  text-decoration: none;
}

.site_name > a:visited {
  color: white;
}

@media (prefers-color-scheme: light) {
  a:visited {
    color: #60c;
  }

  .site_name > a:visited {
    color: black;
  }
}

a:active,
a:hover {
  color: #fe0;
  background-color: #444;
}

@media (prefers-color-scheme: light) {
  a:active,
  a:hover {
    color: #067;
    background-color: #eee;
  }
}

a:link img {
  border: none;
}

a:visited img {
  border: none;
}

a:active img {
  border: none;
}

address {
  color: white;
  border: thin solid #ccc;
  padding: 0.0125em;
}

@media (prefers-color-scheme: light) {
  address {
    color: #000;
    border: thin solid #333;
  }
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: none;
  padding-right: 12px;
  padding-left: 2px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: right;
}

td {
  padding: 0.5em;
}

th {
  font-weight: bold;
}

tr:nth-child(odd) {
  background-color: #444;
}

tr:nth-child(even) {
  background-color: #222;
}

@media (prefers-color-scheme: light) {
  tr:nth-child(odd) {
    background-color: #eee;
  }

  tr:nth-child(even) {
    background-color: #ccc;
  }
}

div.code_block {
  background-color: black;
}

.footer_links {
  text-align: center;
}

#header_links {
  background-color: #333;
}

@media (prefers-color-scheme: light) {
  #header_links {
    background-color: #eee;
  }
}

nav > ul {
  list-style: none;
}

nav > ul > li {
  display: inline;
}

.head_link:before,
.foot_link:before {
  content: " • ";
}

.site_name {
  padding: 2vw;
  font-size: 200%;
  font-weight: bold;
  background-color: #333;
  font-family: "Iosevka Fixed Web", monospace;
  margin-bottom: 0.5em;
}

@media (prefers-color-scheme: light) {
  .site_name {
    background-color: #ccc;
  }
}

.date {
  font-family: "Iosevka Fixed Web", monospace;
  color: #0f0;
  padding-right: 0.25em;
}

@media (prefers-color-scheme: light) {
  .date {
    color: #080;
  }
}

p > tt:hover,
p > code:hover {
  background: repeating-linear-gradient(
    to right,
    #666,
    #666 1ch,
    #055 1ch,
    #055 2ch
  );
}

@media (prefers-color-scheme: light) {
  p > tt:hover,
  p > code:hover {
    background: repeating-linear-gradient(
      to right,
      #eee,
      #eee 1ch,
      #aff 1ch,
      #aff 2ch
    );
  }
}

#copyright {
  text-align: center;
  color: cyan;
}

@media (prefers-color-scheme: light) {
  #copyright {
    color: 669;
  }
}

button {
  border: none;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12pt;
}

#toggle_alt_button {
  margin: 5px;
}

button.deactivated {
  background-color: #060;
  color: white;
}

button.activated {
  background-color: #009;
  color: white;
}

button:hover {
  background-color: #600;
  color: white;
}

#raw_source_hash,
.commit_id {
  font-family: "Iosevka Fixed Web", monospace;
  color: #0f0;
}

@media (prefers-color-scheme: light) {
  #raw_source_hash,
  .commit_id {
    color: #080;
  }
}

.page_cover {
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
}

.alt_back_link_div,
.alt_close_button,
.popup_close_button {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.popup_close_button_container {
  text-align: right;
}

.prev_next {
  background-color: #333;
}

.prev_next > ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.prev_next > ul > li {
  display: inline;
}

@media (prefers-color-scheme: light) {
  .prev_next {
    background-color: #ccc;
  }
}

figure {
  border: dashed thin gray;
  padding: 1em;
  max-width: 100vw;
  overflow-x: auto;
}

.white_bk {
  background: white;
}

figcaption {
  color: #ff9700;
  font-style: italic;
  font-family: "Archivo Narrow", Archivo, sans-serif;
}

@media (prefers-color-scheme: light) {
  figcaption {
    color: #996400;
  }
}

.twitter-tweet {
  margin: 3em;
  padding: 1em;
  border: thick solid;
  border-color: cyan;
}

@media (prefers-color-scheme: light) {
  .twitter-tweet {
    border-color: #669;
  }
}

.masto-post {
  margin: 1em;
  padding: 0.5em;
  border: thin solid;
  border-color: purple;
}

.masto-thread > .masto-post {
  margin: 0;
}

.masto-thread {
  margin: 1em;
  padding: 0.25em;
  border: thick solid;
  border-color: purple;
  background-color: #111;
}


@media (prefers-color-scheme: light) {
  .masto-post {
    border-color: magenta;
  }

  .masto-thread {
    border-color: magenta;
    background-color: #eee;
  }
}

p.raw_source_hash {
  max-width: 100vw;
  overflow-x: auto;
}
#raw_source_hash,
.commit_id {
  font-size: max(75%, 0.75vh);
}

.categories,
nav,
#copyright,
#gen_data {
  font-family: "Archivo Narrow", Archivo, sans-serif;
}

.small_clock{
  height: 1em;
  width: 1em;
  vertical-align: middle;
  padding-right: 0.25em;
}