@font-face {
    font-family: "Ticketing";
    src: url("../fonts/ticketing.regular.ttf");
}
@font-face {
    font-family: "Jersey";
    src: url("../fonts/jersey.15.ttf");
}
@font-face {
    font-family: "Pixel";
    src: url("../fonts/pixel-forge.regular.otf");
}
/* BASIC */
* {
    margin: 0;
    padding: 0;
}
iframe {
    box-sizing: border-box;
    border: none;
}
body {
    margin: 12px;
    image-rendering: pixelated;
}
.iframe {
    margin: 0;
    height: 100%;
}
html {
    scrollbar-color: #61384d #d7c4c1;
}

::selection {
    color: #d7c4c1;
    background-color: #61384d;
}
.h1-deco {
    flex: 1;
    height: 10px;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled321_20260601190125.png");
}
.a {
    height: 21px;
    h1, p, a {
        margin: 0;
    }
    padding: 6px;
    color: #d7c4c1;
    a {
        color: #d7c4c1;
    }
    background-color: #61384d;
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/a.png") 6 round;
    display: flex;
    flex-direction: row;  
    align-items: center;
    gap: 12px;
    ::selection {
    background-color: #d7c4c1;
    color: #61384d;
}
}

.b {
    gap: 8px;
    padding: 8px;
border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/b.png") 6 round;
    background: var(--green-2);
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled312_20260528101649.png");
    background-size: 2px 2px;
}

.c {
    padding: var(--padgap);
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/c.png") 6 round;
    background-color: #d7c4c1;
    p {
        margin-top: 0;
    }
}
.c2 {
  border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/c.png") 6 round;
    background-color: #d7c4c1;
    p {
        margin-top: 0;
        margin-bottom: 6px;
    }
}
.c3 {
    padding-inline: var(--padgap);
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/c.png") 6 round;
    background-color: #d7c4c1;
}
.bg {
    background: #6e3f57;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled326_20260528225228.png");
    background-attachment: fixed;
}

body {
    color: #61384d;
    --bg-img: url("https://figfleas.neocities.org/images/graphics/backgrounds/dithered-image%20(2).png");
    --bg-color: #6e3f57;
    --a-bg: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160002.png");
}
/* VARIABLES */
:root {
    --white: #f2ece6;
    --black: #322125;
    --purple: #6e3f57;
    --green: #8a8e60;
    --brown: #8e6351;
    --brown-2: #bc9b9b;
    --green-2: #bc9b9b;
    --divider-dashed: underline 0.1rem dashed #6e3f57;
    --padgap: 12px;
}

/* TAGS */
figcaption,
p,
ul,
span,
textarea,
a,
checkbox,
label {
    font-family: "Pixel";
    font-size: 16px;
    word-spacing: 2px;
}

pre {
    font-family: "Ticketing";
    line-height: 10px;
    font-size: 11px;
    font-weight: bold;
    text-shadow:
        0.2px 0.2px 0px,
        -0.2px -0.2px 0px,
        0.2px -0.2px 0px,
        -0.2px 0.2px 0px;
}
summary {
    cursor: pointer;
    label {
    pointer-events: none;
    display: inline-block;
    padding-block: var(--padgap);
}
}
.faq-summary {
    margin-right: 25%;
}
figcaption {
    padding-top: var(--padgap);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
}
h1 {
    font-size: 24px;
    text-transform: uppercase;
    font-family: "Jersey";
    letter-spacing: 1px;
}
h2 {
    font-size: 24px;
    font-family: "Jersey";
    letter-spacing: 1px;
}
p {
    margin-bottom: 14px;
}
p:last-child {
    margin-bottom: 0;
}
.no-padgap {
    margin-bottom: 0;
    padding: 0;
}
a {
    color: #61384d;
}
a:hover {
    font-style: italic;
    p {
        font-style: normal;
    }
}
/* LAYOUT */

summary {
    border-bottom: 2px solid #61384d;
    list-style: none;
    display: flex;
    align-items: center;
}
details > summary::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: var(--padgap);
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled271_20260206161003.png");
}

