#gallery, #gallery * {
    box-sizing: border-box;
}
#gallery {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-bottom: 0;
    width: 100%;
}
#gallery > small {
    font-family: serif;
    padding: 0.5em;
    margin-top: -1em;
    z-index: 100;
    text-align: right;
    width: 100%;
}
#gallery > small span.bubble-style {
    transform: scale(.5);
    margin: -.8em;
}
#gallery > small span.bubble-style::before {
    top: 88%;
}
#gallery > small b {
    color: var(--biloulight);
}
.folded #gallery > small {
    visibility: hidden;
}
#gallery section {
    flex-grow: 1;
    max-width: 100%;
}
.bubble-style {
    width: 3em;
    height: 3em;
    line-height: 3em;
    font-size: 1.25em;
    color: var(--biloubgc);
    font-family: VinazFont;
    letter-spacing: normal;
    text-align: center;
    text-shadow: none;
    box-sizing: border-box;
    background: var(--bilouhighlight);
    border: solid 2px var(--biloubgc);
    border-radius: 50%;
    display: inline-block;
    box-shadow: var(--biloubgc50) 0 0 .5em;
    user-select: none;
}
.bubble-style::before {
    content: '';
    position: relative;
    width: 36px;
    height: 28px;
    margin-right: -36px;
    margin-bottom: -28px;
    display: block;
    left: 50%;
    top: 91%;
    box-sizing: border-box;
    transform: rotate(65deg) scale(-.8,.8);
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='28' version='1.1' viewBox='0 0 36 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m36.42 22.65s-11.61-3.686-14.64-9.744c7.17 0.6679 14.64-1.355 14.64-1.355' fill='%23f0e9f2' stroke='%231f1e24' stroke-width='2'/%3E%3C/svg%3E%0A");
}
#gallery section h2 {
    cursor: pointer;
    position: sticky;
    margin: -1.5em;
    margin-bottom: 1.5em;
    float: left;
    top: -0.75em;
    z-index: 100;
    transform: translate(1em,1em) rotate(-15deg);
    transition-property: transform;
    transition-timing-function: var(--biloustic);
    transition-duration: 0.3s;
}
html:not(.can-touch) #gallery section h2:hover, html:not(.can-touch) .folded #gallery section:hover h2 {
    transform: translate(1em,1em) scale(1.05) rotate(-15deg);
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    background-color: var(--biloudark);
    background-image: url('data:image/svg+xml,<svg width="20px" height="20px" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="rgba(22, 21, 28, .33)"><rect width="10" height="10"/><rect x="10" y="10" width="10" height="10"/></svg>');
    background-attachment: fixed;
    background-size: 1.5em;
}
.gallery > a {
    box-shadow: 0px 0px 1px var(--biloubgc80);
    filter: brightness(.95);
    aspect-ratio: var(--r);
    width: calc(min(220px, 33vw)*var(--r));
    max-height: 360px;
    flex-grow: calc(1 + var(--r)*100);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .6s var(--biloueazout), filter .6s var(--biloueazout);
    cursor: zoom-in;
}
.gallery > a > * {
    display: none;
}
.gallery > .tags {
    display: none;
}
html:not(.can-touch) .gallery > a:hover {
    filter: brightness(1);
    /* cursor: pointer; */
    z-index: 10;
    transform: scale(1.02);
    box-shadow: 0px 0px 8px var(--biloubgc50);
    transition: transform .3s var(--biloustic), filter .3s var(--biloueazout);
}
.folded #gallery .gallery {
    overflow: hidden;
    height: 100%;
}
.folded #gallery section {
    height: 6em;
    margin: 0;
    position: relative;
    transition-property: margin, height;
    transition-timing-function: var(--biloueazout);
    transition-duration: .3s;
}
.folded #gallery section h2 {
    position: absolute;
    top: 0;
}
html:not(.can-touch) .folded #gallery section {
    z-index: 100;
}
html:not(.can-touch) .folded #gallery section:hover {
    margin-top: -1em;
    height: 7em;
    cursor: pointer;
}
html:not(.can-touch) .folded #gallery section:hover a {
    filter: brightness(1.1);
}
.folded #gallery .gallery > a:nth-child(n+8) {
    display: none;
}
.folded #gallery .gallery::before {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top, var(--biloubgct) 50%, var(--biloubgc80) 100%);
    z-index: 2;
    margin-bottom: -100%;
}
#tag_list {
    display: none;
}
#current_tag {
    display: none;
    order: -1;
}
#current_tag a {
    font-family: VinazFont;
}
#gallery.pixelated .gallery > a {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width: calc(min(160px, 20vw)*var(--r));
    max-height: 220px;
}
#screenshots #gallery.pixelated .gallery {
    background: black;
}
/* #screenshots #gallery.pixelated .gallery > a {
    width: 320px;
    max-height: 240px;
} */
@media (max-width: 1024px) {
    #gallery > small {
        margin: 0;
        text-align: left;
    }
    #gallery section h2.bubble-style {
        font-size: 1em;
        float: right;
        transform: translate(-2em,1em) rotate(15deg);
    }
    .folded #gallery section h2 {
        right: 0;
    }
    #gallery section h2.bubble-style::before {
        transform: rotate(-70deg) scale(.7,.7);
        left: -0.5em;
        top: 2.5em;
    }
    html:not(.can-touch) #gallery section h2:hover, html:not(.can-touch) .folded #gallery section:hover h2 { 
        transform: translate(-2em,1em) scale(1.05) rotate(15deg);
    }
}
@media (max-width: 840px) {
    #gallery {
        padding: 0;
    }
    .folded #gallery .gallery > a:nth-child(n+5) {
        display: none;
    }
}