/***********************
 * DO NOT JUDGE MY CSS *
 ***********************/

:root {
  --bg: #fbf1c7;
  --fg: #3c3836;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #19191b;
    --fg: white;
  }
}

:root {
  background-color: var(--bg);
  color: var(--fg);

  font-family: monospace;
  font-size: 1.3em;
}

body {
  display: flex;
  flex-flow: column;

  margin: 0;
  min-height: 100vh;
}

#frame {
  display: flex;
  flex-flow: column;

  margin: 7px;

  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;

  border: 2px solid var(--fg);
  flex: 1 1 auto;

  box-sizing: border-box;
  width: calc(100vw - 14px);
  overflow-x: hidden;
}

a {
  color: var(--fg);
  font-style: italic;
  border: 1px solid var(--bg);
}

a:hover {
  border: 1px solid var(--fg);
}

h1 {
  text-align: center;
}

#back {
  margin-left: 2em;
  font-size: 1.2em;
}

#crossroad-div {
  margin-left: 26%;
}

@media screen and (max-width: 500px) {
  #crossroad-div {
    margin-left: 10%;
  }
}

span {
  text-align: center;
}

#footer {
  text-align: center;

  padding: 5px;
  border: 2px solid var(--fg);
}

/*
SGksIGhvdydzIGl0IGdvaW5nPyBJIGRvbid0IGtub3cgd2h5IGFyZSB5b3UgaW4gbXkgY3NzLCBi
dXQgSSBob3AgZXZlcnl0aGluZyB3b3JrcyBvdXQgZmluZX5+fgo=
 */

#contents {
  max-width: 100%;
  margin: auto;

  flex: 1 1 auto;
}

#contents p, #contents pre, #contents q {
  max-width: 85ch;
}

pre {
  margin-left: 1em;
  padding-left: .5em;
  border-left: 3px solid var(--fg);
  overflow: auto;
  padding-block: 2px; /* underscore was not visible */
}

.indent {
  margin-left: 1em;
}

img {
  max-width: min(45em, 90%);
  max-height: 30em;
  border: 3px solid var(--fg);
  display: block;
  margin: auto;
  margin-top: 6px;
}

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

textarea {
  background: var(--bg);
  color: var(--fg);
  border: 3px solid var(--fg);
  font-size: .9em;
  text-decoration: none !important;
  width: calc(100% - 10px);
}

textarea:focus, textarea:hover, select:focus, select:hover {
  outline: none;
  text-decoration: underline;
}

input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: monospace;
  font-size: .9em;
}

input:hover {
  background: var(--fg);
  color: var(--bg);
}

#gb-form-div {
  text-align: center;
  min-width: 100%;
  max-width: 100%;
}

.gb-time {
  font-style: italic;
}

/* scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--fg);
}

/* gallery */

#gallery {
  padding: 4px;
  text-align: center;
}

#gallery img {
  display: inline;
  max-width: 48%;
  margin: 4px;
}

@media screen and (max-width: 500px) {
  #gallery img {
    display: inline;
    max-width: 90%;
    margin: 4px;
  }
}

#gallery a {
  border: none
}

/* selection */

::-moz-selection { /* Code for Firefox */
  color: var(--bg);
  background: var(--fg);
}

::selection {
  color: var(--bg);
  background: var(--fg);
}