:root {
  --white: #FFF;
  --dgrey: #111;
  --lgrey: #EEE;
  --orange: #d8ae47;
  --light-70-orange: #e4c781;
  --light-85-orange: #f2e3c0;
  --dark-orange: #3f310d;
  --color-bg: var(--white);
  --color-accent: var(--orange);
  --color-dark-accent: var(--dark-orange);
  --color-text: #000;
  --color-link: var(--orange);
  --color-link-hover: var(--lgrey);
  --color-text-accent: var(--dgrey);
  --color-text-accent-hover: var(--white);
  --width-content: 1080px;
  --border-radius: 5px;
  --padding: 10px;
  --color-menu-border: var(--dgrey);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--dgrey);
    --color-text: var(--white);
    --color-menu-border: var(--white);
  }
}

@font-face {
  font-family: 'Press Start 2P';
  font-weight: 400;
  font-style: normal;
  src: local("Press Start 2P"), local("Press-Start-2P-regular"), url("../../font/Press-Start-2P-regular.eot") format("eot"), url("../../font/Press-Start-2P-regular.woff2") format("woff2"), url("../../font/Press-Start-2P-regular.woff") format("woff"), url("../../font/Press-Start-2P-regular.ttf") format("truetype"), url("../../font/Press-Start-2P-regular.svg") format("svg");
}
html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font: 1em/1.25em "Source Sans Pro", Helvetica, sans-serif;
}
html a {
  color: var(--color-link);
  text-decoration: none;
}
html a:hover {
  color: var(--color-link-hover);
}

body > main {
  max-width: var(--width-content);
  margin: 0 auto;
}
body > main > div {
  text-align: center;
  margin: 0 0 calc(var(--padding)*2) 0;
}

body > header {
  background-color: var(--color-accent);
  border-bottom: 3px solid var(--color-menu-border);
}
body > header a {
  color: var(--color-text-accent);
}
body > header a:hover {
  color: var(--color-text-accent-hover);
}
body > header nav,
body > header h1 {
  max-width: var(--width-content);
  margin: 0 auto;
}
body > header h1 {
  display: none;
  font: 2em 'Press Start 2P';
  text-align: center;
  padding: 10px 0 0 0;
}
body > header h1:before {
  content: '{';
  font-size: 1.5em;
  vertical-align: sub;
  margin-right: -30px;
}
body > header h1:after {
  content: '}';
  font-size: 1.5em;
  vertical-align: sub;
  margin-left: -30px;
}
@media all and (min-width: 720px) {
  body > header h1 {
    display: block;
  }
}
body > header nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: var(--color-accent);
}
body > header nav > a {
  font-size: 1.2em;
  display: block;
  font-family: 'Press Start 2P';
  padding: var(--padding);
}
body > header nav > a span {
  float: right;
}
body > header nav > ul {
  padding: var(--padding);
  display: none;
}
body > header nav > ul.open {
  display: block;
}
body > header nav > ul > li.open > ul {
  display: block;
}
body > header nav > ul > li > ul {
  display: none;
}
body > header nav > ul > li > ul > li > a {
  padding-left: 20px;
}
body > header nav > ul > li > ul > li > ul > li > a {
  padding-left: 40px;
}
@media all and (min-width: 720px) {
  body > header nav > a {
    display: none;
  }
  body > header nav > ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
  }
  body > header nav > ul > li > a {
    font-size: 1.5em;
  }
  body > header nav > ul > li > ul {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    flex-wrap: wrap;
    border: 3px solid var(--color-menu-border);
    margin-top: calc(var(--padding) * 2);
    padding: 0 var(--padding) var(--padding) var(--padding);
  }
  body > header nav > ul > li > ul > li {
    width: 33%;
    margin-top: var(--padding);
  }
  body > header nav > ul > li > ul > li > a {
    font-size: 1.3em;
    padding-left: var(--padding);
  }
  body > header nav > ul > li > ul > li > ul {
    padding-top: calc(var(--padding)/2);
  }
  body > header nav > ul > li > ul > li > ul > li > a {
    padding-left: calc(var(--padding) * 2);
  }
  body > header nav > ul > li.open > ul {
    display: flex;
  }
}

