@font-face {
    font-family: "Mojangles";
    src: url("../assets/fonts/Minecraft-Seven_v2.woff2");
}

@font-face {
    font-family: "NotoSans";
    src: url("../assets/fonts/noto-sans/NotoSans.ttf");
}

:root {
    font-size: 20px;

    --color-white: #FFFFFF;
    --color-gray: #A8BFD2;
    --color-dark-gray: #707592;
    --color-black: #000000;
    --color-dark-blue: #353FCE;
    --color-blue: #459BFF;
    --color-dark-green: #00AA00;
    --color-green: #55FF55;
    --color-dark-aqua: #00AAAA;
    --color-aqua: #55FFFF;
    --color-dark-red: #D13228;
    --color-red: #FF5555;
    --color-dark-purple: #A335EE;
    --color-light-purple: #FF55FF;
    --color-yellow: #FFDE2F;
    --color-gold: #FF9000;

    --color-divider: #6f6e70;
}

:root, html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: url('../assets/images/background.webp');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    font-family: "Mojangles";
    font-smooth: never;
    -webkit-font-smoothing: none;
    line-height: 1.25;
    color: white;
}

body * {
    text-shadow: 0.1em 0.1em 0em hsl(from currentColor h s calc(l * 0.25));
}

footer {
    margin-top: 2.5em;
}

footer hr {
    margin-top: 0;
    margin-bottom: 2em;
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.7);
}

main {
    position: relative;
    padding: 3em 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin: 0.5em 0;
}

:is(h1, h2, h3, h4, h5, h6):target {
    color: var(--color-green);
}

h1 {
    font-size: 3em;
    text-align: center;
    image-rendering: pixelated;
    margin-bottom: 0.75em;
}

h2 {
    font-size: 2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.085em;
    border-bottom: 0.15rem solid var(--color-divider);
}

h3 {
    font-size: 1.5em;
    margin-top: 1em;
}

h4 {
    font-size: 1.1em;
    margin-top: 1em;
}

h5, h6 {
    font-size: 1em;
    margin-top: 1em;
}

p {
    margin: 0.5em 0;
}

a {
    color: inherit;
    text-decoration: underline 0.1em solid currentColor;
}

em {
    color: var(--color-gray);
}

ol, ul {
    margin: 0.5em 0;
    padding: 0;
    padding-left: 1.75em;
}

:is(ol, ul) :is(ol, ul) {
    margin: 0;
}

ul > li::marker {
    content: "- ";
}

ol > li {
    list-style: decimal;
}

table {
    border-spacing: 0;
}

table :is(th, td) {
    padding-right: 1em;
    padding-bottom: 0.1em;
}

table :is(th, td):last-of-type {
    padding-right: 0;
}

table tr:last-of-type :is(th, td) {
    padding-bottom: 0;
}

thead {
    display: none;
}

thead:has(th:not(:empty)) {
    display: initial;
}

th:empty {
    display: none;
}

.flex, .flex > .flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4em 1em;
}

.flex > * {
    display: inline-block;
    width: fit-content;
}

hr {
    border: none;
    border-bottom: 0.15rem solid var(--color-divider);
    margin: 1em 0;
}

details {
    padding-left: 1em;
    margin: 1em 0;
}

summary {
    display: flex;
    margin-left: -1em;
    user-select: none;
    cursor: pointer;
    padding: 0.2em 0;
    list-style-type: none;
    line-height: 1;
}
summary::marker {
    display: none;
}

summary::before {
    display: inline-block;
    content: '>';
    margin-right: 0.5em;
    transform-origin: 50% 50%;
    align-self: center;
}
:open > summary::before {
    rotate: 90deg;
    text-shadow: 0.1em -0.1em 0em hsl(from currentColor h s calc(l * 0.25));
}

summary div {
    display: inline-block;
}

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: black;
    padding: 0.3em 0.3em;
    outline: none;
    border: 0.11em solid #a0a0a0;
    box-sizing: border-box;
}

