@font-face { font-family: "minecraft-unicode"; src: url("/assets/fonts/MinecraftUnicode.woff2"); }
.mc-font-gray { color: #7E7A74; }

.mc-font-black { font-family: "minecraft-unicode", monospace; font-size: 13px; letter-spacing: 0.5px; line-height: 18px; word-spacing: -1px; color: #000000; }

.grid-content-3, .grid-content-4 { display: grid; position: absolute; top: 44px; text-align: center; }
.grid-content-3 .grid-icon, .grid-content-4 .grid-icon { width: 94px; height: 94px; }
.grid-content-3 .grid-icon p, .grid-content-4 .grid-icon p { padding-top: 56px; height: 38px; overflow: hidden; }

.grid-content-3 { grid-template-columns: repeat(3, 1fr); width: 282px; left: 41px; }

.grid-content-4 { grid-template-columns: repeat(4, 1fr); width: 376px; left: -4px; }

.grid-icon-list { left: 30px; display: grid; position: absolute; }

.grid-icon-list-3 { grid-template-columns: repeat(3, 1fr); width: 270px; }
.grid-icon-list-3 .grid-icon { width: 90px; height: 90px; }

.grid-icon-list-4 { grid-template-columns: repeat(4, 1fr); width: 300px; }
.grid-icon-list-4 .grid-icon { width: 75px; height: 75px; }

.grid-icon-list-5 { grid-template-columns: repeat(5, 1fr); width: 300px; }
.grid-icon-list-5 .grid-icon { width: 60px; height: 60px; }

.grid-icon-list-6 { grid-template-columns: repeat(6, 1fr); width: 300px; }
.grid-icon-list-6 .grid-icon { width: 50px; height: 50px; }

.grid-icon-list-7 { grid-template-columns: repeat(7, 1fr); width: 280px; }
.grid-icon-list-7 .grid-icon { width: 40px; height: 40px; }

.book-page-html a, .book-page-html a:visited, .book-page-html a:active { color: inherit; }
.book-page-html a:hover { color: #A80000; }

.prop-list, .link-list { margin: 0; padding-inline-start: 16px; }

.link-list { list-style-type: "- "; }
.link-list li::marker { color: #A80000; }
.link-list li:hover { list-style-type: "> "; }

.content-list-links > div { width: 100%; }

.row, .row-material-stats, .content-list-links { display: flex; flex-direction: row; }

.column, .page-material { display: flex; flex-direction: column; gap: 12px; }

.row-material-stats { width: 332px; /* really 324px is more correct, but I can't get things to line up */ }
.row-material-stats > .column { row-gap: 22px; }
.row-material-stats > div { width: 100%; }

.grid-armor-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 332px; row-gap: 12px; }

.underline, .book-page-html a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0; }

.large { font-size: 16px; line-height: 26px; }

.book-page-html { visibility: hidden; position: relative; image-rendering: pixelated; width: 824px; height: 400px; transform-origin: top left; }
.book-page-html > div { position: absolute; top: 8px; width: 364px; height: 352px; display: flex; flex-direction: column; gap: 12px; margin: 16px; }
.book-page-html p { scroll-margin-top: 240px; margin: 0; }

.left { left: 16px; }
.left .page-material > :not(.underline) { padding-left: 44px; }
.left .trait { padding-right: 20px; }

.right { left: 412px; }
.right .trait { padding-right: 44px; }

.back-arrow { position: absolute; top: 2px; left: -18px; }
.back-arrow > img { width: 28px; height: 32px; }

.left-arrow, .right-arrow-1, .right-arrow { position: absolute; top: 350px; }
.left-arrow > img, .right-arrow-1 > img, .right-arrow > img { width: 36px; height: 20px; }

.left-arrow { left: 44px; }

.right-arrow-1 { left: 536px; }

.right-arrow { left: 742px; }

.spacing { padding-top: 166px; }

.spacing-lg { padding-top: 238px; }