.past-link-posts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.past-link-posts.past-link-posts--grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
    justify-items: center;
    justify-content: flex-start;
}

.past-link-posts > a {
    display: block;
    flex: 0 1 auto;
}

.past-link-posts > a > img {
    max-height: 200px;
}

h2 > small,
h2 > .gios-user-grid > small {
    color: var(--border);
    display: block;
    font-size: 0.35em;
    margin: 1.15rem 0 0;
}

h2 > small + small {
    margin-top: 0.5rem !important;
}

h2 > span > .text-charm__medal,
h2 > span > .text-charm__medal:hover {
    transform: translateY(0.1rem) !important;
    cursor: default;
}

.details__container {
    display: grid;
}

.details__container textarea {
    width: 100%;
    min-height: 10em;
    margin-top: 1rem;
}

.details__container blockquote {
    margin: 1rem 1rem;
    font-style: normal;
}

.details__container blockquote > h1,
.details__container blockquote > h2,
.details__container blockquote > h3,
.details__container blockquote > h4,
.details__container blockquote > h5,
.details__container blockquote > h6 {
    margin-top: 0;
}

.see-all-past-wallpapers {
    display: block;
    text-align: right;
    margin: 1rem 0 2rem;
    text-decoration: none;
}

#api_key_form,
.orgasms-log {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.api-key {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.api-key form.button_to {
    position: relative;
    width: 100%;
    display: block;
}

.api-key__key {
    font-size: 2.75rem;
    font-weight: bold;
    background: var(--disabled);
    font-family: monospace;
    padding: 0.4rem 1rem;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    margin: 0.5rem 0 1rem;
}

.danger-button {
    background: var(--danger) !important;
    color: #FFF !important;
}

@media screen and (max-width: 475px) {
    .api-key__key {
        font-size: 2rem;
    }
}

turbo-frame#orgasm_form {
    display: flex;
    flex-direction: column;
}

turbo-frame#orgasm_form .accent-block {
    flex: 1 1 100%;
    margin-top: 0;
}

turbo-frame.accent-block {
    margin-top: 0;
}

form.orgasms {
    padding: 0;
}

form.orgasms h3 {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

form.orgasms input[type=submit] {
    width: auto;
    margin: 0 auto;
    display: block;
}

.orgasms__credit_to_user {
    width: 100%;
}

.orgasms__rating {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.orgasms__rating .orgasms__rating__option {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: var(--accent);
    font-weight: bold;
}

.orgasms__rating .orgasms__rating__option label {
    margin-bottom: 0.2rem;
}

form.orgasms .form__row {
    justify-content: center;
}

.form__group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.form__group input[type=radio],
.form__group input[type=checkbox] {
    margin: 0;
}

.form__row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0;
    cursor: pointer;
    position: relative;

    & > .form__row__charm {
        position: absolute;
        top: 37%;
        right: 7px;
        transform: translateY(-50%);
        opacity: 0.7;
    }

    & .full-span {
        width: 100%;
    }

    &.stacked {
        flex-direction: column;
        align-items: flex-start;
    }

    &.signature {
        &::after {
            content: "x";
            position: absolute;
            bottom: 1rem;
            left: 0.5rem;
            display: block;
            font-size: 1.7rem;
        }

        input, .signature__inner {
            margin-left: 2rem;
            border-top: none;
            border-left: none;
            border-right: none;
            border-radius: 0;
        }

        & .signature__inner {
            margin-bottom: 1rem;
            font-size: 2rem;
            transform: translateY(5px);

            & small {
                display: inline-block;
                font-size: 0.8em;
                transform: translateY(-3px) rotate(2deg);
            }
        }
    }
}

.flat-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.nut_pledge_failed {
    flex-wrap: wrap;
    margin-top: -1rem;
    margin-bottom: 1rem;
    background: var(--accent);
    color: var(--bg);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    & .preview{
        position: relative;
        flex: 1 0 100%;
        display: flex;
        justify-content: center;

        &::before {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            z-index: 99;
            content: "";
            display: block;
            width: 120px;
            height: 120px;
            background:
                    repeating-conic-gradient(rgba(238, 234, 231, 0.23) 0 3%, transparent 0 11%),
                    repeating-conic-gradient(transparent 0 5%, rgba(238, 234, 231, 0.30) 0 7%) 50% / 60% 60%,
                    repeating-conic-gradient(transparent 0 7%, rgba(238, 234, 231, 0.33) 0 9%) 50% / 70% 70%,
                    repeating-conic-gradient(transparent 0 11%, rgba(238, 234, 231, 0.23) 0 13%) 50% / 80% 80%,
                    radial-gradient(rgba(238, 234, 231, 0.44) 22%, transparent 0);
            background-repeat: no-repeat;
            filter: blur(2px) contrast(50);
        }
    }
    & img {
        max-width: 120px;
    }
}

.form__row--stacking {
    flex-wrap: wrap;
}

.form__row--checkbox {
    align-items: flex-start;
    gap: 1rem;

    & > input[type="checkbox"] {
        margin-top: 2px;
    }
}

.form__row input.full-width {
    width: 100%;
    margin-bottom: 0;
}

.form__row label {
    margin: 0;
}

.form__row input[type=checkbox] {
    transform: translateY(0.1em);
}

h2.with-chart {
    padding: 0;
}

h2.with-chart #chart-1 {
    transform: translateY(7px);
}

