.card {
    --size: 500px;
    --global-font: PapyrusLoad, Papyrus;
    --font-very-large: calc(var(--size) * .08);
    --font-large: calc(var(--size) * .06);
    --font-medium: calc(var(--size) * .05);
    width: calc(var(--size) * .96);
    height: calc(calc(var(--size) * 1.5) * .96);
    border: calc(var(--size) * .02) solid #954B30;
    background-color: #f7d47a;
    background-image: url("../resources/ui/card-texture.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    .card > .header {
        position: relative;
        top: calc(var(--size) * .01);
        left: 0;
        margin: auto;
        height: calc(var(--size) * .18);
        width: calc(var(--size) * .92);
        z-index: 1;
    }

        .card > .header > * {
            position: absolute;
            top: 0;
            left: 0;
        }

        .card > .header > img {
            width: 100%;
            height: 100%;
        }

        .card > .header > div {
            font-family: var(--global-font);
            font-size: var(--font-large);
            font-weight: bold;
            top: calc(var(--size) * .022);
            width: 97%;
            text-align: center;
        }

    .card > .art {
        position: relative;
        top: calc(var(--size) * -.06);
        left: 0;
        margin: auto;
        height: calc(var(--size) * .6);
        width: calc(var(--size) * .84);
        border: solid calc(var(--size) * .008) #954B30;
    }

    .card > .art > * {
        position: absolute;
        top: 0;
        left: 0;
    }

        .card > .art > img {
            width: 100%;
            height: 100%;
        }

    .card > .description {
        position: relative;
        top: calc(var(--size) * -.04);
        left: 0;
        margin: auto;
        height: calc(var(--size) * .5);
        width: calc(var(--size) * .84);
        background-image: url("../resources/ui/card-description.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: calc(var(--size) * .01);
        padding: calc(var(--size) * .03);
        display: flex;
        border: solid calc(var(--size) * .008) #954B30;
    }

        .card > .description > div {
            font-family: var(--global-font);
            font-size: calc(var(--font-medium) * 1.1);
            font-weight: bold;
            text-align: center;
            margin: auto;
        }

    .card > .footer {
        position: relative;
        top: calc(var(--size) * -.07);
        left: 0;
        margin: auto;
        display: grid;
        grid-template-columns: calc(var(--size) * .16) 1fr calc(var(--size) * .16);
        height: calc(var(--size) * .16);
        width: calc(var(--size) * .96);
    }

        .card > .footer > .attack {
            background-image: url("../resources/ui/ruby.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            position: relative;
            z-index: 1;
        }

            .card > .footer > .attack > div {
                font-family: Verdana;
                font-size: calc(var(--font-very-large) * 1.5);
                font-weight: bold;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            }

        .card > .footer > .hp {
            background-image: url("../resources/ui/emerald.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            position: relative;
        }

            .card > .footer > .hp > div {
                font-family: Verdana;
                font-size: calc(var(--font-very-large) * 1.5);
                font-weight: bold;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            }

        .card > .footer > .species {
            background-image: url("../resources/ui/parchment.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
        }

            .card > .footer > .species > div {
                font-family: var(--global-font);
                font-size: var(--font-medium);
                font-weight: bold;
                text-align: center;
                margin: auto;
                transform: translateY(calc(var(--size) * -.02));
                padding-right: calc(var(--size) * .015)
            }

    .card > .tier {
        position: relative;
        background-image: url("../resources/ui/crest.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        top: calc(var(--size) * -.87);
        left: calc(var(--size) * .84);
        height: calc(var(--size) * .13);
        width: calc(var(--size) * .13);
    }

        .card > .tier > div {
            font-family: Verdana;
            font-size: var(--font-very-large);
            font-weight: bold;
            text-align: center;
            margin: auto;
            color: #f7d47a;
            padding-bottom: calc(var(--size) * .015);
        }

    .card > .achievement {
        position: relative;
        background-image: url("../resources/ui/crest.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        top: calc(var(--size) * -.87);
        left: calc(var(--size) * .84);
        height: calc(var(--size) * .13);
        width: calc(var(--size) * .13);
    }

        .card > .achievement::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            content: '';
            background-image: url("../resources/ui/trophy.svg");
            background-repeat: no-repeat;
            background-size: 60% 60%;
            background-position: center center;
            filter: invert(94%) sepia(51%) saturate(1745%) hue-rotate(308deg) brightness(114%) contrast(94%);
        }
    
    .card > .reputation {
        position: relative;
        background-image: url("../resources/ui/reputation.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        top: calc(var(--size) * -1.12);
        left: calc(var(--size) * .855);
        height: calc(var(--size) * .1);
        width: calc(var(--size) * .1);
    }

        .card > .reputation > div {
            font-family: Verdana;
            font-size: calc(var(--font-very-large) * .8);
            font-weight: bold;
            text-align: center;
            margin: auto;
            color: #f7d47a;
            text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            padding-bottom: calc(var(--size) * .02);
        }

    .card > .reputation.star {
        background-image: url("../resources/ui/reputation-gold.png");
    }

.small-card {
    --size: 500px;
    --global-font: Papyrus;
    --font-very-large: calc(var(--size) * .08);
    --font-large: calc(var(--size) * .06);
    --font-medium: calc(var(--size) * .05);
    width: var(--size);
    height: calc(var(--size) / 1.3);
    border: calc(var(--size) * .02) solid #954B30;
    border-top-left-radius: calc(var(--size) * .15);
    border-top-right-radius: calc(var(--size) * .15);
    background-color: #f7d47a;
    background-image: url("../resources/ui/card-texture.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: .5s;
}

    .small-card > .footer {
        position: relative;
        left: calc(var(--size) * -.03);
        top: calc(calc(var(--size) * .74) / 1.25);
        margin: auto;
        display: grid;
        grid-template-columns: calc(var(--size) * .24) 1fr calc(var(--size) * .24);
        height: calc(var(--size) * .24);
        width: calc(var(--size) * 1.06);
    }

        .small-card > .footer > .attack {
            background-image: url("../resources/ui/ruby.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            position: relative;
        }

            .small-card > .footer > .attack > div {
                font-family: Verdana;
                font-size: calc(var(--font-very-large) * 2);
                font-weight: bold;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            }

        .small-card > .footer > .hp {
            background-image: url("../resources/ui/emerald.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            position: relative;
        }

            .small-card > .footer > .hp > div {
                font-family: Verdana;
                font-size: calc(var(--font-very-large) * 2);
                font-weight: bold;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: white;
                text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            }

        .small-card > .footer > .effects {
            height: 100%;
            width: fit-content;
            justify-self: center;
        }

            .small-card > .footer > .effects > img {
                width: calc(var(--size) * .12);
                height: calc(var(--size) * .12);
                background-image: url("../resources/ui/brick-texture.jpg");
                background-size: 100% 100%;
                border: solid calc(var(--size) * .01) #606060;
                border-radius: 50%;
                padding: calc(var(--size) * .01);
                margin-top: calc(var(--size) * .04);
                margin-left: calc(var(--size) * .01);
                margin-right: calc(var(--size) * .01);
            }

    .small-card > .reputation {
        position: relative;
        background-image: url("../resources/ui/reputation.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        top: calc(var(--size) * .17);
        left: calc(var(--size) * .87);
        height: calc(var(--size) * .15);
        width: calc(var(--size) * .15);
    }

        .small-card > .reputation > div {
            font-family: Verdana;
            font-size: calc(var(--font-very-large) * 1.2);
            font-weight: bold;
            text-align: center;
            margin: auto;
            color: #f7d47a;
            text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
            padding-bottom: calc(var(--size) * .035);
        }

    .small-card > .reputation.star {
        background-image: url("../resources/ui/reputation-gold.png");
    }

        .small-card > .reputation.star > div {
            color: white;
            text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
        }

    .small-card > .elements {
        position: relative;
        display: grid;
        bottom: calc(var(--size) * .05);
        left: calc(var(--size) * -.01);
        width: calc(var(--size) * .06);
        grid-auto-flow: row;
        row-gap: calc(var(--size) * .01);
        transform: rotateZ(180deg);
        border: calc(var(--size) * .01) solid #954B30;
        background-color: #954B30;
        border-top-left-radius: calc(var(--size) * .04);
        border-bottom-left-radius: calc(var(--size) * .04);
    }

        .small-card > .elements > div {
            border-radius: 50%;
            width: 100%;
            height: 100%;
            height: calc(var(--size) * .06);
        }

        .small-card > .elements > .eau {
            background: radial-gradient(circle, #4971ea, #1544d0);
        }

        .small-card > .elements > .feu {
            background: radial-gradient(circle, #e43d3d, #a60c0c);
        }

        .small-card > .elements > .air {
            background: radial-gradient(circle, #5dfaac, #0ca659);
        }

        .small-card > .elements > .terre {
            background: radial-gradient(circle, #e2db75, #baaf17);
        }