@font-face {
    font-family: "Retron";
    src: url("../fonts/Retron2000.ttf");
}
/* 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: #c2a4a4 #2d1c1b;
}

::selection {
    color: var(--white);
    background-color: #594f99;
}
.a {
    height: 36px;
    p,
    a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
    }
    padding-inline: 6px;
    color: #f2ece6;
    a {
        color: #9494f3;
    }
    background-image: var(--a-bg);
    background-size: 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 4px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218150623.png") 4 round;
}
.b {
    gap: var(--padgap);
    padding: var(--padgap);
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.png") 2 round;
    background: var(--green-2);
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160205.png");
    background-size: 8px 8px;
}
.c {
    padding: var(--padgap);
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.png") 2 round;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160356.png");
    background-size: 4px 4px;
    p {
        margin-top: 0;
    }
}
.c2 {
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.png") 2 round;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160356.png");
    background-size: 4px 4px;
    p {
        margin-top: 0;
        margin-bottom: 6px;
    }
}
.bg {
    background: #6e3f57;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/dithered-image%20(2).png");
    background-size: cover;
    background-attachment: fixed;
}
body {
    color: var(--body-text-color);
}

body,
body#light {
    --body-text-color: #322125;
    --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");
}
body#dark {
    --body-text-color: #f2ece6;
    --bg-color: black;
    --a-bg: url("https://static.vecteezy.com/system/resources/thumbnails/048/801/509/small/natural-leather-structure-material-abstract-texture-background-for-design-natural-color-skin-material-fashion-design-wallpaper-black-wall-texture-background-for-graphic-design-and-web-design-photo.jpg");
}
/* 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,
h1,
h2,
h3,
h4,
h5,
h6,
span,
textarea,
a {
    font-family: "Retron";
}
pre {
    font-size: 8px;
    font-weight: bold;
    text-shadow:
        0.3px 0.3px 0px,
        -0.3px -0.3px 0px,
        0.3px -0.3px 0px,
        -0.3px 0.3px 0px;
}
summary {
    cursor: pointer;
}
label, figcaption {
    font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
}
h1 {
    font-size: 18px;
}
h2 {
    font-size: 16px;
}
h3 {
    font-size: 14px;
}
p {
    font-size: 12px;
    margin-bottom: 12px;
}
.no-padgap {
    margin-bottom: 0;
    padding: 0;
}
a {
    font-size: 12px;
    color: #594f99;
    text-decoration: none;
}
a:hover {
    font-style: italic;
    p{
    font-style: normal;
    }
}
/* LAYOUT */

summary {
    border-bottom: 2px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
    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;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
}
.picpic {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.pad {
    padding: var(--padgap);
}

.scroll {
    overflow-y: scroll;
}
.bar {
    border-right: 2px solid #bc9b9b;
    margin: 0.8rem;
}
.bar-2 {
    border-right: 2px solid var(--brown-2);
    margin: 0.8rem;
}
.grid-1 {
    gap: var(--padgap);
    display: grid;
    grid-template-rows: auto 1fr;
}
.grid-1-2 {
    gap: var(--padgap);
    display: grid;
    grid-template-rows: 1fr 2fr;
}
.grid-2-1 {
    gap: var(--padgap);
    display: grid;
    grid-template-rows: 2fr 1fr;
}
.grid-half {
    gap: var(--padgap);
    display: grid;
    grid-template-rows: 1fr 1fr;
}
ul {
    list-style-type: none;
    font-size: 12px;
}
.border {
    border: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.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;
}
textarea {
    padding: var(--padgap);
    overflow-y: scroll;
    resize: none;
    line-break: anywhere;
    border-bottom: 0;
    border-inline: 0;
    border-top: 2px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
    background-color: #0000;
    font-size: 12px;
}
h4 {
    display: inline-block;
    padding-block: var(--padgap);
}
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 {
    margin: auto;
    box-sizing: content-box;
    width: 864px;
    border: 7px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218133256.png") 7 round;
}
.layout {
    padding: var(--padgap);
    gap: var(--padgap);
    margin: auto;
    scrollbar-color: #6e3f57 rgba(208, 204, 190, 0);
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160356.png");
    background-size: 4px 4px;
    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-columns: 1fr 2fr 1fr;
}
.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");
}
.guestbook-real:hover {
    scale: 0.95;
}
.layout-index > .box-1 > .banner {
    color: #f2ece6;
    border: 4px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218150623.png") 4 round;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/dithered-image%20(3).png");
    background-size: cover;
    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;
}

.about-me {
    background-image: url("https://thumbs.dreamstime.com/b/default-photo-placeholder-half-length-portrait-photo-avatar-gray-color-default-photo-placeholder-116847356.jpg");
    background-size: cover;
}
.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: var(--padgap);
}  
.card {
        break-inside: avoid;
    img {
        width: 100%;
        border: 2px solid;
        border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
        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;
    }
}
.border-2 {
    border: 2px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
}
.featured-art {
    background-image: url("https://t4.ftcdn.net/jpg/06/71/92/37/360_F_671923740_x0zOL3OIuUAnSF6sr7PuznCI5bQFKhI0.jpg");
    background-size: cover;
}

.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: 2px solid transparent;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124014.png") 2 round;
    background-image: url("https://figfleas.neocities.org/images/graphics/backgrounds/Untitled276_20260219160356.png");
    background-size: 4px 4px;
    
}
.scroll-2 {
    overflow-y: scroll;
    border-top: 2px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
    padding-bottom: var(--padgap);
    padding-inline: var(--padgap);
    h5 {
        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;
}
.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 {
        max-width: 3rem;
    }
    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 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.header {
    grid-area: header;
}
.footer {
    grid-area: footer;
}
.fill {
    scrollbar-color: #6e3f57 rgba(208, 204, 190, 0);
    height: 100%;
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery-filter {
    display: flex;
    justify-content: center;
    align-items: end;
    border: 2px solid;
    border-image: url("https://figfleas.neocities.org/images/graphics/borders/Untitled272_20260218124016.png") 2 round;
    aspect-ratio: 1/1;
    p {
    margin: 0;
}
    padding: var(--padgap);
    color: var(--white);
    background-color: var(--black); 
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled285_20260306203142.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center 12px;
}
.gap {
    padding-right: var(--padgap);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.column {
    gap: var(--padgap);

    column-count: 3;
}
.column .card {
    margin-top: var(--padgap);
}
.layout-gallery {
    min-height: 100vh;
    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;
    grid-template-columns: 187px 1fr;
}
.layout-gallery > .left {
    grid-area: left;
}
.layout-gallery > .main {
    grid-area: main;
}

.layout-about {
    min-height: 100vh;
    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;
}
.stamp-fig {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151229.png");
}
.stamp-theme {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151208.png");
}
.stamp-guestbook {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151224.png");
}
.stamp-navigation {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151221.png");
}
.stamp-welcome {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151223.png");
}
.stamp-warning {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151218.png");
}
.stamp-button {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151217.png");
}
.stamp-about {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151226.png");
}
.stamp-contact {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151206.png");
}
.stamp-featured {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151203.png");
}
.stamp-updates {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151215.png");
}
.stamp-sites {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260219160933.png");
}
.stamp-toybox {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151201.png");
}
.stamp-webrings {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151213.png");
}
.stamp-friends {
    background-image: url("https://figfleas.neocities.org/images/graphics/icons/Untitled244_20260218151209.png");
}
.icon-nav {
    height: 17px;
    width: 17px;
    margin-right: 12px;
    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);
}