.kink_tools {
    font-size: 0.9rem;
    margin-top: 1rem;
}

#kink_tools {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.kink_form {
    gap: 0 !important;
}

.kink_form input[type=text] {
    margin: 1px 0 1px 1px;
    width: 100px;
}

.kinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kinks > turbo-frame {
    display: contents;
}

.kink,
.kink_form {
    display: flex;
    align-items: center;
    border-radius: 6px;
    min-height: 30px;
}

.kink.valid,
.kink_form {
    background: var(--accent);
    color: var(--bg);
}

.kink.untested {
    background: var(--accent-bg);
    color: var(--accent);
}

.kink > a {
    color: inherit;
    display: block;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.kink > form {
    display: contents;
}

.kink.untested button {
    border: none;
}

.kink button {
    background: var(--accent-bg);
    color: var(--accent);
    border: var(--accent) 2px solid;
}

.kink button:hover {
    filter: none !important;
    background: var(--danger);
    color: var(--danger-text);
}

.kink button,
.kink_form input[type=submit] {
    margin: 0;
    padding: 0 0.5rem;
    height: 100%;
    font-size: 1.2rem;
    width: 39px !important;
    height: 38px;
}

.kink__status {
    display: contents;
}

.kink ion-icon.star {
    margin-left: 0.5rem;
}

.user_segments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user_segment {
    display: block;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.user_segment .wallpapers {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    animation: 120s ease-out infinite scroll-wallpapers;

    column-count: 3;
    column-gap: 0.25rem;
}

@keyframes scroll-wallpapers {
    0% {
        opacity: 0;
        transform: translateY(4%);
    }

    1% {
        opacity: 1;
        transform: translateY(0);
    }

    95% {
        opacity: 1;
        transform: translateY(-90%);
    }

    100% {
        opacity: 0;
        transform: translateY(-120%);
    }
}

.user_segment .wallpapers img {
    opacity: 0.2;
    position: relative;
    user-select: none;
}

.user_segment h3 {
    margin: 0;
}

.user_segment .user-segement-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user_segment h3 .text-charm {
    transform: translateY(-10px);
}

.gios-user-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0.2rem;

    @media screen and (max-width: 600px) {
        grid-template-columns: 1fr;

        & > small:last-child {
            text-align: left !important;
        }
    }

    & > small {
        display: grid !important;
        gap: 0.4rem;
        grid-template-columns: subgrid;

        &:last-child {
            text-align: right;
        }
    }
}

.wall_editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .editor {
        &::part(inner-container) {
            overflow: visible;
        }
    }
}

.editor-hints {
    margin-top: 0.5rem;
    border-width: 0 !important;
}

.editors {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    width: 95dvw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    & .accent-block {
        flex: 1 1 500px;
        margin-top: 0 !important;
        position: relative;

        & .editor {
            height: 500px;
        }
    }
}

.install_profile {
    margin: 1rem 0;
}

.profile_preview {
    display: block;
    pointer-events: none;
    user-select: none;
    transform: scale(0.9);
    box-shadow: 0 0 10px 4px var(--accent-bg);
    border: solid 1px var(--accent-bg);
    padding: 2rem;
}

.profile_attribution {
    position: fixed;
    bottom: 0;
    right: 0;
    background: var(--accent-bg);
    color: var(--text);
    z-index: 99999;
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
}

.profiles {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .profile {
        background: var(--accent-bg);
        padding: 1rem;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        min-height: 400px;
        gap: 1rem;

        & .profile__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.1rem;
        }

        & > a {
            position: relative;
            flex: 1 1 100%;
            display: flex;
            flex-direction: column;
        }

        & .profile__frame {
            flex: 1 1 100%;
            position: relative;
            border: 1px solid var(--border);
            padding: 1px;
            overflow: hidden;
            border-radius: 5px;
            --scale-factor: 0.4;

            &:hover {
                --scale-factor: 0.7;
            }

            & iframe {
                border: none;
                transform: scale(var(--scale-factor));
                width: calc(1 / var(--scale-factor) * 100%);
                height: calc(1 / var(--scale-factor) * 100%);
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                transform-origin: 0 0;
                pointer-events: none;
                user-select: none;
                display: block;
                position: absolute;
            }
        }
    }
}

.user-leash {
    font-size: 1rem;
    padding: 1rem;
    border: 1px solid var(--accent);
    margin: 1rem 0;
    border-radius: 4px;
}

.user-kennel {
    margin-bottom: 1rem;

    & > [id^="leash"]:first-of-type {
        margin-top: 0;
    }
}

.lizard_type {
    font-weight: 400;
    font-style: normal;

    &.warren {
        font-family: "Lacquer", system-ui;
    }

    &.ki {
        font-family: "Vibur", cursive;
    }

    &.taylor {
        font-family: "Mrs Saint Delafield", cursive;
    }
}