@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap");

:root {
    --gum-red: #ee2255;
    --gum-orange: #dd7733;
    --gum-cyan: #1dc4cc;
    --gum-yellow: #cccc55;
    --gum-green: #22ee55;
    --gum-blue: #2255ee;
    --burned-blue: #6666ee;
    --night-blue: #222233;
    --night-blue-alt: #181822;
    --dull-blue: #272740;
    --dull-white: #e0e0f0;
    --dullest-white: #c0c0d0;
    --ice-white: #eeeeff;
}

:root {
    --mc-logo: url(/assets/mclogo.svg);
    --forge-logo: url(/assets/forge.svg);
    --fabric-logo: url(/assets/fabric.svg);
    --download-icon: url(/assets/download.svg);
}

body {
    --back: var(--night-blue);
    --input: var(--night-blue-alt);
    --text: var(--ice-white);
    --accent: var(--burned-blue);
    --link: var(--burned-blue);
    --hover: var(--dull-blue);
}

@media (prefers-color-scheme: light) {
    body {
        --back: var(--ice-white);
        --input: var(--dull-white);
        --text: var(--night-blue);
        --accent: var(--gum-blue);
        --link: var(--gum-blue);
        --hover: var(--dullest-white);
    }
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    height: max-content;
    width: 100%;

    padding: 2em 2.5em;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--back);
    color: var(--text);

    font-family: Manrope;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1 {
    font-weight: 600;
}

main {
    border-top: 1px solid #0005;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 50em;
    text-align: center;
}

a {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

p a {
    color: var(--accent);
}

li a {
    color: var(--accent);
}

.pack-list {
    padding-left: 0;
    min-width: min(30em, 90vw);
    max-width: 90vw;
    display: flex;
    flex-direction: column-reverse;
}

.mclogo {
    -webkit-mask-image: var(--mc-logo);
    mask-image: var(--mc-logo);

    -webkit-mask-size: contain;
    mask-size: contain;

    mask-position: center;
    background-color: var(--text);
    width: 5em;
    height: 5em;
}

.pack-entry {
    font-size: 2em;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pack-entry a {
    flex-grow: 1;
    margin-right: 1rem;
    font-weight: 600;
}

.pack-entry:hover a {
    color: var(--accent);
}

.tag {
    border-radius: 0.5em;
    background-color: var(--input);
    padding: 0.1em 0.5em;
    height: 1.7em;
    box-sizing: border-box;
    font-size: 0.5em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0.5em 0.25em;
    --tag-color: var(--text);
    color: var(--tag-color);
    font-weight: 600;
}

.tag::before {
    margin-right: 0.5em;
}

.loader-tag,
.tag[data-loader="forge"] {
    --loader-logo: var(--forge-logo);
    --loader-name: "Forge";
    --tag-color: var(--gum-orange);
}

.loader-tag[data-loader="fabric"],
.tag[data-loader="fabric"] {
    --loader-logo: var(--fabric-logo);
    --loader-name: "Fabric";
    --tag-color: var(--gum-cyan);
}

.loader-tag::before {
    height: 1em;
    width: 1em;

    -webkit-mask-image: var(--loader-logo);
    mask-image: var(--loader-logo);

    -webkit-mask-size: contain;
    mask-size: contain;

    background-color: var(--tag-color);
    content: "";
    display: block;
}

.loader-tag::after {
    content: var(--loader-name);
    color: var(--tag-color);
}

.version-tag::after {
    content: attr(data-version);
}
.version-tag[data-version^="1.19"] {
    --tag-color: var(--gum-green);
}
.version-tag[data-version^="1.18"] {
    --tag-color: var(--gum-red);
}
.version-tag[data-version^="1.16"] {
    --tag-color: var(--gum-yellow);
}
.version-tag[data-version^="1.12"] {
    --tag-color: var(--gum-blue);
}

.pack-entry::marker {
    display: none; /* flex workaround */
}

.pack-entry::before {
    content: ">";
    color: #0005;
    margin-right: 0.5rem;
}

.pack-entry:hover::before {
    color: var(--accent);
}

.pack-entry {
    margin: 0.5em 0;
}

@media (max-width: 30em) {
    .pack-entry a {
        width: min(30em, 90vw);
        margin: 0;
        text-align: center;
    }
    .tag {
        margin: 0.5em 0.25em;
    }
    .pack-entry {
        justify-content: center;
    }
    .pack-entry::before {
        display: none;
    }
}