@font-face {
  font-family: "RubikSprayPaint";
  font-weight: 700;
  src: url("/style/fonts/RubikSprayPaint-Regular.ttf");
}

@font-face {
  font-family: "Readex Pro";
  src: url("/style/fonts/ReadexPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  src: url("/style/fonts/Andika-Regular.ttf");
}

html {
  align-items: start;
}

body {
  --orange: #fa8f61;
  --yellow: #c5d656;
  --green: #71b43e;
  --blue: #adcbd4;
  --darkgreen: #12280c;
  --cream: #fff5e0;
  --brown: #6b2b06;
  --graybrown: #443d37;
  --purple: #271530;
  --black: #201e1f;
  background: var(--cream);
  font-family: Andika;
  font-size: 1.2em;
  font-weight: 500;
  padding: 100px;
  padding-top: 10px;
}

header {
  background: var(--yellow);
  font-family: Readex Pro;
}

main {
  padding: 50px;
}

h1:not(header h1),
.article h2 {
  background-color: var(--orange);
  padding: 10px;
  text-shadow: 0px 0px 0px;
  font-family: Readex Pro;
  border: none;
  color: var(--black);
}

h2,
.article h3 {
  color: var(--black);
  border-image: linear-gradient(
    90deg,
    var(--orange) 0%,
    var(--yellow) 25%,
    var(--green) 50%,
    var(--blue) 75%,
    var(--purple) 100%
  );
  border-image-slice: 1;
  border-bottom: 4px solid transparent;
  margin-bottom: 0.3em;
  background: none;
  font-family: Readex Pro;
  padding-bottom: 0px;
}

h3,
h4 {
  color: var(--black);
  font-family: Readex Pro;
}

h3 {
  font-size: 25px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 20px;
}

a {
  color: var(--darkgreen);
  background-color: var(--yellow);
  padding: 3px;
}

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

header,
header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0px;
}

header {
  flex-direction: column;
}

header ul li {
  margin-left: 10px;
  margin-right: 10px;
  list-style: none;
}

header a:hover {
  color: var(--black);
}

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}

#world-title {
  background: none;
  text-transform: uppercase;
  font-family: "RubikSprayPaint";
  font-size: 5em;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px var(--yellow), 5px 5px var(--orange);
  color: var(--green);
  letter-spacing: -3px;
  transition: 700ms ease;
  font-variation-settings: "wght" 311;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

#world-title:hover {
  font-variation-settings: "wght" 582;
  letter-spacing: 0.02em;
}

#article-title {
  font-size: 5em;
  margin-top: -20px;
  margin-bottom: -10px;
}

#maincontent {
  background: var(--cream);
  color: var(--black);
  border: 0px;
}

#sidebar {
  background: var(--cream);
  color: var(--black);
  border: 7px dashed var(--blue);
  min-width: 200px;
  height: fit-content;
  margin-top: 100px;
  overflow-wrap: break-word;
  padding: 20px;
  padding-top: 0px;
  margin-left: 20px;
}

#world-codex-button button {
  position: fixed;
  left: 10px;
  top: 300px;
  z-index: 9999999999999;
  font-size: 40px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  background-color: var(--black);
  color: var(--yellow);
}

#world-codex-iframe {
  width: 100%;
  background-color: var(--black);
  border: 0;
  height: 420px;
  margin-bottom: -50px;
}

#world-codex {
  border: none;
  border-radius: 0;
  background-color: var(--black);
  color: var(--cream);
  top: calc(50% - 270px);
}

#codex {
  background-color: var(--black);
  border: 0;
  font-family: "Readex Pro";
}

#codex h1 {
  color: var(--black);
  background-color: var(--yellow);
}

#codex-nav,
#codex-nav ul {
  display: inline;
  list-style-type: square;
  color: var(--cream);
}

#codex-nav ul li {
  margin-left: 60px;
}

#codex-nav a {
  background: none;
  color: var(--cream);
}

#article-header-image {
  text-align: center;
}

#article-title {
  font-size: 63px;
  font-family: "RubikSprayPaint";
  letter-spacing: 0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--black);
  text-shadow: 2px 2px var(--green), 5px 5px var(--yellow);
  background: none;
  text-align: center;
}

h2#subtitle {
  background-color: var(--yellow);
  color: var(--purple);
  font-size: 20px;
  text-align: center;
  border: none;
  padding: 7px;
}

#dictionary-search {
  font-family: "Andika";
  width: 100%;
  font-size: 20px;
  background-color: var(--yellow);
  border: none;
}

#dictionary-search-button,
#dictionary-clear-button {
  font-family: "Andika";
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

#dictionary-search-button {
  background-color: var(--blue);
}

#dictionary-clear-button {
  background-color: var(--orange);
}

@media only screen and (max-width: 800px) {
  body {
    padding: 10px;
  }

  #wrapper {
    flex-direction: column;
  }

  #maincontent {
    width: 100%;
  }

  #world-title,
  #article-title {
    font-size: 50px;
  }

  header a {
    background: none;
  }

  #world-codex {
    left: 0;
  }
}

#subcategory-links li,
#article-links li {
  margin-bottom: 10px;
}

#header-image {
  max-width: 100%;
}

.rarite {
  background: var(--yellow);
  color: var(--purple);
}

.rarite button {
  background: var(--purple);
  color: var(--yellow);
}

.sela {
  background: var(--green);
  color: var(--purple);
}

.sela button {
  background: var(--black);
  color: var(--green);
}

.ildoar {
  background: var(--orange);
  color: var(--darkgreen) !important;
}

.ildoar h3 {
  color: var(--darkgreen) !important;
}

.ildoar button {
  background: var(--darkgreen);
  color: var(--orange);
}

.teronura {
  background: var(--blue);
  color: var(--black);
}

.teronura button {
  background: var(--black);
  color: var(--blue);
}

.window-name h1 {
  margin-bottom: 0px;
}

table.language-table {
  padding: 0.5rem 0.5rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

table.language-table th {
  background: var(--blue);
  color: var(--black);
}

table.language-table td:first-child {
  background: var(--yellow);
  color: var(--purple);
  font-weight: bold;
}

table.language-table td:first-child.plural {
  background-color: var(--orange);
}
table.language-table td:first-child.collective {
  background-color: var(--green);
}

table.language-table td {
  background: white;
  color: black;
  padding: 3px;
  text-align: center;
}

.dictionary-item {
  padding: 10px;
  margin-bottom: 4px;
  border: 2px solid;
}

.quote {
  background: var(--blue);
  color: var(--black);
  border: 4px dashed var(--green);
  border-radius: 30px;
  padding: 20px;
}

.bold {
  font-weight: 900;
}

.italic {
  font-style: italic;
}

.row img {
  align-self: center;
}

[role="tooltip"] {
  display: block;
  background-color: var(--accent2);
  position: fixed;
  width: 500px;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  z-index: 9999;
  color: var(--black);
  padding: 20px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

[role="tooltip"] .tooltip__body {
  padding: 10px;
}

.hidden {
  visibility: hidden;
}