/* 
Fonts: Minecraft, Monocraft, Minecrafter, Minecraft Alt, Minecraft Evenings
CSS Variables:
    --block-size: 48px; all sizing is relative to this property to keep everything tiled together
    --zoom: 1; Set indiviualy for each class use this property to control how 'zoomed' in or out you want your UI textures to be
    --( 1/16 | 1/8 | 1/4 | 1/2 )-block
    --{1-32}-block 
Classes:
    text-shadow-(xs|sm|md|lg|xl)
    link
    bg-dark-(75|50|25)
    map
    book
    sign
    button
    scrollbar
    transparent-panel, paenl, panel-dark
    transparent-achievement panel, achievement panel
    transparent-slot, slot
    transparent-raised-slot, raised-slot, raised-slot-hover, raised-slot-active
    enchanting-slot, enchanting-slot-hover, enchanting-slot-active
    anvil-textbox, anvil-textbox-active
    table
    markdown
*/

:root {
    --block-size: 48px;
    --zoom: 1;
    
    --1\/16--block: calc(var(--block-size) / 16);
    --1\/8-block: calc(var(--block-size) / 8);
    --1\/4-block: calc(var(--block-size) / 4);
    --1\/2-block: calc(var(--block-size) / 2);
    --1-block: calc(var(--block-size) * 1);
    --2-block: calc(var(--block-size) * 2);
    --3-block: calc(var(--block-size) * 3);
    --4-block: calc(var(--block-size) * 4);
    --5-block: calc(var(--block-size) * 5);
    --6-block: calc(var(--block-size) * 6);
    --7-block: calc(var(--block-size) * 7);
    --8-block: calc(var(--block-size) * 8);
    --9-block: calc(var(--block-size) * 9);
    --10-block: calc(var(--block-size) * 10);
    --11-block: calc(var(--block-size) * 11);
    --12-block: calc(var(--block-size) * 12);
    --13-block: calc(var(--block-size) * 13);
    --14-block: calc(var(--block-size) * 14);
    --15-block: calc(var(--block-size) * 15);
    --16-block: calc(var(--block-size) * 16);
    --17-block: calc(var(--block-size) * 17);
    --18-block: calc(var(--block-size) * 18);
    --19-block: calc(var(--block-size) * 19);
    --20-block: calc(var(--block-size) * 20);
    --21-block: calc(var(--block-size) * 21);
    --22-block: calc(var(--block-size) * 22);
    --23-block: calc(var(--block-size) * 23);
    --24-block: calc(var(--block-size) * 24);
    --25-block: calc(var(--block-size) * 25);
    --26-block: calc(var(--block-size) * 26);
    --27-block: calc(var(--block-size) * 27);
    --28-block: calc(var(--block-size) * 28);
    --29-block: calc(var(--block-size) * 29);
    --30-block: calc(var(--block-size) * 30);
    --31-block: calc(var(--block-size) * 31);
    --32-block: calc(var(--block-size) * 32);

    --fluid-0: clamp(0.72rem, calc(0.67rem + 0.24vw), 0.87rem);
    --fluid-1: clamp(0.91rem, calc(0.87rem + 0.22vw), 1.04rem);
    --fluid-2: clamp(1.09rem, calc(1.04rem + 0.26vw), 1.25rem);
    --fluid-3: clamp(1.31rem, calc(1.25rem + 0.31vw), 1.50rem);
    --fluid-4: clamp(1.58rem, calc(1.50rem + 0.38vw), 1.80rem);
    --fluid-5: clamp(1.89rem, calc(1.80rem + 0.45vw), 2.16rem);
    --fluid-6: clamp(2.27rem, calc(2.16rem + 0.54vw), 2.59rem);
    --fluid-7: clamp(2.72rem, calc(2.59rem + 0.65vw), 3.11rem);
    --fluid-8: clamp(3.27rem, calc(3.11rem + 0.78vw), 3.73rem);
    --fluid-9: clamp(3.73rem, calc(3.48rem + 1.24vw), 4.48rem);
}


