@import url('https://fonts.cdnfonts.com/css/jetbrains-mono');
@import url('https://fonts.cdnfonts.com/css/restless-soul-bb');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

/* =========== */
/* Login stuff */
/* =========== */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

.account-dashboard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* justify-content: space-between; */
    /* align-items: flex-end; */
    /* align-items: center; */
    /* flex-wrap: wrap; */
    /* gap: 5px 10px; */
}

.account-burger {
}

.account-settings {
    display: flex;
    flex-direction: column;
    /* float: right; */
    align-items: flex-start;
    margin-top: 10px;
    flex-shrink: 0;
}

.account-actions {
    /* display: flex; */
    /* flex-direction: column; */
    /* float: right; */
    /* align-items: flex-end; */
    margin-top: 10px;
    /* flex-shrink: 0; */
}

.account-settings > label {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    /* border: 1px solid var(--mauve); */
    cursor: pointer;
    /* padding: 0px 0px 0px 5px; */
    /* color: var(--mauve); */
    /* accent-color: var(--mauve); */
}

.account-settings > label > input[type='checkbox'] {
    cursor: pointer;
}

input[type='checkbox'] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#feed-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

#refresh-sign {
    color: var(--mauve);
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    float: right;
    flex-shrink: 0;
}

#refresh-sign:hover {
    background-color: var(--mauve);
    color: var(--base);
    outline: 2px solid var(--mauve);
}

.status .post-title::before {
    content: '✔️';
    padding: 0.15em;
    font-size: 0.7em;
    color: transparent;
    text-shadow: 0 0 0 var(--base);

    margin-right: 0.25em;

    width: 1em;
    height: 1em;
    border-radius: 100%;
    background-color: var(--blue);
}

.post-title {
    all: unset;
}

.user-actions {
    margin-top: 5px;
    display: inline-block;
}

.actions {
    display: inline-block;
}

.action-button {
    background-color: var(--surface-0);
    text-shadow: var(--surface-2) 0 0 0.1em;
    text-align: center;
    border: 1px solid var(--surcace-1);
    border-radius: 0.2em;
    margin: 0 0.2em;
    font-size: 1em;
}

.at {
    font-weight: bold;
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-mono);
}

.at:hover {
    background-image: none;
    background-color: var(--text);
    color: var(--base);
    outline-color: var(--text);
    background-clip: unset;
    -webkit-text-fill-color: unset;
}

.untarget :target {
    outline-color: transparent;
}

#gif-dialog {
    background-color: var(--overlay-1);
    color: white;
}

#gif-dialog header {
    align-items: baseline;
    display: flex;
    margin-bottom: 4px;
}

#gif-dialog .close-button {
    margin-left: auto;
}

/* ============ */
/* UsrBinAnnika */
/* ============ */
.status-UsrBinAnnika\@todepond\.com {
    transform: rotate(-0.5deg);
}

.name-UsrBinAnnika\@todepond\.com::after {
    content: '⚠️ DORK';
    border: 1px solid hsl(42.2, 100%, 63.7%);
    color: hsl(42.2, 100%, 63.7%);
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    position: relative;
    top: -0.25em;
    font-weight: normal;
}

.name-maybeanerd\@todepond\.com::after {
    content: 'NERD';
    border: 1px dashed red;
    color: red;
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    position: relative;
    top: -0.25em;
    font-weight: normal;
}

.at-UsrBinAnnika\@todepond\.com:hover::after {
    border-color: var(--shade-3);
    color: var(--shade-3);
}

/* ==== */
/* Rosy */
/* ==== */
.name-Rosy\@todepond\.com {
    color: var(--red);
    font-family: 'JetBrains Mono', sans-serif;
}
/* perhaps some sort of user tags system would be good to prevent long gradients being placed everywhere? */
.name-Rosy\@todepond\.com::after {
    content: 'trans';
    background: linear-gradient(
        180deg,
        rgba(91, 206, 250, 1) 0%,
        rgba(91, 206, 250, 1) 19.9%,
        rgba(245, 169, 184, 1) 20%,
        rgba(245, 169, 184, 1) 39.9%,
        rgba(255, 255, 255, 1) 40%,
        rgba(255, 255, 255, 1) 59.9%,
        rgba(245, 169, 184, 1) 60%,
        rgba(245, 169, 184, 1) 79.9%,
        rgba(91, 206, 250, 1) 80%
    );
    -webkit-text-fill-color: transparent;
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    top: -0.25em;
    position: relative;
    font-weight: normal;
}

