body {
    background: transparent;
    /* width:100%; */
    color: white;
    text-align: center;
    padding: 20px;
    text-shadow: 2px 2px 5px var(--shadow);
    height: fit-content;

    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-items: center;

}

h1, h2,h3 {
    font-family: "Genshin Serif";
}
h2 {
    font-size:1.8em;
}
a {
    text-decoration: underline;

}

p {
    line-height: 2;
    font-family: "Comfortaa";
}

strong {
    font-family: "Jua";
    color:var(--hot-pink);
}

details {
    &[open]>summary::after {
        transform: rotate(-180deg);

    }

    &::details-content {
        max-block-size: 0;
        opacity: 0;
        /* animation */
        transition:
            opacity 300ms,
            max-block-size 200ms linear,
            content-visibility 200ms linear;
        /* fine tune the timings */
        transition-behavior: allow-discrete;
        overflow: hidden;
    }

    &[open]::details-content {
        opacity: 1;
        max-block-size: 100em;
        /* just an example */
        /* max-block-size has to be hard-coded 
  for the animation to work (unfortunately) */
    }
}

summary {
    padding: 0.5em 0.7em;
    transition: background-color 0.3s;
    border-radius: 25px;

    &:hover {
        cursor: pointer;
    }

    &::after {
        transition: 300ms;
        border-block-start: 0.4em solid rgb(255, 255, 255);
        border-inline: 0.25em solid transparent;
    }

    &::-webkit-details-marker {
        display: none;
    }
}

summary:hover {
    background-color: var(--widget_bg);
    border-radius: 50px;
}
img:not(.favBox img):hover {
    filter:
        drop-shadow(1px 0px 0px var(--default_text)) 
        drop-shadow(-1px 0px 0px var(--default_text)) 
        drop-shadow(0px 1px 0px var(--default_text)) 
        drop-shadow(0px -1px 0px var(--default_text));
}
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.row img {
    height: 300px;
    margin: 20px;
    transition-duration: 300ms;
}

img.build {
    width: 80%;
    transition-duration: 300ms;
    cursor: zoom-in;
    border-radius: 25px;

}

img:hover {
    scale: 1.2;
}

.charCards img {
    height: auto;
    width: 100px;
}

.charCards {
    flex-wrap: wrap;

}

.charCards details {
    &[open] {
        width: 100%;
    }
}

img.artefact {
    width: 50px;
}

.charSection,
.charCards details>div {
    background-color: var(--widget_bg);
    padding: 10px;
    margin-top: 10px;
    border-radius: 25px;
}

.charSection::after {
    content: "┈┈・୨ ✦ ୧・┈┈";
    font-size: 10px;
}

.favBox {
    width: 400px;
    background:var(--widget_bg);
    padding:10px;
    border-radius:25px;
    border:2px solid var(--widget_bg);
    margin:20px;

    transition-duration: 500ms;
}
.favBox img {
    width:100px;
    transition-duration: 500ms;
}
.favBox:hover {
    scale:1.1;
}
* {

    scrollbar-width: 10px;
    scrollbar-color: var(--big_text) transparent;

}