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

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

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Regular.ttf") format("truetype");
}

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

@font-face {
  font-family: "Ruslan Display";
  src: url("../fonts/RuslanDisplay-Regular.ttf") format("truetype");
}

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

:root {
  /* Colors */
  --color-accent-green: #62fb40;
  --color-accent-red: #a31914;
  --color-bg-main: #cbff7d;
  --color-highlight: #ff4136;
  --color-primary: #690d88;
  --color-primary-dark: #28073b;
  --color-primary-light: #ce89e5;
  --color-secondary: #6ae1f0;
  --color-secondary-dark: #0f419e;
  --color-secondary-teal: #0a8797;
  --color-shadow-light: rgb(191, 188, 215);
  --color-text-main: #430303;
  --color-tertiary: #f8d671;
  --color-tertiary-light: #ffedac;
  --color-tertiary-pale: #fcf3d0;

  /* Fonts */
  --font-display-1: "Staatliches", sans-serif;
  --font-display-2: "Audiowide", sans-serif;
  --font-display-3: "EagleLake", serif;
  --font-display-4: "Pochaevsk", sans-serif;
  --font-sans: "IBM Plex Sans", sans-serif;
  --font-serif: "IBM Plex Serif", serif;
}

body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: var(--font-serif);
  margin: 0;
}

.wrap {
  margin: auto;
  max-width: 1500px;
}

.site-header {
  background: radial-gradient(circle, var(--color-accent-red) 0%, var(--color-accent-green) 100%);
  border-radius: 5px;
  box-shadow: inset 0 0 5px 1px var(--color-accent-green), 0 1px 2px 1px;
  display: grid;
  gap: 5px;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 50% 20% 25%;
  height: 160px;
  justify-content: space-around;
  margin: 10px;
}

.site-logo {
  background: linear-gradient(0deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius: 5px;
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  margin: 5px 0 5px 5px;
  width: 90%;
}

.site-logo > img {
  height: 100%;
  width: 100%;
}

.title-img {
  display: block;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  margin: 5px auto 0 10px;
  width: 95%;
}

.header-titles {
  border: solid;
}

.header-sub {
  align-items: center;
  background: var(--color-primary);
  border: solid 1px var(--color-primary-dark);
  border-radius: 0 12px 0 12px;
  box-shadow: inset 0 0 5px 1px var(--color-primary-dark);
  color: black;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  margin-left: 10px;
  margin-top: 5px;
  padding: 0 5px;
  text-shadow: 0 0 3px var(--color-highlight);
  width: fit-content;
}

.site-description {
  font-family: var(--font-display-1);
  font-size: 140%;
  overflow: hidden;
  text-wrap: nowrap;
}

.navbar {
  align-content: center;
  background: var(--color-secondary-dark);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 0 5px 1px var(--color-shadow-light), 0 1px 2px 1px;
  grid-column: 1 / 3;
  grid-row: 3;
  margin-top: 5px;
  padding-left: 10px;
}

.navbar > ul {
  font-family: var(--font-sans);
  font-weight: bolder;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  text-wrap: nowrap;
}

.navbar ul > li {
  display: inline-block;
  margin: 0 5px 0 0;
}

.navbar > ul > li > a {
  color: var(--color-tertiary);
  font-size: 100%;
  text-decoration: none;
}

.word-up {
  background: var(--color-tertiary-light);
  border-radius: 6px;
  box-shadow: -2px 1px 1px 1px;
  margin: 10px 10px 0;
  padding: 0;
}

.word-up-title {
  background: linear-gradient(161deg, var(--color-primary) 30%, var(--color-primary-light) 50%, var(--color-primary) 70%);
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--color-primary-dark);
  color: var(--color-secondary);
  display: inline-block;
  font-family: var(--font-display-2);
  font-size: 150%;
  font-weight: bolder;
  margin: 0;
  padding: 0 5px;
}

.word-up-content {
  margin: 5px;
}

.category-filter {
  background: var(--color-tertiary);
  border-radius: 3px;
  box-shadow: inset 0 0 5px 1px var(--color-shadow-light), 0 1px 2px 1px;
  color: var(--color-secondary-dark);
  display: inline-block;
  margin: 5px;
  padding: 10px;
}

.category-filter > ul {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: bolder;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  text-wrap: nowrap;
}

.category-filter ul > li {
  display: inline-block;
  margin: 0 5px 0 0;
}

.category-filter ul > li > a {
  color: var(--color-secondary-dark);
  font-family: var(--font-display-1);
  font-size: 100%;
  text-decoration: none;
}

.category-filter ul > li > a:hover {
  color: var(--color-secondary);
}

.threadbox {
  margin: 0 10px;
}

.threadbox-title-content {
  font-family: var(--font-display-3);
  font-size: 150%;
  margin: 5px;
}