.at-Rosy\@todepond\.com::after {
    all: unset;
}

/* ======== */
/* lord cat */
/* ======== */

.name-lord.cat\@todepond\.com,
.name-lordcat\@svenlaa\.com {
    background: linear-gradient(to right, #c5a4ed, #a4a5ed 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'UnifrakturMaguntia';
    font-size: 1.2em;
}

.at-lord.cat\@todepond\.com:hover,
.at-lordcat\@svenlaa\.com:hover {
    background-image: none;
    background-clip: unset;
    background-color: white;
    color: var(--shade-3);
    -webkit-text-fill-color: unset;
}

.name-lord.cat\@todepond\.com::after,
.name-lordcat\@svenlaa\.com::after {
    content: 'Blåhaj Collector';
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, #c5a4ed, #a4a5ed 100%) 1;
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    position: relative;
    top: -0.25em;
    font-weight: normal;
    background: linear-gradient(to right, #c5a4ed, #a4a5ed 100%);
    background-clip: text;
}

.at-lord.cat\@todepond\.com::after,
.at-lordcat\@svenlaa\.com::after {
    all: unset;
}

/* ======= */
/* Svenlaa */
/* ======= */
.name-Svenlaa\@todepond\.com {
    background: linear-gradient(to right, var(--yellow), var(--green) 200%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'JetBrains Mono', sans-serif;
}

.name-Svenlaa\@svenlaa\.com {
    color: var(--green);
    font-family: 'JetBrains Mono', sans-serif;
}

/* ========== */
/* HatsuSixty */
/* ========== */
.name-HatsuSixty\@todepond\.com {
    background: linear-gradient(to right, var(--pink), var(--purple) 200%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ======== */
/* hivemind */
/* ======== */
.name-hivemind\@todepond\.com {
    background: linear-gradient(180deg, rgb(248 22 22) 20%, rgb(200 66 36) 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Restless Soul BB', sans-serif;
    font-size: 1.2em;
}

/* =========== */
/* HatsuneMiku */
/* =========== */
.name-HatsuneMiku\@todepond\.com {
    background: linear-gradient(to right, #87e5cf, #47c8c0 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ======== */
/* TodePond */
/* ======== */
.name-TodePond\@todepond\.com {
    color: var(--green);
}

.name-TodePond\@todepond\.com::after {
    content: 'ADMIN';
    border: 1px solid var(--green);
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    top: -0.25em;
    position: relative;
    font-weight: normal;
}

.at-TodePond\@todepond\.com.name-TodePond\@todepond\.com:hover::after {
    border-color: var(--shade-3);
}

/* =========== */
/* PodeTond 💚 */
/* =========== */
.name-PodeTond.💚\@todepond\.com {
    background: linear-gradient(to right, #eaacb8, #7acbf5 9ch, var(--green) 9ch);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block; /* so it doesnt cut the heart */
    font-family: 'JetBrains Mono', sans-serif;
}

.at-PodeTond.💚\@todepond\.com:hover {
    background-image: none;
    background-clip: unset;
    background-color: white;
    color: var(--shade-3);
    -webkit-text-fill-color: unset;
}

/* ==== */
/*  El  */
/* ==== */
@media (prefers-reduced-motion: no-preference) {
    .name-El\@todepond\.com {
        animation: 30s linear 0s infinite alternate el-color-shift;
    }
}
@keyframes el-color-shift {
    0% {
        color: lch(90% 90 209.2);
    }
    50% {
        color: lch(90% 90 431.4);
    }
    100% {
        color: lch(90% 90 368.7);
    }
}

/* ===== */
/* sofia */
/* ===== */
.name-sofia\@todepond\.com {
    letter-spacing: 0.5em;
    color: transparent;
    background: linear-gradient(to bottom, #fff 50%, #80ff00 100%);
    background-clip: text;
    text-shadow: 0 0 0.125em #80ff0080;
}

/* ====== */
/* minion */
/* ====== */
:root {
    --minion-red: #f27878;
}

.title-minion\@todepond\.com::after {
    content: 'NOT ADMIN';
    color: var(--minion-red);
    border: 1px solid var(--minion-red);
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    top: -0.2em;
    position: relative;
    background-image: linear-gradient(120deg, transparent 30%, rgba(255, 200, 150, 0.5) 34%, transparent 60%);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: 200%;
}

.name-minion\@todepond\.com {
    color: var(--minion-red);
}

.name-minion\@todepond\.com::before,
.name-minion\@todepond\.com::after {
    content: '✨';
    font-size: 0.5em;
    position: relative;
    top: -0.3em;
}

@media (prefers-reduced-motion: no-preference) {
    .title-minion\@todepond\.com::after {
        -webkit-animation: minion-badgeSwish 10s ease-in-out infinite;
        -moz-animation: minion-badgeSwish 10s ease-in-out infinite;
        animation: minion-badgeSwish 10s ease-in-out infinite;
    }
}

@-webkit-keyframes minion-badgeSwish {
    0% {
        background-position: 500px;
    }
    100% {
        background-position: -50px;
    }
}
@-moz-keyframes minion-badgeSwish {
    0% {
        background-position: 500px;
    }
    100% {
        background-position: -50px;
    }
}
@keyframes minion-badgeSwish {
    0% {
        background-position: 500px;
    }
    100% {
        background-position: -50px;
    }
}

/* ==== */
/* R74n */
/* ==== */
.name-R74n\@todepond\.com {
    color: #00ffff;
}
.name-R74n\@todepond\.com::after {
    content: ' 🔒';
}

/* ====== */
/* soxfox */
/* ====== */
.name-soxfox\@todepond\.com {
    color: transparent;
    background: linear-gradient(150deg, #f4218f, #ff9e00);
    background-clip: text;
}

.name-soxfox\@todepond\.com::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 0.6em;
    background: linear-gradient(150deg, #f4218f, #ff9e00);
    margin-left: 0.2em;
    mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDE4NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjIiPjxwYXRoIGQ9Im0xNDcgMTQ3LTYgMTFjLTYgOS0xNCAxNi0yNiAyMWExNDcgMTQ3IDAgMCAxLTgzIDJjLTEzLTUtMjQtMTAtMzItMTZsMTQtMzFhMTAzIDEwMyAwIDAgMCA1OSAxOWMxMiAwIDIxLTIgMjctNiA1LTMgOC04IDgtMTQgMC00LTEtNy01LTEwLTMtMy03LTUtMTMtN2wtMjEtNi0zNC05Yy04LTQtMTYtOS0yMi0xNlM0IDY4IDQgNTZjMC0xMCAyLTIwIDgtMjggNi05IDE0LTE2IDI2LTIxYTEzOCAxMzggMCAwIDEgNzUtM2MxMSAzIDIxIDcgMjkgMTJsLTEzIDMyYy0xNy0xMC0zMy0xNS01MC0xNS0xMSAwLTIwIDItMjYgNi01IDQtOCA5LTggMTVzMyAxMSAxMCAxNGM2IDMgMTYgNiAyOSA5YTI5MyAyOTMgMCAwIDEgNDQgMTRsMzUtODhoMTM2bC0xMyAzNGgtOTRsLTIwIDQ3aDg0bC0xNCAzM2gtODNsLTEyIDMwWiIvPjwvc3ZnPg==')
        no-repeat center;
}

/* ======= */
/* Tristie */
/* ======= */
.name-Tristie\@todepond\.com {
    background: linear-gradient(#31d0a6, #105e58);
    background-clip: text;
    color: transparent;
}

/* ======= */
/* elouan */
/* ======= */
.name-elouan\@todepond\.com::after,
.name-elouan\@svenlaa\.com::after {
    content: '😎 COOL';
    border: 1px solid hsl(42.2, 100%, 63.7%);
    color: hsl(42.2, 100%, 63.7%);
    padding: 0.1em 0.2em;
    margin: 0.35em;
    font-size: 0.6em;
    position: relative;
    top: -0.25em;
    font-weight: normal;
}
.name-elouan\@todepond\.com,
.name-elouan\@svenlaa\.com {
    color: transparent;
    background: linear-gradient(150deg, #7db84f, #545454);
    background-clip: text;
}
.at-elouan\@todepond\.com::after,
.at-elouan\@svenlaa\.com::after {
    all: unset;
}