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

@font-face {
    font-family: "sourcesans";
    src: url("/assets/fonts/sourcesans.ttf") format("opentype");
}

.item-background {
    position: absolute;
    background: var(--color-item-mantra);
    width: 90%;
    height: 90%;
}

section {
    width: 256px;
    height: 256px;
    
    display: grid;
    place-items: center;
    align-content: center;
}

.border {
  width: 100%;
  height: 100%;
}

.item {
    border-image: url(/assets/img/border/item.png) 45%;
    border-image-width: 45px;
}

.mantra {
    border-image: url(/assets/img/border/mantra.png) 45%;
    border-image-width: 60px;
}

.enchant-indicator {
    transform: translateY(85%);
    position: absolute;
    width: 128px;
    z-index: 3;
}

.weapon-indicator {
    transform: translateY(225%);
    position: absolute;
    width: 48px;
    z-index: 3;
}

.mantra-icon {
  position: absolute;
  width: 240px;
  opacity: 0.75;
}

.mantra-indicator {
  z-index: 9;
  transform: translateY(150%);
  position: absolute;
  width: 75px;
}

.star-icon {
    filter: brightness(0.5) opacity(0.75);
    position: absolute;
    width: 24px;
    z-index: 2;
}

.star-1 {
    transform: translate(0%, -275%);
}

.star-2 {
    transform: translate(110%, -275%);
}

.star-3 {
    transform: translate(-110%, -275%);
}

.title {
    z-index: 1;
    font-family: Balthazar;
    font-size: 3rem;
    text-align: center;
    color: #444444;
}

.title-2d {
    -webkit-text-stroke: 0.15px #000;
    text-shadow: #000 1px 1px 3px, #000 -1px 1px 3px, #000 1px -1px 3px, #000 -1px -1px 3px;
    opacity: 0.75;
    font-family: Balthazar;
    font-size: 3rem;
    text-align: center;
    color: #ffffff;
}

.title-3d {
    -webkit-text-stroke: 0.15px #000;
    text-shadow: #000 1px 1px 3px, #000 -1px 1px 3px, #000 1px -1px 3px, #000 -1px -1px 3px;
    opacity: 0.75;
    font-family: Balthazar;
    font-size: 3rem;
    text-align: center;
    color: #ffffff;
}

.item-count, .hotbar-count {
    z-index: 9;
    border: black solid 1px;
    border-radius: 4px;
    text-align: center;
    background: lightgoldenrodyellow;
    position: absolute;
    width: 60px;
    height: 52px;
    font-family: sourcesans;
    font-size: 2.5rem;
}

.item-count {
    transform: translateY(200%);
}

.hotbar-count {
    transform: translateY(-200%);
}

.gale-icon {
  filter: invert(90%) sepia(100%) saturate(400%) hue-rotate(66deg) brightness(88%) contrast(83%);
}

.blood-icon {
  filter: invert(6%) sepia(100%) saturate(4000%) hue-rotate(11deg) brightness(100%) contrast(100%);
}