/* Typogrpahy */
.text-shadow-none {
    text-shadow: none;
} .text-shadow-xs {
    text-shadow: 0.75px 0.75px #000;
}.text-shadow-sm {
    text-shadow: 1px 1px #000;
} .text-shadow, .text-shadow-md,
  .table td,
  .button,
  .markdown > p,
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6,
  .markdown ul,
  .markdown :not(pre) code,
  .markdown td {
    text-shadow: 1.5px 1.5px #000;
} .text-shadow-lg {
    text-shadow: 1.75px 1.75px #000;
} .text-shadow-xl {
    text-shadow: 2px 2px #000;
}

  .link,
  .markdown a:not(.button) {
    text-shadow: none;
    color: #aaaaff;
} .link,
  .markdown a:not(.button):hover {
    text-decoration: underline;
}



/* Backgrounds */
[class*="bg-block"],
[class*="bg-item"] {
    image-rendering: pixelated;
    background-repeat: repeat;
    background-size: var(--block-size);
    -o-background-size: var(--block-size);
    -moz-background-size: var(--block-size);
    -webkit-background-size: var(--block-size);
}

[class*="bg-painting"] {
    image-rendering: pixelated;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}


  .bg-dark-25 {
    background-size: cover;
    background-image: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25));
} .bg-dark-50 {
    background-size: cover;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
} .bg-dark,
  .bg-dark-75 {
    background-size: cover;
    background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75));
}

/* UI */
.sign {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-image: url('../imgs/ui/sign.png');
    white-space: pre-line;
    color: #000;
}


.map {
    --zoom: 4;
    box-sizing: content-box;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/map.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 12.75% 15.75% fill;
    border-image-repeat: repeat;
}

.book {
    --zoom: 4;
    --size: calc((var(--block-size) / var(--zoom) * 3));
    border-width: var(--size);
    border-style: solid;
    border-left-width: calc(var(--size) / 1.5);
    border-image: url('../imgs/ui/book.png');
    border-image-width: var(--size) var(--size) var(--size) calc(var(--size) / 1.5);
    border-image-slice: 8.5% 15% 12.75% 10% fill;
    border-image-repeat: stretch;
    color: #000;
    text-shadow: none;
}

.button {
    --zoom: 10;
    user-select: none;
    cursor: pointer;
    image-rendering: pixelated;
    background-size: cover;
    background-image: url('../imgs/ui/button-inside.png');
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/button-border.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 10% 3%;
    border-image-repeat: stretch;
    color: #d1d5db;
} .button:hover {
    background-size: cover;
    background-image: url('../imgs/ui/button-inside-hover.png');
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/button-border-hover.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 10% 3%;
    border-image-repeat: stretch;
    color: #fef08a;
} .button:active {
    background-size: cover;
    background-image: url('../imgs/ui/button-inside-active.png');
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/button-border-active.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 10% 3%;
    border-image-repeat: contain;
    color: #a8a29e;
}