.threadbox-table {
  background-color: var(--color-tertiary-light);
  border-collapse: collapse;
  border-radius: 6px;
  box-shadow: -2px 1px 1px 1px;
  margin: 0;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.threadbox-table-header {
  background-color: var(--color-secondary);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 0 6px 2px var(--color-secondary-teal);
  color: var(--color-primary);
  font-family: var(--font-display-4);
  font-size: 18px;
  overflow: hidden;
  text-shadow: 1px 1px 0 var(--color-highlight);
}

.caticon {
  height: 30px;
  width: 120px;
}

th.threadbox-icon-cell {
  cursor: pointer;
}

.threadbox-row > td {
  border: 1px solid var(--color-primary-dark);
  box-shadow: inset 0 0 5px 2px var(--color-tertiary);
  padding: 3px;
}

.threadbox-row > td > a {
  font-weight: bold;
  text-decoration: none;
}

.threadbox-row > td > a:hover {
  color: var(--color-primary);
  text-shadow: 1px 1px var(--color-primary-dark);
}

.threadbox-icon-cell {
  text-align: center;
  width: 90px;
}

.submenu {
  display: none;
}

.submenu-cell > a {
  margin-right: 10px;
}

.threadbox-title-cell {
  max-width: 500px;
  overflow: hidden;
  padding-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.threadbox-author-cell {
  max-width: 300px;
  overflow: hidden;
  padding-left: 5px;
  text-align: left;
  white-space: nowrap;
}

.threadbox-replies-cell {
  text-align: center;
}

.threadbox-rating-cell {
  text-align: center;
  white-space: nowrap;
  width: 100px;
}

.rating-star {
  height: 10px;
  width: auto;
}

.threadbox-lastpost-cell {
  max-width: 200px;
  overflow: hidden;
  padding-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.threadbox-lastpost-ts {
  margin: 3px;
}

.login-wrapper {
  display: grid;
  place-items: center;
}

.login-box {
  background: var(--color-tertiary-light);
  border-radius: 6px;
  box-shadow: 0 3px 3px 3px;
  display: grid;
  margin-top: 10px;
  padding: 0 5%;
  place-items: center;
  width: auto;
}

.reg-input {
  background-color: var(--color-tertiary-pale);
  border: solid 2px var(--color-secondary-dark);
  border-radius: 3px;
  box-shadow: 0 0 2px 0 var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 12pt;
  margin: 0 10px 20px;
  width: 50px;
}

.login-title {
  background: var(--color-primary);
  border-radius: 3px;
  box-shadow: inset 0 0 5px 1px var(--color-shadow-light), 0 1px 2px 1px;
  color: var(--color-tertiary);
  font-family: var(--font-display-3);
  font-size: 150%;
  margin: 10px 10px 0;
  padding: 5px;
  text-shadow: 1px 1px 0 var(--color-secondary-dark);
}

.input-label {
  font-family: var(--font-display-2);
  margin: 10px;
}

.input {
  background-color: var(--color-tertiary-pale);
  border: solid 2px var(--color-secondary-dark);
  border-radius: 3px;
  box-shadow: 0 0 2px 0 var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 12pt;
  margin: 10px;
}

.submit-button {
  background: var(--color-accent-red);
  color: var(--color-tertiary);
  display: block;
  font-family: var(--font-display-1);
  font-size: 14pt;
  margin: 0 auto 10px;
}

.paginator-wrapper {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: end;
  justify-items: end;
  margin: 10px 20px 0 auto;
}

.paginator-select {
  font-size: 30px;
  height: 40px;
  margin-right: 10px;
  width: 50px;
}

.paginator-button {
  background-color: var(--color-tertiary-pale);
  border-radius: 3px;
  box-shadow: inset 0 0 5px 2px var(--color-tertiary), 0 1px 1px 1px;
  margin-right: 10px;
  padding: 1px 6px;
}

a:hover.paginator-button {
  background-color: var(--color-secondary);
}

.footer-wrapper {
  margin-bottom: 50px;
  margin-top: 10px;
}

.newthread-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.newthread-box {
  background: var(--color-tertiary-light);
  border-radius: 6px;
  box-shadow: 0 3px 3px 3px;
  margin-top: 10px;
  padding: 0 5%;
  width: auto;
}

.newthread-form {
  display: grid;
  grid-template-columns: 1fr;
}

.newthread-form > input {
  margin: 10px 0;
  max-width: 500px;
}

.category-select {
  font-size: 30px;
  height: 40px;
  margin: 10px 10px 10px 0;
  max-width: 300px;
}

.textarea-input {
  background-color: var(--color-tertiary-pale);
  border: solid 2px var(--color-secondary-dark);
  border-radius: 3px;
  box-shadow: 0 0 2px 0 var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 12pt;
  margin: 10px;
}

.newthread-submit-button {
  background: var(--color-accent-red);
  color: var(--color-tertiary);
  font-family: var(--font-display-1);
  font-size: 14pt;
  margin: 10px;
  max-width: 200px;
}

.user-view-wrapper {
  display: grid;
  grid-template-columns: auto;
  place-items: center;
}

.user-view-box {
  background: var(--color-tertiary-light);
  border-radius: 6px;
  box-shadow: 0 3px 3px 3px;
  display: grid;
  grid-template-columns: max-content auto;
  margin-top: 10px;
  padding-left: 10px;
  width: 75%;
}

.user-view-username {
  background: var(--color-primary);
  border-radius: 3px;
  box-shadow: inset 0 0 5px 1px var(--color-shadow-light), 0 1px 2px 1px;
  color: var(--color-tertiary);
  font-family: var(--font-display-3);
  font-size: 150%;
  margin-right: 10px;
  margin-top: 10px;
  max-width: 300px;
  overflow-wrap: anywhere;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 0 var(--color-secondary-dark);
}

.user-admin-badge {
  align-self: center;
  background-color: var(--color-secondary);
  border-radius: 3px;
  color: var(--color-primary-dark);
  font-family: var(--font-display-2);
  font-size: 12px;
  padding: 3px;
  width: fit-content;
}

.user-view-avatar {
  border: 1px solid var(--color-primary-dark);
  height: 128px;
  justify-self: center;
  width: 128px;
}

.user-view-bio-box {
  align-self: stretch;
  height: 50%;
  margin-left: 10px;
}

.user-view-bio {
  background-color: var(--color-tertiary-pale);
  border-radius: 3px;
  font-family: var(--font-serif);
  font-size: 12pt;
  height: 70%;
  padding: 5px;
  width: 80%;
}

.bio-textarea {
  background-color: var(--color-tertiary-pale);
  border: solid 2px var(--color-secondary-dark);
  border-radius: 3px;
  box-shadow: 0 0 2px 0 var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 12pt;
  height: 70%;
  margin: 10px;
  padding: 5px;
  width: 80%;
}

.reg-bio-textarea {
  background-color: var(--color-tertiary-pale);
  border: solid 2px var(--color-secondary-dark);
  border-radius: 3px;
  box-shadow: 0 0 2px 0 var(--color-primary-dark);
  font-family: var(--font-serif);
  font-size: 12pt;
  height: 70%;
  margin: 10px;
  padding: 5px;
}

.select-avatar-box {
  border: solid 2px var(--color-secondary-dark);
  grid-column: 1 / -1;
  margin: 10px;
  padding: 5px;
}

.avatar-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-height: 300px;
  overflow: auto;
}

.threadbox-thread-cat-title {
  font-family: var(--font-display-1);
  font-size: 14pt;
}

.threadbox-comment-author-cell {
  border: none;
  box-shadow: none;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 96%;
}

.threadbox-comment-body-cell {
  max-width: 0;
  position: relative;
  width: 100%;
}

.threadbox-comment-body {
  overflow-wrap: anywhere;
  padding: 10px 10px 30px;

  & pre,
  & code {
    background-color: var(--color-tertiary);
  }

  & img {
    max-width: 100%;
    height: auto;
  }

  & h1 { font-size: 1.5rem; }
  & h2 { font-size: 1.3rem; }
  & h3 { font-size: 1.2rem; }
  & h4 { font-size: 1.1rem; }

    /* Container table styling */
  & table {
      border-collapse: collapse;
      margin: 10px 0;
      border: 1px solid var(--color-text-main);
  }
  
  /* Header styling */
  & th {
      background-color: var(--color-tertiary);
      border: 1px solid var(--color-accent-red);
      padding: 8px 12px;
      text-align: left;
      font-weight: bold;
  }
  
  /* Cell styling */
  & td {
      border: 1px solid var(--color-accent-red);
      padding: 8px 12px;
      vertical-align: top;
  }
  
}

.thread-reply-button {
  background: var(--color-tertiary);
  border-radius: 5% / 100%;
  bottom: 8px;
  font-family: var(--font-serif);
  left: 150px;
  position: absolute;
}

.threadbox-comment-ts {
  bottom: 0;
  font-size: 10px;
  left: 5px;
  position: absolute;
}

.comment-box {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 20px;
  width: 100%;
}

.quote-block {
  background-color: var(--color-tertiary-pale);
  border: solid 1px var(--color-primary-dark);
  border-radius: 3px;
  font-family: var(--font-serif);
  font-size: 12pt;
  margin: 10px;
  overflow: scroll;
}

.quote-heading {
  color: var(--color-primary-dark);
  font-size: 9pt;
  font-style: italic;
  margin-left: 5px;
}

.quote-body {
  margin-left: 5px;
  max-height: 200px;
  overflow: scroll;
  overflow-wrap: anywhere;
  padding-bottom: 0;
}