@import url("https://fonts.googleapis.com/css2?family=Marck+Script&display=swap");

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    transition: 0.4s;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--gold) black;
    font-family: arial;
}

:root {
    --gold: #715a19;
    --gold-transparent: #715a19bf;
    --blue: #4e6273;
    --green: #6a7420;
    --red: #9b4226;
    --brown: #331d0b;
    --brown-transparent: #331d0b80;
}

p {
    margin: 12px 0;
}

a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    font-size: 18px;
}

h1,
h2 {
    font-family: "Marck Script", cursive;
}

h1 {
    font-size: 36px;
}

h2 {
    margin-bottom: -8px;
}

ul {
    list-style-type: "\2726";
}

li {
    padding-left: 8px;
}

hr {
    position: relative;
    outline: 0;
    border: 0;
    color: white;
    height: 2px;
    margin: 16px;
    &:before {
        content: "";
        background: linear-gradient(to right, transparent, white, transparent);
        position: absolute;
        top: 50%;
        width: 100%;
        height: 1px;
    }
}

aside hr {
    line-height: 1;
    position: relative;
    outline: 0;
    border: 0;
    color: white;
    text-align: center;
    height: 1.5em;
    font-size: 20px;
    margin: -12px;
    &:before {
        content: "";
        background: linear-gradient(to right, transparent, white, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }
    &:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: white;

        padding: 0 0.5em;
        line-height: 1.5em;
        background-color: var(--gold);
    }
}

body {
    height: 130%;
    background: var(--brown);
    background-image: url("/shrines/dolls/assets/img/bg-tile.png");
    background-size: 200px;
    background-attachment: fixed;
    color: white;
}

.container {
    width: 640px;
}

.lace {
    border: 28px solid transparent;
    border-image: url("/shrines/dolls/assets/img/gold-lace.png") 32 round;
    border-image-outset: 24px;
}

.title-ribbon {
    margin: auto;
    position: relative;
    left: 280px;
    top: 24px;
    text-align: center;
}
.title-ribbon {
    --s: 1.8em; /* the ribbon size */
    --d: 0.8em; /* the depth */
    --c: 0.8em; /* the cutout part */

    padding: var(--d) calc(var(--s) + 0.5em);
    line-height: 1.8;
    background:
        conic-gradient(at left var(--s) bottom var(--d), #0000 25%, #0008 0 37.5%, #0004 0) 0 /50% 100% no-repeat,
        conic-gradient(from -45deg at right var(--s) top var(--d), #0004 62.5%, #0000 0 87.5%, #0008 0) 100%/50% 100%
            no-repeat;
    clip-path: polygon(
        0 calc(2 * var(--d)),
        var(--s) calc(2 * var(--d)),
        var(--s) var(--d),
        calc(100% - var(--s) - var(--d)) var(--d),
        calc(100% - var(--s) - var(--d)) 0,
        100% 0,
        calc(100% - var(--c)) calc(50% - var(--d)),
        100% calc(100% - 2 * var(--d)),
        calc(100% - var(--s)) calc(100% - 2 * var(--d)),
        calc(100% - var(--s)) calc(100% - var(--d)),
        calc(var(--s) + var(--d)) calc(100% - var(--d)),
        calc(var(--s) + var(--d)) 100%,
        0 100%,
        var(--c) calc(50% + var(--d))
    );
    background-color: var(--red); /* the main color */
    width: 600px;
    height: 88px;
}

aside {
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(180deg, var(--gold) 60%, transparent 100%);
    border-right: 28px solid transparent;
    border-image: url("/shrines/dolls/assets/img/gold-lace.png") 32 round;
    border-image-outset: 24px;
    margin: 0;
    padding-top: 4px;
    padding-left: 24px;
    text-align: center;
}

.home-links {
    font-size: 12px;
    line-height: 4;
}

.doll-card {
    width: 640px;
    background: var(--gold-transparent);
    margin: 48px 280px;
    margin-top: 64px;
    display: grid;
    grid-template-columns: 340px 300px;
    grid-template-rows: 216px auto 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "icon stats"
        "blurb blurb"
        "about awards"
        "about awards";
}

.icon-contain {
    grid-area: icon;
}

.icon {
    width: 200px;
    height: 200px;
    background: var(--gold);
    background-size: 200px;
    border: 4px solid var(--brown);
}

#othello .icon {
    background-image: url(/shrines/dolls/assets/img/othello-icon.png);
}

#petra .icon {
    background-image: url(/shrines/dolls/assets/img/petra-icon.png);
}