.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #909090 #bfbfbf;
} .scrollbar::-webkit-scrollbar {
    width: 16px;
} .scrollbar::-webkit-scrollbar-thumb {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/scroll-thumb.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
} .scrollbar::-webkit-scrollbar-thumb:active {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/scroll-thumb-active.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.transparent-panel {
    --zoom: 10;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/transparent-panel.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 43% 43% fill;
    border-image-repeat: stretch;
}

.panel,
.table,
.markdown table {
    --zoom: 10;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/panel.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 43% 43% fill;
    border-image-repeat: stretch;
}

.panel-dark {
    --zoom: 10;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/panel-dark.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 43% 43% fill;
    border-image-repeat: stretch;
}

.transparent-achievement-panel {
    --zoom: 10;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/transparent-achievement-panel.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 45.5% 45.5% fill;
    border-image-repeat: stretch;
}

.achievement-panel,
.markdown hr,
.markdown pre,
.markdown :not(pre) code,
.markdown blockquote {
    --zoom: 10;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/achievement-panel.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 45.5% 45.5% fill;
    border-image-repeat: stretch;
}

.transparent-slot {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/transparent-slot.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.slot,
.table td,
.markdown td,
.scrollbar::-webkit-scrollbar-track {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/slot.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.transparent-raised-slot {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/transparent-raised-slot.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.raised-slot,
.raised-slot-button,
.scrollbar::-webkit-scrollbar-corner {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/raised-slot.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
} .raised-slot-hover,
  .raised-slot-button:hover {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/raised-slot-hover.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
} .raised-slot-active,
  .raised-slot-button:active {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/raised-slot-active.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.enchanting-slot,
.enchanting-slot-button {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/enchanting-slot.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
} .enchanting-slot-hover,
  .enchanting-slot-button:hover {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/enchanting-slot-hover.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
} .enchanting-slot-active,
  .enchanting-slot-button:active {
    --zoom: 24;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/enchanting-slot-active.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 33.5% 33.5% fill;
    border-image-repeat: stretch;
}

.anvil-textbox {
    --zoom: 16;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/anvil-textbox.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 40% 40% fill;
    border-image-repeat: stretch;
} .anvil-textbox-active,
  .anvil-textbox:active,
  .anvil-textbox:focus {
    --zoom: 16;
    border-width: calc(var(--block-size) / var(--zoom));
    border-image: url('../imgs/ui/anvil-textbox-active.png');
    border-image-width: calc(var(--block-size) / var(--zoom));
    border-image-slice: 40% 40% fill;
    border-image-repeat: stretch;
}

/* markdown */
.markdown {
    overflow: hidden;
    font-family: Minecraft;
    font-size: 1rem;
    color: #fff;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    margin: 0.75rem 0;
}

.markdown h1 {
    font-size: var(--fluid-7);
} .markdown h2 {
    font-size: var(--fluid-6);
} .markdown h3 {
    font-size: var(--fluid-5);
} .markdown h4 {
    font-size: var(--fluid-4);
} .markdown h5 {
    font-size: var(--fluid-3);
} .markdown h6 {
    font-size: var(--fluid-2);
}

.markdown hr {
    height: 5px;
    margin: 1rem 0;
    border-width: 4px !important;
}

.markdown > p {
    margin: 0.75rem 0;
    font-size: 0.875rem;
    font-size: var(--fluid-1);
}

.markdown ul {
    margin: 0 2rem;
}

.markdown ul li::marker {
    content: "- ";
}


.markdown blockquote {
    margin: 1rem 0;
    padding: 0.5rem;
}

.markdown :not(pre) code {
    --zoom: 12  !important;
    font-family: Minecraft !important;
    text-align: center;
}

.markdown pre {
    overflow-x: visible !important;
    padding: 0.5rem;
    font-size: var(--fluid-0);
}

.markdown pre code span {
    font-family: Monocraft !important;
    white-space: pre-wrap;
}

.markdown code {
    padding: 0 0.2rem;
}

.table, .markdown table {
    border-collapse: separate;
    padding: 0.5rem;
} .table th, .markdown th {
    font-weight: normal;
    font-size: var(--fluid-2);
    color: #3d3c3d;
} .table td, .markdown td {
    position: relative;
    padding: 0 0.25rem;
    color: #fff;
}


/* Fonts */
@font-face {
    font-family: 'Minecraft';
    src: url('/fonts/Minecraft-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
} @font-face {
    font-family: 'Minecraft';
    src: url('/fonts/Minecraft-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
} @font-face {
    font-family: 'Minecraft';
    src: url('/fonts/Minecraft-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
} @font-face {
    font-family: 'Minecraft';
    src: url('/fonts/Minecraft-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} @font-face {
    font-family: 'Monocraft';
    src: url('/fonts/Monocraft.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
} @font-face {
    font-family: 'Minecrafter';
    src: url('/fonts/Minecrafter.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} @font-face {
    font-family: 'Minecrafter Alt';
    src: url('/fonts/MinecrafterAlt.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} @font-face {
    font-family: 'Minecraft Evenings';
    src: url('/fonts/MinecraftEvenings.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}