input::placeholder {
    color: var(--color-gray);
}

input.invalid {
    color: var(--color-red);
}

#update-notice {
    color: var(--color-yellow);
    text-align: center;
    padding: 0.5em;
    z-index: 999;
}

.tabs-container {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 0em;
    min-height: 3.5rem;
    margin: 1.5em 0;
    overflow-x: auto;
}

.tabs-container > * {
    box-sizing: border-box;
    flex-shrink: 0;
}

.tab-space {
    border-bottom: 0.15rem solid var(--color-divider);
    width: 0.4rem;
}

.tab-space:first-child, .tab-space:last-child {
    flex-grow: 1;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.15rem solid var(--color-divider);
    height: 2.9rem;
    width: 10em;
    user-select: none;
    cursor: pointer;
    font-size: 1.5em;
}

.tab-header.tab-selected {
    height: 3.5rem;
    border-color: white;
    border-bottom: none;
}

.tab > :first-child,
.tab > :first-child > :first-child,
.tab > :first-child > :first-child > :first-child {
    margin-top: 0;
}

.tab > :last-child,
.tab > :last-child > :last-child,
.tab > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}

#container {
    position: relative;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px;
    padding-top: 45px !important;
    font-family: inherit;
    font-size: inherit;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.1vw);
    overflow: hidden;
}

#container > :first-child,
#container > :first-child > :first-child,
#container > :first-child > :first-child > :first-child {
    margin-top: 0;
}

#container > :last-child,
#container > :last-child > :last-child,
#container > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}

#toggles-container {
    display: flex;
    gap: 0.5em;
    cursor: default;
    user-select: none;
    position: absolute;
    top: 0.7em;
    right: 1.2em;
}

#toggles-container span {
    cursor: pointer;
}

#toggles-container img {
    color: var(--color-gray);
    font-size: 32px;
    height: 1em;
    filter: drop-shadow(0.12em 0.12em 0em hsl(from currentColor h s calc(l * 0.25)));
    transition: filter 0.05s ease, scale 0.1s ease;
}
#toggles-container img:hover {
    scale: 1.2;
}
#toggles-container img:active {
    filter: drop-shadow(0.12em 0.12em 0em hsl(from currentColor h s calc(l * 0.25)))
        brightness(0.75);
}

.disable-stats-progression .stats-progression {
    display: none;
}

.alternative-font {
    font-family: 'NotoSans';
    font-smooth: initial;
    -webkit-font-smoothing: initial;
}

#content > :first-child,
#content > :first-child > :first-child,
#content > :first-child > :first-child > :first-child {
    margin-top: 0;
}

#content > :last-child,
#content > :last-child > :last-child,
#content > :last-child > :last-child > :last-child {
    margin-bottom: 0;
}

*[class^="icon"] {
    display: inline-block;
    vertical-align: -0.15em;
    height: 1em;
    filter: drop-shadow(0.06em 0 0 currentColor)
        drop-shadow(-0.06em 0 0 currentColor)
        drop-shadow(0 0.06em 0 currentColor)
        drop-shadow(0 -0.06em 0 currentColor)
        drop-shadow(0.06em 0.06em 0em hsl(from currentColor h s calc(l * 0.25)));
}
.icon-pixelart {
    image-rendering: pixelated;
}

.hicon-container {
    --hypixel-icon-scale: 0.7;
    display: inline-block;
    filter: drop-shadow(0.1em 0.1em 0em hsl(from currentColor h s calc(l * 0.25)));
}

.hicon-container > span {
    display: inline-block;
    width: calc(1em * var(--hypixel-icon-scale));
    height: calc(1em * var(--hypixel-icon-scale));
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    image-rendering: pixelated;
}

.hicon-skill {
    -webkit-mask-image: url("../assets/images/hypixel/skills.png");
    mask-image: url("../assets/images/hypixel/skills.png");
    mask-size: calc(4em * var(--hypixel-icon-scale));
}

