:root {
  --button-bg: #ea5600;
  --button-border: #8e3c0d;
  --vote-up-active: #ff7300;
  --vote-down-active: #606ddd;
  --quota-colour: #aed667;
}

@font-face {
  font-family: Gayathri;
  src: url("Gayathri.ttf") format("opentype");
}

@font-face {
  font-family: Kedebideri;
  src: url("Kedebideri.ttf") format("opentype");
}

@font-face {
  font-family: Determination;
  src: url("avatar/determination.ttf") format("opentype");
}

[hidden] {
  display: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-family: "Gayathri", serif;
  font-size: 48px;
}

h2 {
  font-family: "Gayathri", serif;
  font-size: 28px;
}

h3 {
  font-family: "Kedebideri", serif;
  font-size: 40px;
}

h4 {
  font-family: "Kedebideri", serif;
  font-size: 32px;
}

p {
  font-family: "Kedebideri", serif;
  font-size: 20px;
}

peen {
  display: block;
  text-align: center;
  font-family: "Kedebideri", serif;
  font-size: 12px;
}

body {
    align-items: center;
    background-color: #e7e4da;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #ff711e;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  height: 120px;
  width: auto;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

button {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  cursor: pointer;
  font-size: 24px;
  font-family: "Gayathri", serif;
}

button:disabled {
  cursor: default;
}

.nav-buttons button {
  padding: 12px 20px;
  font-size: 36px;
}

.rules-icon {
  height: 80px;
  width: auto;
  cursor: pointer;
}

@media (max-width: 768px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 20px;
  }

  .header {
    flex-direction: column;
    padding: 12px;
  }

  .logo {
    height: 70px;
    margin-bottom: 8px;
  }

  .nav-buttons button {
    padding: 8px 14px;
    font-size: 16px;
  }

}

.post {
  border: 1px solid rgb(78, 30, 18);
  border-radius: 16px;
  margin: 16px 24px;
  max-width: 700px;
  background: rgb(220, 217, 201);
  overflow: hidden;
}

.post.reached {
  background: var(--quota-colour);
}

.post-author {
  font-size: 16px;
  padding: 8px 12px 0 12px;
}

.post-title {
  padding: 4px 12px 8px 12px;
  border-bottom: 1px solid black;
}

.post-body {
  padding: 8px 12px;
}

.post-votes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
}

.post-admin {
  padding: 8px 12px;
  border-top: 1px solid black;
  text-align: center;
}

.vote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
}

.vote-icon {
  width: 24px;
  height: 24px;
}

.vote.up.active {
  background: var(--vote-up-active);
}

.vote.down.active {
  background: var(--vote-down-active);
}

.post-votes {
  align-items: center;
}

.vote-score {
  min-width: 2ch;
  text-align: center;
  font-weight: bold;
}

.status {
  text-align: center;
  margin: 16px;
}

.page-title {
  text-align: center;
  margin: 24px 0 8px 0;
}

/* leaderboard */
#leaderboard {
  display: flex;
  justify-content: center;
}

table { margin: 16px auto; border-collapse: collapse; font-family: "Kedebideri", serif; font-size: 20px; }
th, td { padding: 6px 16px; border-bottom: 1px solid black; text-align: left; }

.admin {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 700px;
  margin: 24px auto;
  padding: 16px;
}

.admin-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid black;
}

.admin h3 {
  font-size: 28px;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.token-result {
  user-select: all;
  word-break: break-all;
}

.logo {
  height: 160px;
}

input, textarea {
  font-family: "Kedebideri", serif;
  font-size: 20px;
  padding: 10px 14px;
  border: 1px solid var(--button-border);
  border-radius: 12px;
  background: white;
}

textarea {
  width: min(600px, 90%);
  min-height: 160px;
  resize: vertical;
}

#title, #rule-name {
  width: min(600px, 90%);
}

#new-post, #today-section {
  text-align: center;
  margin: 16px 0;
}

#new-post input, #new-post textarea {
  margin-bottom: 8px;
}

#today {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post {
  width: 90%;
  max-width: 700px;
  margin: 16px auto;
}

.vote {
  background: #bdbdbd;
  border-color: #8a8a8a;
}
/* avatars */

/* the 3 pictures sit exactly on top of each other. The first one (head) sets the size */
.avatar {
  position: relative;
  width: 48px;
  flex-shrink: 0;
}

.avatar img {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

.avatar img + img {
  position: absolute;
  top: 0;
  left: 0;
}

/* avatar + name on a post */
.post-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Kedebideri", serif;
}

/* the name is bigger and has a glow */
.post-author span {
  font-family: "Determination", sans-serif;
  font-size: 32px;
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 80%, black);
}
/* gonermaker */

hg {
  font-family: "Determination", serif;
  font-size: 48px;
  text-align: center;
  color: #ffffff;
  margin: 24px 0 8px 0;
  text-shadow: 0 0 8px #bbbbbb;
}

pg {
  font-family: "Determination", serif;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  margin: 24px 0 8px 0;
  text-shadow: 0 0 8px #bbbbbb;
}

.creator-page {
  background: #10062c url("avatar/DEPTHS.gif") center / cover no-repeat fixed;
}

.creator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90%;
  max-width: 600px;
  margin: 24px auto;
  padding: 24px;
  text-align: center;
}

/* arrows | big avatar | arrows, one row of arrows per part */
.creator-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  gap: 8px 24px;
}

.creator-preview {
  grid-column: 2;
  grid-row: 1 / 4;
}

.arrow.left { grid-column: 1; }
.arrow.right { grid-column: 3; }
.row-head { grid-row: 1; }
.row-body { grid-row: 2; }
.row-legs { grid-row: 3; }

.arrow {
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}

/* the up/down vote arrows turned sideways: down points left, up points right */
.arrow img {
  width: 32px;
  height: 32px;
  transform: rotate(90deg);
}

.goner-button {
  padding: 8px 16px;
  border: 6px solid #ffffff;
  border-radius: 0;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  font-size: 24px;
  text-shadow: 0 0 8px #bbbbbb;
  font-family: "Determination", sans-serif;
}

.creator .arrow img {
  filter: invert(1);
}

.avatar.big {
  width: 256px;
}

#color-input {
  width: 60px;
  height: 44px;
  padding: 4px;
  cursor: pointer;
}

/* server indicator */

.green-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 24px;
  min-height: 24px;
  margin: 12px auto;
  padding: 6px 14px;
  background: #3cc45a;
  border-radius: 12px;
  color: #ffffff;
  font-family: "Kedebideri", sans-serif;
  font-size: 20px;
}

/* left foot lefft stomp, right foot rigth stomp, let's get to work!*/
.vote.left .vote-icon,
.vote.right .vote-icon {
  transform: rotate(90deg);
}

.vote.left.active {
  background: var(--vote-left-active, #b04ad0);
}

.vote.right.active {
  background: var(--vote-right-active, #2fa84f);
}

.signup-slot {
  position: relative;
  min-height: 150px;
}

.signup-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  z-index: 10;
}

.signup-link img {
  display: block;
  height: 100%;
  width: auto;
}

.corner-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 0 4px;
  background: #ffcc00;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.divider-calc {
  max-width: 500px;
  margin: 32px auto;
  text-align: center;
}