details[open] > summary::before {
    transform: rotate(90deg);
}
details:not([open]) > summary:hover {
    padding-left: 6px;
}
.seperator {
    padding-bottom: var(--padgap);
    border-bottom: 2px solid #61384d;
}
.picpic {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.pad {
    padding: var(--padgap);
}

.scroll {
    overflow-y: scroll;
}
.bar {
    margin-inline: var(--padgap);
}
.bar-2 {
    border-right: 2px solid var(--brown-2);
    margin: 0.8rem;
}
.grid-1 {
    gap: 8px;;
    display: grid;
    grid-template-rows: auto 1fr;
}
.grid-1-2 {
    gap: 8px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 2fr;
}
.grid-2-1 {
    gap: 8px;
    display: grid;
    grid-template-rows: 2fr 1fr;
}
.grid-half {
    gap: 8px;
    display: grid;
    grid-template-rows: 1fr 1fr;
}
.about-pic {
    background-image: url("https://figfleas.neocities.org/images/artworks/2026/Untitled75_20260415133748.jpg");
    height: 100%;
    background-size: cover;
    background-position: center;
}
ul {
    list-style-type: none;
}
.border {
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/border.png") 2 round;
}
.border-2 {
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled336_20260609051741.png") 2 round;
}
.bullet li::before {
    content: "";
    min-width: 7px;
    height: 17px;
    margin-right: 12px;
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled283_20260226184007.png");
}
.bullet li {
    display: flex;
}
li {
    margin-bottom: 6px;
}
li:last-child {
    margin-bottom: 0px;
}
textarea {
    color: #61384d;
    padding: var(--padgap);
    overflow-y: scroll;
    resize: none;
    line-break: anywhere;
    border-bottom: 0;
    border-inline: 0;
    border-top: 2px solid #61384d;
    background-color: #0000;
}

a.nav {
    display: flex;
    align-items: center;
}

li.nav:hover {
    padding-left: 0.4rem;
}
ul.left-1 {
    display: flex;
    flex-direction: column;
    padding-top: var(--padgap);
    padding-bottom: 6px;
    margin: 0;
}
.layout-wrapper {
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/wrapper.png") 6 round;
    margin: auto;
    box-sizing: content-box;
    width: 888px;
}
.layout {
    min-height: 100vh;
    padding: 6px;
    gap: var(--padgap);
    margin: auto;
    scrollbar-color: #6e3f57 rgba(208, 204, 190, 0);
    background-color: #d7c4c1;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.layout-index {
    grid-template-rows: auto minmax(0, 216px) minmax(0, 648px) minmax(0, 432px) minmax(0, 648px) minmax(0, 216px) auto;
    grid-template-areas:
        "header header header header"
        "box-1 box-1 box-1 box-1"
        "left-1 middle-1 middle-1 right-1"
        "half-1 half-1 half-2 half-2"
        "left-2 middle-2 middle-2 right-2"
        "box-3 box-3 box-3 box-3"
        "footer footer footer footer";
}
.layout-index > .box-1 {
    grid-area: box-1;
    display: grid;
    grid-template-rows: auto 36px;
    gap: var(--padgap);
}
.layout-index > .box-1 > .marquee {
    display: flex;
    justify-content: center;
    p {
        margin: 0;
    }
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/c.png") 6 round;
    background-color: #d7c4c1;
}
.layout-index > .box-1 > .guestbook {
    margin-right: var(--padgap);
    padding-right: var(--padgap);
}
.layout-index > .box-1 > .guestbook > .theme-switcher {
    input[type="radio"] {
        opacity: 0;
        width: 0;

        + label {
            span {
                display: inline-block;
                width: 53px;
                height: 53px;
                cursor: pointer;
                text-align: center;
                line-height: 24px;

                img {
                    opacity: 0;
                }
            }
        }

        &#lightmode + label span {
            background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled268_20260218124640.png");
        }

        &#darkmode + label span {
            margin-right: 6px;
            margin-left: 6px;
            background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled268_20260218124633.png");
        }
        &:checked + label span img {
            opacity: 1;
        }
        &:not(:checked) + label {
            span:hover {
                transform: scale(0.9);
            }
        }
    }
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-index > .box-1 > .site-button {
    margin-left: var(--padgap);
    padding-left: var(--padgap);
}
.layout-index > .box-1 > .site-button > .book {
    display: flex;
    justify-content: center;
    align-items: center;
}
.guestbook-real {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 82px;
    height: 68px;
    background-size: cover;
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled269_20260205231507.png");
}
.layout-index > .box-1 > .banner {
    color: #f2ece6;
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/a.png") 6 round;
    background-color: #61384d;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layout-index > .left-1 {
    grid-area: left-1;
}
.layout-index > .left-1 > .list {
    padding-inline: var(--padgap);
    padding-bottom: var(--padgap);
    display: flex;
    flex-direction: column;
}