.hicon-stat {
    -webkit-mask-image: url("../assets/images/hypixel/stats.png");
    mask-image: url("../assets/images/hypixel/stats.png");
    mask-size: calc(8em * var(--hypixel-icon-scale));
}

.hicon-mob {
    -webkit-mask-image: url("../assets/images/hypixel/mobs.png");
    mask-image: url("../assets/images/hypixel/mobs.png");
    mask-size: calc(6em * var(--hypixel-icon-scale));
}

.hicon-magic-find {
    -webkit-mask-position: calc(-2em * var(--hypixel-icon-scale)) calc(-3em * var(--hypixel-icon-scale));
    mask-position: calc(-2em * var(--hypixel-icon-scale)) calc(-3em * var(--hypixel-icon-scale));
}

.hicon-pet-luck {
    -webkit-mask-position: calc(-3em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
    mask-position: calc(-3em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
}

.hicon-mining-spread {
    -webkit-mask-position: calc(-6em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
    mask-position: calc(-6em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
}

.hicon-gemstone-spread {
    -webkit-mask-position: calc(-7em * var(--hypixel-icon-scale)) calc(-1em * var(--hypixel-icon-scale));
    mask-position: calc(-7em * var(--hypixel-icon-scale)) calc(-1em * var(--hypixel-icon-scale));
}

.hicon-heat-resistance {
    -webkit-mask-position: calc(-2em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
    mask-position: calc(-2em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
}

.hicon-mining-fortune {
    -webkit-mask-position: calc(-3em * var(--hypixel-icon-scale)) 0;
    mask-position: calc(-3em * var(--hypixel-icon-scale)) 0;
}

.hicon-subterranean {
    -webkit-mask-position: calc(-1em * var(--hypixel-icon-scale)) calc(-3em * var(--hypixel-icon-scale));
    mask-position: calc(-1em * var(--hypixel-icon-scale)) calc(-3em * var(--hypixel-icon-scale));
}

.hicon-elusive {
    -webkit-mask-position: calc(-1em * var(--hypixel-icon-scale)) calc(-1em * var(--hypixel-icon-scale));
    mask-position: calc(-1em * var(--hypixel-icon-scale)) calc(-1em * var(--hypixel-icon-scale));
}

.hicon-shielded {
    -webkit-mask-position: calc(-4em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
    mask-position: calc(-4em * var(--hypixel-icon-scale)) calc(-2em * var(--hypixel-icon-scale));
}

.invisible {
    font-size: 0;
    color: rgba(255,255,255,0);
}

.no-shadow {
    text-shadow: none;
    box-shadow: none;
    filter: none;
}

#changelogs details {
    padding-left: 1.5em;
}

#changelogs summary {
    font-size: 1.5em;
}

.changelog-subtitle {
    font-size: 0.75em;
    color: var(--color-gray);
}

#pet-drop-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(max(100%, 100vh * 1980/1020));
    height: auto;
    pointer-events: none;
}

@media (max-width: 767px) {
    :root {
        font-size: 18px;
    }

    #container {
        padding: 15px;
    }
    
    .tab-header {
        width: auto;
        padding: 0 0.75em;
    }
}

.color-black {
    color: var(--color-black);
}

.color-gray {
    color: var(--color-gray);
}

.color-dark-gray {
    color: var(--color-dark-gray);
}

.color-white {
    color: var(--color-white);
}

.color-dark-blue {
    color: var(--color-dark-blue);
}

.color-blue {
    color: var(--color-blue);
}

.color-dark-green {
    color: var(--color-dark-green);
}

.color-green {
    color: var(--color-green);
}

.color-dark-aqua {
    color: var(--color-dark-aqua);
}

.color-aqua {
    color: var(--color-aqua);
}

.color-dark-red {
    color: var(--color-dark-red);
}

.color-red {
    color: var(--color-red);
}

.color-dark-purple {
    color: var(--color-dark-purple);
}

.color-light-purple {
    color: var(--color-light-purple);
}

.color-yellow {
    color: var(--color-yellow);
}

.color-gold {
    color: var(--color-gold);
}