:root {
  --logo: var(--link);
  --link-shadow: var(--bar);
  --logo-shadow: var(--logo); }

html {
  font-family: monospace;
  font-size: 1.3em;
  line-height: 1.2em;
  background-color: var(--background);
  color: var(--primary); }

div#logo {
  text-align: center; }
  div#logo pre {
    display: inline-block;
    text-align: left;
    line-height: 1.1em;
    margin-bottom: 0;
    color: var(--logo);
    text-shadow: 0 0 20px var(--logo-shadow), 0 0 30px var(--logo-shadow), 0 0 40px var(--logo-shadow), 0 0 55px var(--logo-shadow), 0 0 75px var(--logo-shadow); }

div.bar {
  padding: 5px;
  padding-left: 15px;
  border-radius: 3px; }

div#footer {
  margin-top: 2em; }

h1 {
  text-transform: uppercase; }

hr {
  border: 0;
  height: 2px; }

div#main {
  width: 100ch;
  margin: 0 auto; }

div#body {
  padding-left: 10px;
  padding-right: 10px; }
  div#body pre {
    padding: 10px;
    border-radius: 5px; }

li {
  position: relative;
  list-style: none; }

li:before {
  content: "*";
  position: absolute;
  left: -1.25em; }

ul.user-list {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0; }
  ul.user-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 15%; }
  ul.user-list li:before {
    content: ""; }

input,
textarea {
  font-family: input-mono, monospace;
  font-size: 0.75em;
  width: 100%;
  border: 0;
  border-radius: 3px;
  padding: 5px; }

table {
  text-align: left;
  width: 100%;
  padding: 5px;
  border-radius: 5px; }

div.news h3 {
  margin-bottom: 1px; }

/* Homepage Boxes */
div.container {
  display: flex; }

div#home-left {
  width: 80%;
  margin-right: 10px; }

/* Patchlog */
div#patchlog {
  font-size: 0.75em; }
  div#patchlog p {
    margin-top: 0px; }

b,
strong,
a,
a:link,
a:visited,
a:active,
h1,
h2,
h3,
h4,
h5,
th,
label {
  color: var(--link); }

a:hover {
  color: var(--primary); }

hr,
div.bar {
  background: var(--bar);
  color: var(--primary);
  box-shadow: 2px 2px var(--shadow);
  margin-bottom: 2em; }

h1,
h2,
h3,
h4,
h5,
th,
label {
  text-shadow: 2px 2px var(--link-shadow); }

input,
textarea {
  background-color: var(--background);
  color: var(--primary);
  border: 1px solid var(--bar); }

table,
div#body pre {
  border: 1px solid var(--bar);
  border-radius: 5px;
  padding: 10px; }

html[data-theme='dracula'] {
  --background: #282936;
  --shadow: #3a3c4e;
  --bar: #4d4f68;
  --primary: #e9e9f4;
  --link: #00f769;
  --logo: var(--link); }

html[data-theme='greenscreen'] {
  --background: #001100;
  --shadow: #003300;
  --bar: #005500;
  --link: #00ff00;
  --primary: #00bb00; }

html[data-theme='nord'] {
  --background: #2E3440;
  --shadow: #3B4252;
  --bar: #434C5E;
  --primary: #E5E9F0;
  --link: #8FBCBB; }

html[data-theme='palenight'] {
  --background: #292D3E;
  --shadow: #444267;
  --bar: #32374D;
  --logo: #676E95;
  --primary: #959DCB;
  --link: #FFFFFF; }

html[data-theme='jo'] {
  --background: #001100;
  --primary: #8575fb;
  --link: #a296ff;
  --shadow: #1a1153;
  --bar: #3c3573; }

/* New Themes */
html[data-theme='tuna'] {
  --background: #35333B;
  --primary: #06B7AA;
  --link: #16f7e7;
  --bar: #048077;
  --shadow: #035c55;
  --link-shadow: #656171;
  --logo-shadow: #058980; }

html[data-theme='twine'] {
  --background: #371F03;
  --primary: #C9945B;
  --link: #d7af84;
  --bar: #9a6833;
  --shadow: #6e4a24;
  --link-shadow: #a25b09;
  --logo-shadow: #a57036; }

html[data-theme='cerulean'] {
  --background: #0B2A4B;
  --primary: #22AAD3;
  --link: #54c2e3;
  --bar: #187794;
  --shadow: #11556a;
  --link-shadow: #195ea7;
  --logo-shadow: #1a809e; }

html[data-theme='razz'] {
  --background: #0E020E;
  --primary: #FA1B67;
  --link: #fb548d;
  --bar: #be0443;
  --shadow: #880330;
  --link-shadow: #7a117a;
  --logo-shadow: #cb0448; }

html[data-theme='forest'], :root {
  --background: #090203;
  --primary: #178D50;
  --link: #23d77a;
  --bar: #106338;
  --shadow: #0c4728;
  --link-shadow: var(--shadow);
  --logo-shadow: #199c58; }