.layout-index > .middle-1 {
    grid-area: middle-1;
    display: grid;
    grid-template-rows: 2fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "desc desc"
        "to-dos updates";
}
.layout-index > .middle-1 > .desc {
    grid-area: desc;
}
.layout-index > .middle-1 > .to-dos {
    grid-area: to-dos;
}
.layout-index > .middle-1 > .updates {
    grid-area: updates;
}
.layout-index > .middle-1 > .updates > .text {
    a {
        margin: auto;
    }
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;

    gap: var(--padgap);
    padding-top: var(--padgap);
}
.layout-index > .right-1 {
    grid-area: right-1;
    figure,
    img {
        max-height: 100%;
    }
}

.layout-index > .half-1 {
    grid-area: half-1;
}
.layout-index > .half-1 > .art {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.card {
    break-inside: avoid;
    img {
        width: 100%;
        border: 2px solid #61384d;
        box-sizing: border-box;
    }
    display: grid;
    grid-template-rows: 1fr auto;
    h4,
    h2,
    h1,
    p {
        padding: 0;
        margin-bottom: 0;
        margin-top: var(--padgap);
    }
}

.scale {
    display: grid;
}
.scale:hover {
    a {
        scale: 0.95;
    }
}
.featured-art {
    background-image: url("https://figfleas.neocities.org/images/artworks/2026/Untitled75_20260415133748.jpg");
    background-size: cover;
    background-position: center;
}

.featured-craft {
    background-image: url("https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg");
    background-size: cover;
}

.featured-game {
    background-image: url("https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg");
    background-size: cover;
}

.featured-character {
    background-image: url("https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg");
    background-size: cover;
}

.layout-index > .half-2 {
    grid-area: half-2;
}
.note {
    p {
        margin: 0rem;
    }
}
.c-scroll {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/c.png") 6 round;
    background-color: #d7c4c1;
}
.scroll-2 {
    overflow-y: scroll;
    border-top: 2px solid;
    padding-bottom: var(--padgap);
    padding-inline: var(--padgap);
    h2 {
        margin-block: var(--padgap);
    }
}
.changelog {
    h2 {
        margin-block: var(--padgap);
    }
}
.layout-index > .box-3 {
    grid-area: box-3;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.layout-index > .box-3 > .blinkies {
    display: flex;
    justify-content: space-between;
    img {
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/blinkie.png") 2 round;
}
    }
.layout-index > .left-2 {
    grid-area: left-2;
}
.site-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--padgap);
}

.button:hover {
    scale: 0.95;
}

.layout-index > .middle-2 {
    grid-area: middle-2;
}
.toybox {
    img:hover {
        scale: 0.9;
    }
}
.layout-index > .right-2 {
    grid-area: right-2;
}
@media (max-width: 768px) () {
    .layout-index {
        width: 100%;
        margin: 1;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(12, auto);
        grid-template-areas:
            "header"
            "box-1"
            "left-1"
            "middle-1"
            "right-1"
            "half-1"
            "half-2"
            "middle-2"
            "right-2"
            "left-2"
            "box-3"
            "footer";
    }
}