#topaz .icon {
    background-image: url(/shrines/dolls/assets/img/topaz-icon.png);
}

#melon .icon {
    background-image: url(/shrines/dolls/assets/img/melon-icon.png);
}

#arid .icon {
    background-image: url(/shrines/dolls/assets/img/arid-icon.png);
}

.ribbon {
    font-size: 28px;
    font-weight: bold;
    color: white;
    font-family: "Marck Script", cursive;
    width: 200px;
}
.ribbon {
    --f: 0.5em; /* control the folded part*/
    --r: 0.8em; /* control the ribbon shape */

    position: relative;
    top: 8px;
    left: -18px;
    padding-inline: 16px;
    line-height: 1.25;
    background: var(--blue);
    border-bottom: var(--f) solid #0005;
    border-right: var(--r) solid #0000;
    clip-path: polygon(
        0 0,
        0 calc(100% - var(--f)),
        var(--f) 100%,
        var(--f) calc(100% - var(--f)),
        100% calc(100% - var(--f)),
        calc(100% - var(--r)) calc(50% - var(--f) / 2),
        100% 0
    );
}

.ribbon .pronouns {
    font-size: 16px;
    opacity: 0.5;
}

.stats {
    grid-area: stats;
}

.stat-contain {
    width: auto;
    margin-left: -120px;
    margin-right: -64px;
}

.progress-back {
    width: 75%;
    height: 32px;
    background: var(--brown);
    border-radius: 8px;
    padding: 8px 8px;
    margin-bottom: 4px;
}

.progress-front {
    color: white;
    height: 16px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    &.blue {
        background: var(--blue);
    }
    &.green {
        background: var(--green);
    }
    &.red {
        background: var(--red);
    }
}

.progress-front::before {
    content: "\2726";
    padding-left: 4px;
    margin-right: 4px;
}

.blurb {
    background: var(--brown-transparent);
    margin: 12px;
    padding: 0 12px;
    padding-bottom: 0;
    width: 560px;
    grid-area: blurb;
}

.about {
    position: relative;
    margin-bottom: -12px;
    grid-area: about;
}

.awards {
    grid-area: awards;
}

.award {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    font-family: "Marck Script", cursive;
    filter: drop-shadow(0 0 2px #000000);
    &.award-up {
        top: 32px;
    }
}

.award {
    --c: var(--red);
    padding: auto;
    aspect-ratio: 1;
    place-content: center;
    text-align: center;
    position: relative;
    right: px;
    top: 64px;
    z-index: 0;
    width: 80px;
    box-sizing: border-box;
    display: inline-block;
}
.award:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 50% 0 auto;
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--c), #000 35%);
    clip-path: polygon(
        calc(100% / 3) 0,
        calc(200% / 3) 0,
        100% 90%,
        80% 85%,
        calc(200% / 3) 100%,
        calc(100% / 3) 0,
        calc(200% / 3) 0,
        calc(100% / 3) 100%,
        20% 85%,
        0 90%
    );
}
.award:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(35% 35%, #0000 96%, #0003 97% 99%, #0000) var(--c);
    clip-path: polygon(
        100% 50%,
        89.23% 57.8%,
        96.19% 69.13%,
        83.26% 72.22%,
        85.36% 85.36%,
        72.22% 83.26%,
        69.13% 96.19%,
        57.8% 89.23%,
        50% 100%,
        42.2% 89.23%,
        30.87% 96.19%,
        27.78% 83.26%,
        14.64% 85.36%,
        16.74% 72.22%,
        3.81% 69.13%,
        10.77% 57.8%,
        0% 50%,
        10.77% 42.2%,
        3.81% 30.87%,
        16.74% 27.78%,
        14.64% 14.64%,
        27.78% 16.74%,
        30.87% 3.81%,
        42.2% 10.77%,
        50% 0%,
        57.8% 10.77%,
        69.13% 3.81%,
        72.22% 16.74%,
        85.36% 14.64%,
        83.26% 27.78%,
        96.19% 30.87%,
        89.23% 42.2%
    );
}

#gallery {
    width: 640px;
    background: var(--gold-transparent);
    margin: 48px 280px;
    margin-top: 64px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#gallery img {
    width: 240px;
    margin: 8px;
}

#credit {
    width: 640px;
    background: var(--gold-transparent);
    margin: 48px 280px;
    margin-top: 64px;
}