#color-scheme {
  display: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5em; }

a button {
  position: relative;
  bottom: 3em;
  background-color: midnightblue;
  color: white;
  font-weight: bold;
  font-size: 0.6em;
  margin: 15px;
  border-radius: 0.5em;
  border: none;
  float: right; }

option[selected] {
  background-color: blue; }

.about_links {
  text-align: center; }
  .about_links a {
    text-decoration: none; }
  .about_links img {
    height: 4em;
    width: auto;
    transition: transform 250ms; }
    .about_links img:hover {
      transform: scale(1.15); }

button, input[type='submit'], input[type='file'] {
  cursor: pointer; }

body {
  background-color: #222222;
  color: lime;
  font-family: Monospace;
  margin-inline: 5%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 18px;
  min-height: 100dvh;
  width: auto; }

nav, h1, h2, h3, h4, h5, .date {
  font-family: Monospace; }

header {
  width: auto;
  display: flex;
  overflow: scroll;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  position: sticky;
  top: -10em;
  min-height: 11.5em;
  justify-content: space-between; }
  header div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10em; }
    header div img {
      max-width: 100%;
      max-height: 10em;
      width: auto;
      height: auto; }
  header nav {
    width: 100%;
    box-sizing: border-box; }

main {
  display: flex;
  flex-direction: column;
  max-width: 50em;
  margin-inline: auto; }

footer {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em; }

form {
  display: flex;
  flex-direction: column; }

h1, h2, h3, h4, h5 {
  text-align: left;
  margin-block: 0.5em; }

h1 {
  font-size: 1.5em; }

h2 {
  font-size: 1em; }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  background-color: midnightblue;
  color: white;
  padding: 5px;
  font-weight: bold;
  font-size: 0.80em;
  overflow: hidden; }
  nav a {
    text-decoration: none;
    cursor: pointer;
    transition: transform 250ms; }
    nav a.disabled {
      pointer-events: none;
      opacity: 0.5; }
    nav a:visited {
      color: lightgray; }
    nav a:hover {
      transform: scale(1.2); }
    nav a:link {
      color: white; }

@keyframes fade-in {
  from {
    color: transparent; }
  to {
    color: var(--text-color); } }
@keyframes fade-iin {
  from {
    color: transparent; }
  to {
    color: var(--text-color); } }
dialog {
  transform: scale(0);
  transition: transform 250ms;
  border: none; }
  dialog:open {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    transform: scale(1); }
    dialog:open img {
      max-height: 80vh; }
  dialog::backdrop {
    opacity: 0.7;
    background-color: black; }

@starting-style {
  dialog:open {
    transform: scale(0); } }
article {
  margin-inline: auto;
  height: auto;
  overflow: auto; }
  article.red {
    background-color: red; }
  article img {
    max-height: 8em;
    width: auto;
    height: auto;
    float: left;
    border: solid 1px;
    border-radius: 5px;
    margin: 0.4em;
    pointer-events: pointer;
    display: block;
    cursor: pointer; }
  article .text {
    animation-name: fade-iin;
    animation-duration: 2s; }
    article .text.long {
      animation-name: fade-in;
      animation-duration: 2s; }
  @media only screen and (max-width: 500px) {
    article img {
      max-width: 90%;
      height: auto;
      width: auto; } }
  article .date {
    font-size: 0.75em;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 1em; }
    article .date p {
      margin-block: 0.25em; }

div.tags {
  width: fit-content;
  color: white;
  font-size: 0.75em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.25em;
  transform: skewX(-25deg);
  margin-left: 1em;
  margin-bottom: 1em; }
  div.tags span {
    padding: 0.35em;
    background-color: blue;
    transition: transform 250ms;
    cursor: pointer; }
    div.tags span:hover, div.tags span.selected {
      transform: scale(1.15); }
    div.tags span:nth-child(even) {
      background-color: green; }

/*# sourceMappingURL=styles.css.map */