.img {
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}
figure {
    break-inside: avoid;
    img {
        box-sizing: border-box;
        width: 100%;
        border-bottom: 2px solid #61384d;
    }
    display: flex;
    flex-direction: column;
}
.header {
    grid-area: header;
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/hdrftr.png") 6 round;
}
.footer {
    grid-area: footer;
    border: 6px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/hdrftr.png") 6 round;
}
.fill {
    scrollbar-color: #6e3f57 var(--white);
    height: 100%;
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.art-full {
    img {
        object-fit: contain;
        box-sizing: border-box;
        width: 100%;
        border: 2px solid;
        border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.png") 2
            round;
    }
}
.img-filter {
    width: 50%;
    background-image: var(--a-bg);
    background-size: 8px 8px;
    border: 4px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218150623.png") 4 round;
    color: var(--white);
    padding: var(--padgap);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.img-filter-container {
    position: relative;
}

.img-gallery-filter {
    margin: 12px;
    p {
        margin: 0;
    }
    background-image: var(--a-bg);
    background-size: 8px 8px;
    border: 4px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218150623.png") 4 round;
    position: absolute;
    color: var(--white);
    padding: var(--padgap);
}
.img-filter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-filter {
    width: 100%;
    padding: var(--padgap);
    color: #f2ece6;
    background-image: var(--a-bg);
    background-size: 8px 8px;
    border: 4px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218150623.png") 4 round;
    appearance: none;
    cursor: pointer;
}
.post-filter::before {
    content: attr(aria-label);
    font-family: "Retron";
}

.post-filter:hover::before,
.post-filter:focus::before {
    font-style: italic;
    text-decoration: underline;
}
.post-filter:checked {
    display: none;
}
.post-filter + img {
    display: none;
}
.post-filter:checked + img {
    display: block;
}
.gap {
    padding-right: var(--padgap);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.grid-a-1-a {
    gap: var(--padgap);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.gallery-column {
    margin-top: -12px;
    padding-right: var(--padgap);
    column-gap: var(--padgap);
    column-count: 3;
}
.art-card {
    margin-top: var(--padgap);
    break-inside: avoid;
}
.gallery-row {
    display: flex;
    flex-direction: column;
    gap: var(--padgap);
    padding-right: var(--padgap);
}
.blog-card {
    height: 120px;
    display: flex;
    flex-direction: row;
    gap: var(--padgap);
    justify-content: space-between;
    p {
        color: #6e3f57;
    }
    img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    h2 {
        margin-bottom: var(--padgap);
    }
}
.img-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--padgap);
    margin-bottom: var(--padgap);
}
.faq {
    p {
        margin-top: var(--padgap);
    }
}
.layout-gallery {
    grid-template-rows: auto 216px minmax(648px, 1fr) auto;
    grid-template-areas:
        "header header header header"
        "box box box box"
        "left main main main"
        "footer footer footer footer";
}
.layout-gallery > .box {
    grid-area: box;
    display: grid;
}
.layout-gallery > .left {
    grid-area: left;
}
.layout-gallery > .main {
    grid-area: main;
}
.layout-post {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header header"
        "main main main desc"
        "footer footer footer footer";
}
.layout-post > .desc {
    grid-area: desc;
}
.layout-faq {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header header"
        "main main main main"
        "footer footer footer footer";
}
.main {
    grid-area: main;
}
.layout-faq {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header header"
        "main main main main"
        "footer footer footer footer";
}
.layout-about {
    grid-template-rows: auto minmax(648px, 1fr) minmax(0, 432px) auto;
    grid-template-areas:
        "header header header header"
        "main main main right"
        "half-1 half-1 half-2 half-2"
        "footer footer footer footer";
}
.layout-about > .main {
    grid-area: main;
}
.layout-about > .right {
    grid-area: right;
}
.layout-about > .half-1 {
    grid-area: half-1;
}
.layout-about > .half-2 {
    grid-area: half-2;
}

/*ICONS AND STAMPS*/
.stamp {
    height: 17px;
    width: 17px;
}
.icon-nav {
    height: 17px;
    width: 17px;
    margin-right: var(--padgap);
    display: inline-block;
}
.icon-about {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/about.png");
}
.icon-faq {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/faq.png");
}
.icon-blog {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/blog.png");
}
.icon-changelog {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/changelog.png");
}
.icon-shrines {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/shrines.png");
}
.icon-artworks {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260219160930.png");
}
.icon-crafts {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/crafts.png");
}
.icon-games {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/games.png");
}
.icon-3d {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/3d.png");
}
.icon-characters {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/characters.png");
}
.icon-media {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/media.png");
}
.icon-cooking {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/cooking.png");
}
.icon-builds {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/builds.png");
}
.icon-graphics {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/graphics.png");
}
.icon-layouts {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/layouts.png");
}
.icon-resources {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/resources.png");
}
.icon-sitemap {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/sitemap.png");
}
.icon-itchio {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/itch.io.png");
}
/* MARQUEE */
.marquee {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}
@keyframes scrollLeft {
    to {
        left: -42%;
    }
}
.item {
    position: absolute;
    left: max(100%);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.item1 {
    animation-delay: calc(30s / 10 * 9);
}
.item2 {
    animation-delay: calc(30s / 10 * 8);
}
.item3 {
    animation-delay: calc(30s / 10 * 7);
}
.item4 {
    animation-delay: calc(30s / 10 * 6);
}
.item5 {
    animation-delay: calc(30s / 10 * 5);
}
.item6 {
    animation-delay: calc(30s / 10 * 4);
}
.item7 {
    animation-delay: calc(30s / 10 * 3);
}
.item8 {
    animation-delay: calc(30s / 10 * 2);
}
.item9 {
    animation-delay: calc(30s / 10 * 1);
}
.item10 {
    animation-delay: calc(30s / 10 * 0);
}