article header {
  text-align: center;
  margin-top: calc(var(--padding) * 2);
}
article header img {
  border: 1px solid var(--color-accent);
  margin: 0 auto;
  max-width: 90%;
}
article header h1 {
  font: 2em 'Press Start 2P';
  text-align: center;
  margin: calc(var(--padding) * 2) 0 0 0;
}
article header div {
  font-size: smaller;
  display: flex;
  gap: calc(var(--padding) *2);
  justify-content: center;
}
article header div span:last-child a:not(:last-child):after {
  content: ', ';
}
article section p {
  text-align: justify;
}
article section blockquote {
  border-left: double 3px var(--color-accent);
  padding-left: var(--padding);
  font-style: italic;
}
article footer > div.comments span {
  float: right;
  font-size: smaller;
}
article footer form {
  margin-bottom: calc(var(--padding)*3);
}
article footer form div {
  margin-bottom: var(--padding);
  align-items: baseline;
}
@media all and (min-width: 720px) {
  article footer form div {
    display: flex;
    gap: var(--padding);
  }
}
article footer form label {
  display: inline-block;
  width: 120px;
  text-align: right;
}
article footer form input,
article footer form textarea {
  border: solid 1px var(--color-accent);
}
article footer form input:focus,
article footer form textarea:focus {
  outline: none;
}
article footer form textarea {
  width: 80%;
  height: 100px;
}
article footer form input[type="submit"] {
  margin-left: calc(var(--padding) + 120px);
  background-color: var(--color-dark-accent);
  color: var(--color-text);
}
article.short footer {
  text-align: center;
  margin-top: -200px;
  position: relative;
}
article.short footer:before {
  content: ' ';
  background-image: linear-gradient(rgba(0, 0, 0, 0), var(--color-bg));
  display: block;
  width: 100%;
  height: 200px;
}
article.short footer:after {
  content: ' ';
  display: block;
  width: 80%;
  border-bottom: 3px double var(--color-accent);
  margin: var(--padding) auto calc(var(--padding)*6);
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding);
  justify-content: center;
  margin-top: var(--padding);
}
div.gallery a {
  display: inline-flex;
  max-width: 90%;
}
div.gallery img {
  display: inline-block;
  border: 1px solid var(--color-accent);
  object-fit: cover;
  max-width: 100%;
}

.gallery-view {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}
.gallery-view.fade .content {
  animation-name: fadeAnmimation;
  animation-duration: 0.4s;
}
.gallery-view img {
  max-height: 90%;
  max-width: 90%;
}

@keyframes fadeAnmimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
table {
  margin: var(--padding) auto 0;
  color: var(--dgrey);
  background-color: #F5F5F5;
  border-collapse: collapse;
  border-spacing: 0;
}
table thead,
table tbody {
  border: 1px solid var(--color-accent);
}
table thead tr {
  background-color: var(--light-70-orange);
}
table td,
table th {
  padding: 1px 3px;
}
table.sort thead {
  cursor: pointer;
}
table tr.hide {
  display: none;
}
table td.right {
  text-align: right;
}
table tr td.subtitle {
  text-align: right;
  background-color: var(--light-70-orange);
}
table.boxed td, table.boxed th {
  border: 1px solid var(--color-accent);
}

.paint-db tbody tr:nth-child(2n),
.paint-guide tbody tr:nth-child(2n),
.pyjama tbody tr:nth-child(2n) {
  background-color: var(--light-85-orange);
}

.paint-db,
.paint-guide {
  min-width: 780px;
}
.paint-db td a,
.paint-guide td a {
  padding-right: 2px;
}
.paint-db tr td:nth-child(2n),
.paint-guide tr td:nth-child(2n) {
  border-right: 1px solid var(--color-accent);
}
.paint-db td.color,
.paint-guide td.color {
  width: 40px;
}

/**
 * tortuga
 */
table.quest {
  margin-bottom: 15px;
}
table.quest > tbody:nth-child(2) td {
  padding: 5px 10px;
}

table.all-quests tbody tr td:nth-child(3) {
  padding: 5px 10px;
  min-width: 100px;
}

table.quest img,
table.players img,
table.all-quests img {
  max-width: unset;
}
table.quest td.xp,
table.players td.xp,
table.all-quests td.xp {
  min-width: 150px;
}
table.quest td.badge i,
table.players td.badge i,
table.all-quests td.badge i {
  margin-right: 1px;
}
table.quest span.progress,
table.players span.progress,
table.all-quests span.progress {
  display: block;
  width: 100%;
  height: 20px;
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  text-align: center;
}
table.quest span.progress span:first-child,
table.players span.progress span:first-child,
table.all-quests span.progress span:first-child {
  display: block;
  background-color: var(--color-accent);
  height: 16px;
  border-radius: 8px;
}
table.quest span.progress span:nth-child(2),
table.players span.progress span:nth-child(2),
table.all-quests span.progress span:nth-child(2) {
  position: relative;
  top: -18px;
}

