@import url("https://cdn.22is5.com/css/reset.css");
@import url("https://cdn.22is5.com/fonts/minecraft.css");
@import url("https://cdn.22is5.com/css/colors.css");

:root {
  --content-font: "Minecraft Regular";
  --header-font: "Minecraft Bold";
  --code-font: "Minecraft Mono";
  --content-radius: 0px;
  --menu-width: 480px;
}

body {
  color: #fff;
  background-color: #000;
  font-family: "Minecraft Regular";
  font-size: 24px;
  line-height: 1.3;
  /* cursor: none; */
}

.factions {
  width: var(--menu-width);
  display: flex;
  user-select: none;
  gap: 16px;
  filter: drop-shadow(0 0 6px #000);
  padding: 0 0 6px 0;
}

.banner {
  width: 100%;
}

.tooltip {
  transform: translate(18px, -36px);
  user-select: none;
  position: fixed;
  pointer-events: none;
  background-color: #110211ef;
  padding: 6px;
  font-size: 24px;
  top: 50%;
  left: 50%;
  z-index: 9999;
  font-family: "Minecraft Regular";
  clip-path: polygon(
    0px calc(100% - 6px),
    6px calc(100% - 6px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 6px) 6px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 6px,
    0px 6px
  );
}
.tooltip-info {
  border: solid 4px #301669e9;
  user-select: none;
  padding: 2px 6px;
}
.tooltip-title {
  margin: 0 0 6px 0;
}
.tooltip-br {
  height: 12px;
}
.uncommon {
  color: var(--uncommon);
}
.rare {
  color: var(--rare);
}
.bold {
  font-family: "Minecraft Bold";
}
.italic {
  font-family: "Minecraft Italic";
}
.mono {
  font-family: "Minecraft Mono";
}
.rare {
  color: var(--rare);
}
.red {
  color: var(--mc-red);
}
.gold {
  color: var(--mc-gold);
}
.yellow {
  color: var(--mc-yellow);
}
.green {
  color: var(--mc-green);
}
.dark_green {
  color: var(--mc-dark_green);
}
.aqua {
  color: var(--mc-aqua);
}
.blue {
  color: var(--mc-blue);
}
.blurple {
  color: var(--blurple);
}
.gray {
  color: var(--mc-gray);
}
#bureau-tooltip {
  display: none;
}
#trench-tooltip {
  display: none;
}
#populist-tooltip {
  display: none;
}
#bumps-tooltip {
  display: none;
}
#dema-tooltip {
  display: none;
}
#seals-tooltip {
  display: none;
}
#information-tooltip {
  display: none;
}
#discord-tooltip {
  display: none;
}

#pumpkin {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  pointer-events: none;
  user-select: none;
}

.bg {
  position: fixed;
  background-image: url("textures/block/deepslate_tiles.png");
  background-position: center;
  background-size: 128px;
  image-rendering: pixelated;
  filter: brightness(24%);
  aspect-ratio: 4320/1080;
  height: 100vh;
  z-index: -1;
  display: flex;
}
#cursor {
  display: none;
  user-select: none;
  position: fixed;
  pointer-events: none;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: 36px;
  transform: rotate(-90deg);
}

.wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 36px;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.title {
  width: 640px;
  margin-bottom: 42px;
  user-select: none;
}
.button {
  user-select: none;
  width: var(--menu-width);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("textures/gui/sprites/widget/button.png");
  background-position: center;
  background-size: cover;
  aspect-ratio: 10/1;
  image-rendering: pixelated;
  position: relative;
}

.button:hover {
  background-image: url("textures/gui/sprites/widget/button_highlighted.png");
}

.button__text {
  filter: drop-shadow(2px 2px 0 var(--mc-dark_gray));
}

.music {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  user-select: none;
}

.music__checkbox {
  background-image: url("textures/gui/sprites/widget/checkbox.png");
  background-position: center;
  background-size: cover;
  width: 48px;
  aspect-ratio: 1/1;
  image-rendering: pixelated;
}

.spacer {
  height: 64px;
}

.information {
  color: var(--mc-gray);
  background-image: url("textures/gui/sprites/widget/button_disabled.png");
}
.information:hover {
  background-image: url("textures/gui/sprites/widget/button_disabled.png");
}

.ico {
  position: absolute;
  left: 14px;
  filter: brightness(64%);
}