pre {
  border: 1px solid var(--color-accent);
  border-radius: 1;
  padding: .5em 1.5em;
  margin: 0 1em;
  background: var(--lgrey);
  color: var(--dgrey);
  white-space: pre-wrap;
  tab-size: 4;
}
pre code.shell .hljs-keyword,
pre code.shell .hljs-built_in {
  color: #7f005f;
  font-weight: bold;
}
pre code.shell .hljs-comment {
  color: #3f7f5f;
}
pre code.shell .hljs-string {
  color: #2a00ff;
}
pre code.shell .hljs-meta {
  color: #646464;
}
pre code.java .hljs-keyword,
pre code.java .hljs-built_in {
  color: #7f005f;
  font-weight: bold;
}
pre code.java .hljs-comment {
  color: #3f7f5f;
}
pre code.java .hljs-string {
  color: #2a00ff;
}
pre code.java .hljs-meta {
  color: #646464;
}
pre code.cpp .hljs-meta {
  color: #0000ff;
}
pre code.cpp .hljs-meta .hljs-keyword {
  color: #af00db;
}
pre code.cpp .hljs-string {
  color: #a31515;
}
pre code.cpp .hljs-type {
  color: #0000ff;
}
pre code.cpp .hljs-title,
pre code.cpp .hljs-built_in {
  color: #795e26;
}
pre code.cpp .hljs-params,
pre code.cpp .hljs-keyword {
  color: #af00db;
}
pre code.cpp .hljs-number {
  color: #098658;
}
pre code.cpp .hljs-comment {
  color: #6a9955;
}
pre code.cpp .hljs-type {
  color: #0d0dff;
}
pre code.python .hljs-comment {
  color: #d00000;
}
pre code.python .hljs-built_in {
  font-weight: bold;
  color: #991111;
}
pre code.python .hljs-keyword {
  font-weight: bold;
  color: #00007f;
}
pre code.python .hljs-meta {
  color: #ff8000;
}
pre code.python .hljs-params {
  color: #381919;
}
pre code.python .hljs-string {
  color: #ff952b;
}
pre code.python .hljs-title {
  font-weight: bold;
  color: #00007f;
}
pre code.sql .hljs-comment {
  color: #d00000;
}
pre code.sql .hljs-keyword {
  font-weight: bold;
  color: #00007f;
}
pre code.sql .hljs-number {
  color: #007f00;
}
pre code.sql .hljs-type {
  font-weight: bold;
  color: #00007f;
}
pre code.xml .hljs-attr {
  font-weight: normal;
  color: #00007f;
}
pre code.xml .hljs-comment {
  color: #d00000;
}
pre code.xml .hljs-keyword {
  color: #00007f;
}
pre code.xml .hljs-meta {
  color: #007f00;
}
pre code.xml .hljs-string {
  font-weight: normal;
  color: #008000;
}
pre code.xml .hljs-tag {
  font-weight: bold;
  color: #0000d0;
}

body > footer {
  background-color: var(--color-dark-accent);
  padding: calc(var(--padding)*2) var(--padding) calc(var(--padding)*4) var(--padding);
}
body > footer > nav {
  max-width: var(--width-content);
  margin: 0 auto;
}
@media all and (min-width: 720px) {
  body > footer > nav {
    display: flex;
    gap: calc(var(--padding)*3);
  }
}
body > footer > nav aside {
  text-align: justify;
}
@media all and (min-width: 720px) {
  body > footer > nav aside {
    width: 33%;
  }
}
body > footer > nav aside ul {
  list-style-type: none;
  padding: 0 0 0 calc(var(--padding)*2);
}
body > footer > nav aside ul li.closed > ul {
  display: none;
}
body > footer > nav aside ul li.closed > a[href="#"]:before {
  content: "\f196";
  font-family: FontAwesome;
  color: var(--white);
  padding-right: 5px;
}
body > footer > nav aside ul li:not(.closed) > a[href="#"]:before {
  content: "\f147";
  font-family: FontAwesome;
  color: var(--white);
  padding-right: 5px;
}
body > footer > div {
  max-width: var(--width-content);
  margin: calc(var(--padding)*2) auto 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}
body > footer > div > span:last-child a {
  color: var(--color-dark-accent);
}

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