WPD-CSS-STUFF/users/Vaporeon.css

/*

If you're gonna steal my CSS, at least send me coins.
made by @vaporeon
unoptimized and sloppy code

*/
/* This is a false zoophilia/bestiality content distribution accusation the admins refused to remove, so I have decided to remove it myself. */
/* Thank you Fishy for reinstating false accusations of distributing illegal content which were deleted by other admins. Really appreciate that shit! (not) */
div#comment-4468586 {
    display: none !important;
}

#userpage:before,
#userpage:after {
    opacity: 0;
    animation: marseyFadeIn 2s linear forwards;
    animation-delay: 10s;
    content: url(/e/marseyxoxo.webp);
    filter: brightness(160%) hue-rotate(30deg) saturate(2);
    display: inline-block;
    position: fixed;
    z-index: 1031;
    top: -75px;
}

#userpage:before {
    scale: 0.16;
    left: calc(50% - 230px);
}

#userpage:after {
    scale: -0.16 0.16;
    right: calc(50% - 221px);
}

@keyframes marseyFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    #userpage:before {
        scale: 0.12;
        transform: translate(290px, -30px);
    }

    #userpage:after {
        scale: -0.12 0.12;
        transform: translate(280px, -30px);
    }
}

#button-sub,
#button-sub2 {
    transform: scale(1.1) !important;
}

#button-sub:after,
#button-sub2:after {
    content: " pls <3" !important;
}

.contain {
    filter: sepia(1) saturate(3) !important;
}

.form-control::placeholder {
    text-transform: lowercase !important;
}

#profile-mobile--name,
#profile--name {
    margin-left: 6px !important;
}

:root {
    --background: #0000 !important;
    --primary: #fa0 !important;
}

@font-face {
    font-family: "Minecraft";
    src: url(https://files.catbox.moe/ekdimf.otf);
}

*:not(.fas):not(i):not(button) {
    font-family: "Minecraft";
    -webkit-text-fill-color: #fa0;
    -webkit-text-stroke: 0.4px #fff8;
}

#navbar span.notif-count,
#navbar span#header--username.patron,
.comment span.patron {
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #fff !important;
}

.form-control,
.comment-anchor,
div#header--dropdown-menu,
button#giveaward {
    box-shadow: 0px 0px 15px #fa05, inset 0px 0px 15px #fa05 !important;
}

#navbar li i,
#logo-WPD,
div.actionbtns button,
div#comment-form-space-u_261437,
.comment li:not(.list-group-item),
#profile--info p,
#profile-mobile--info p,
.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center {
    filter: drop-shadow(0px 0px 10px #fa0) !important;
}

h3#profile--name span.patron {
    background: #0000 !important;
    text-shadow: 0px 0px 15px #fa0;
    font-size: 40px !important;
}

h5#profile-mobile--name span.patron {
    background: #0000 !important;
    text-shadow: 0px 0px 15px #fa0;
    font-size: 30px !important;
}

#header--icon {
    content: url(https://i.watchpeopledie.tv/e/marseyhearts.webp) !important;
    width: 35px !important;
    max-width: 45px !important;
    max-height: 35px !important;
    filter: sepia(100%) saturate(300%) drop-shadow(0px 0px 5px #fa0);
    height: 35px !important;
}

#logo-WPD {
    content: url(https://pomf2.lain.la/f/ocwa6rhn.png) !important;
    height: 36px !important;
    width: 75px !important;
    margin-left: 10px !important;
}

img[alt="Spider!"] {
    content: url(https://pomf2.lain.la/f/vr1pk01.png) !important;
    pointer-events: none !important;
}

img.mb-4.sidebar-img {
    content: url(https://i.watchpeopledie.tv/e/marseyexciteddance.webp) !important;
    filter: hue-rotate(30deg) brightness(150%) drop-shadow(0px 0px 10px #fa0) !important;
}

body {
    background-image: url(https://pomf2.lain.la/f/3ssxm1ml.gif) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

div#profile--groups,
div#profile-mobile--groups {
    position: relative;
    margin-bottom: 30px !important;
}

div#profile--groups:after,
div#profile-mobile--groups:after {
    content: "follow me for a cookie!";
    white-space: nowrap !important;
    position: absolute;
    bottom: -28px;
    left: 50%;
    right: 50%;
    display: flex;
    justify-content: center;
}

div#profile--groups:after {
    font-size: 14px !important;
}

div#profile-mobile--groups:after {
    font-size: 8px !important;
}

.srd:before {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 0px !important;
}

.srd:after {
    font-family: sans-serif;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 1px !important;
}

a[href="/chat/1"] {
    padding-top: 8px !important;
}

.container {
    margin: -55px 0 0 0 !important;
    padding-top: 15px;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
}

html:after {
    filter: sepia(1000) saturate(1000) hue-rotate(-50deg) drop-shadow(0px 0px 5px #fa0) !important;
    content: "" !important;
    background-image: url(https://pomf2.lain.la/f/2rxjgot6.gif) !important;
    background-size: 40% !important;
    background-position: center !important;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 100% !important;
    pointer-events: none !important;
    z-index: 10000 !important;
}

img[alt^=":"]:not(img[party]) {
    filter: sepia(100%) saturate(300%);
}

div.my-2 {
    padding-left: 10px;
}

.srd,
a[href="/formatting"],
div#sidebar-content>.mt-3,
.comment.collapsed .user-info {
    font-size: 0 !important;
}

.srd:before {
    animation: vaporeon-owo 8s linear normal forwards;
    animation-iteration-count: 1;
    content: "";
}

.srd:after {
    animation: flicker 0.8s linear alternate forwards;
    animation-iteration-count: 12;
    content: "|";
}

@keyframes flicker {
    0% {
        filter: opacity(0)
    }

    100% {
        filter: opacity(1)
    }
}

@keyframes vaporeon-owo {
    0% {
        content: " "
    }

    4% {
        content: "@"
    }

    8% {
        content: "@V"
    }

    12% {
        content: "@Va"
    }

    16% {
        content: "@Vap"
    }

    20% {
        content: "@Vapo"
    }

    24% {
        content: "@Vapor"
    }

    28% {
        content: "@Vapore"
    }

    32% {
        content: "@Vaporeo"
    }

    36% {
        content: "@Vaporeon"
    }

    40% {
        content: "@Vaporeon'"
    }

    44% {
        content: "@Vaporeon's"
    }

    48% {
        content: "@Vaporeon's "
    }

    52% {
        content: "@Vaporeon's p"
    }

    56% {
        content: "@Vaporeon's pr"
    }

    60% {
        content: "@Vaporeon's pro"
    }

    64% {
        content: "@Vaporeon's prof"
    }

    68% {
        content: "@Vaporeon's profi"
    }

    72% {
        content: "@Vaporeon's profil"
    }

    76% {
        content: "@Vaporeon's profile"
    }

    80% {
        content: "@Vaporeon's profile "
    }

    84% {
        content: "@Vaporeon's profile -"
    }

    88% {
        content: "@Vaporeon's profile - "
    }

    92% {
        content: "@Vaporeon's profile - W"
    }

    96% {
        content: "@Vaporeon's profile - WP"
    }

    100% {
        content: "@Vaporeon's profile - WPD"
    }
}

@media (min-width: 768px) {

    .srd:after,
    .srd:before {
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    .srd:after,
    .srd:before {
        font-size: 11.5px;
    }
}

@media screen and (min-width: 1130px) {
    #profile--simphate {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 1130px) {
    #profile--simphate {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 975px) {
    #profile--simphate {
        font-size: 19px !important;
    }
}

@media screen and (max-width: 850px) {
    #profile--simphate {
        font-size: 17px !important;
    }
}

hr {
    border-width: 4px !important;
    filter: none !important;
}

p.text-muted.font-weight-bold {
    font-size: 30px;
}

div#profile--info>p {
    font-size: 20px !important;
}

p {
    overflow: visible !important;
}

code>a {
    font-size: 23px !important;
    border: solid 2px #fa0;
    border-radius: 10px !important;
    ;
    padding: 4px 6px 4px 6px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.bug,
.ml-2.mt-2.patron-img,
img[alt="@Vaporeon's banner"],
a[href="/@Vaporeon/bank_statement"],
a[href="/@Vaporeon/muters"],
a[href="/@Vaporeon/muting"],
#profile--alts,
#profile--alts-list,
#profile-mobile--alts,
#profile-mobile--alts-list,
span#profile--verified,
span#profile-mobile--verified,
#profile--origname,
#profile-mobile--origname,
#toggle-anthem,
#toggle-anthem-mobile,
#profile--house,
#profile-mobile--house,
#header--donate--item,
button#button-unsub,
.actionbtns button.btn.btn-danger,
#button-unsub2,
.arrow-down,
.sidebar--rules.sidebar--rules--wpd.pt-2,
h5.text-center.text-black.mt-0.mt-md-2.mb-2,
div#sidebar-content hr,
div#profile--bio>p[style*="text-align: center !important;"] b,
div#profile-mobile--bio>p[style*="text-align: center !important;"] b,
.jumbotron img[alt=":#marseyexciteddance:"],
div#profile-mobile--bio img[alt=":#marseyexciteddance:"],
.ml-2.mt-1.patron-img,
ul#content *:nth-of-type(4),
ul#content *:nth-of-type(5),
ul#content *:nth-of-type(6) {
    display: none !important;
}

p[style="text-align: center !important; filter: drop-shadow(0px 0px 4px #0ff);"] {
    filter: none !important;
}

#profile--simphate:not(:empty) a,
#profile-mobile--simphate {
    margin: 0 !important;
}

div#profile-mobile--simphate * {
    margin: 0 !important;
    padding: 0 !important;
}

#profile--simphate:not(:empty),
#profile-mobile--simphate:not(:empty),
div.my-2:not([id*="markdown-c"]) {
    color: #0000 !important;
    -webkit-text-stroke: 0px #0000 !important;
    -webkit-text-fill-color: #0000 !important;
}

#profile--simphate::selection,
#profile-mobile--simphate::selection,
div.my-2::selection {
    background-color: #0000;
}

#profile--simphate a:not(a[href="/@Vaporeon/voted/posts"]):not(a[href="/@Vaporeon/blocking"]):after,
#profile-mobile--simphate a:not(a[href="/@Vaporeon/voted/posts"]):after {
    content: "Â  |" !important;
}

#profile--simphate a:hover,
#profile-mobile--simphate a:hover {
    text-decoration: none !important;
}

.jumbotron-guild {
    margin: 50px 50px 80px 50px !important;
    border: solid #fa0 5px;
    border-radius: 20px !important;
    background-image: url(https://pomf2.lain.la/f/3ssxm1ml.gif) !important;
    box-shadow: 0px 0px 30px #fa0 !important;
    padding-top: 20px !important;
}

#profile--awards,
#profile--groups {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 50% !important;
    border: solid #fa0 3px !important
}

.justify-content-between,
.d-flex.align-items-center.mt-1.mb-2 {
    justify-content: center !important;
}

.jumbotron * {
    text-align: center !important;
}

p.text-uppercase.my-0,
p.text-uppercase.my-0.pb-1 {
    font-size: 0px !important;
    text-align: center !important
}

ul#content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.no-gutters,
ul.pagination.pagination-sm.mb-0.pl-1.mt-4 *,
.pronouns {
    border: none !important;
}

.col {
    margin-top: 20px !important;
}

.srd,
span.notif-chats.notif-count.ml-1,
.notif-count,
.patron {
    background-color: #fa0 !important;
    color: #fff !important;
}

#header--username {
    color: #fff !important;
}

p.text-uppercase.my-0:after {
    color: #fa0 !important;
    content: "Awawds UwU" !important;
    font-size: 20px !important;
    text-transform: none !important;
}

p.text-uppercase.my-0.pb-1:after {
    color: #fa0 !important;
    font-size: 20px !important;
    content: "Gwoupies!" !important;
    text-transform: none !important;
}

.comment-anchor {
    padding: 1px;
    border: solid #fa0;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #0006 !important;
}

span.comment-collapse-line,
button,
.btn,
.form-control,
hr,
.reports {
    border-color: #fa0 !important;
}

body>.container {
    background-color: #0009 !important;
}

#navbar {
    background-color: #0009 !important;
    padding: 5px !important;
}

ul#content .nav-link {
    font-size: 20px !important;
}

blockquote {
    background-color: #0005 !important;
    border-left-color: #fa0 !important;
}

.ml-3,
.mx-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container-fluid.nobackground {
    padding: 0px !important;
}

html {
    animation: rainbow 6s linear infinite normal !important;
    color: #fa0 !important;
}

@keyframes rainbow {
    0% {
        filter: hue-rotate(0)
    }

    100% {
        filter: hue-rotate(360deg)
    }
}

span#profile--follows-you {
    position: absolute !important;
    top: 220px !important;
    font-size: 19px !important;
    background: #0000 !important;
    color: #fa0 !important;
}

span#profile-mobile--follows-you {
    margin-right: auto !important;
    margin-left: auto !important;
    position: absolute !important;
    left: 47% !important;
    right: 50% !important;
    display: flex !important;
    justify-content: center !important;
    top: -15px !important;
    font-size: 20px !important;
    background: #0000 !important;
    color: #fa0 !important;
}

span.d-inline-block.mx-1.font-weight-bolder {
    filter: sepia(100) saturate(20) !important;
    text-decoration: underline !important;
}

a.nav-link.active {
    border-bottom-color: #fa0 !important;
}

.sidebar-wpd--holes a {
    box-shadow: 0 0 0 1px #fa0 !important;
}

ul.navbar-nav.ml-auto.d-flex.d-md-none.mt-3 {
    background: #0009 !important;
}

    {
    MOBILE MODE
}

@media screen and (max-width:768px) {

    .flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:before,
    .flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:after {
        display: none !important;
    }

    .form-text.text-small.p-0.m-0:before {
        content: url(/e/marseyexciteddance.webp) !important;
        position: absolute !important;
        top: 120px !important;
        scale: 1 !important;
        filter: brightness(160%) hue-rotate(30deg) !important;
        left: calc(50vw - 100px) !important;
    }

    span#profile--verified:hover::after,
    span#profile-mobile--verified:hover::after {
        top: 20px;
    }

    code>a {
        font-size: 10px !important;
    }
}

    {
    END MOBILE
}

div#header--dropdown-menu {
    border: solid #fa0 2px !important;
    width: fit-content;
    background: #0009 !important;
    position: fixed !important;
    top: 80px !important;
    left: auto !important;
    right: 0px !important;
}

button.dropdown-item {
    background: #0000 !important;
}

div#mobile-bottom-navigation-bar {
    background: #0009 !important;
}

div#profile-mobile--awards,
div#profile-mobile--groups {
    border: solid 3px #fa0 !important;
}

.dropdown-item,
code a,
button.btn.btn-primary {
    transition-duration: 0.3s;
}

.dropdown-item:hover {
    background: #0003 !important;
    transform: scale(1.1);
    text-shadow: 0px 0px 10px;
    transition-duration: 0.3s;
    transform-origin: center !important;
}

code a:hover {
    text-decoration: none !important;
    box-shadow: 0px 0px 10px #fa0, inset 0px 0px 10px #fa0 !important;
    transition-duration: 0.3s;
}

button.btn.btn-primary:hover {
    box-shadow: 0px 0px 10px #fa0, inset 0px 0px 10px #fa0 !important;
    transition-duration: 0.3s !important;
}

.navbar-light,
.navbar .container-fluid,
#mobile-bottom-navigation-bar {
    background: #0000 !important;
}

.tooltip-inner {
    background: #0009 !important;
    color: #fff !important;
    -webkit-text-stroke: #fff 0.05px !important;
    padding: 5px !important;
}

span.notif-chats.notif-count.ml-1 {
    -webkit-text-stroke: 0.1px #fff !important;
    color: #fff !important;
}

.popover-user-profile {
    background: #000 !important;
    border: solid #fa0 3px !important;
}

.popover-user-profile span.ml-3 {
    margin-right: 10px !important;
    margin-left: 10px !important;
}

.markdown.border.my-2.p-3.rounded {
    border: #fa0 3px solid !important;
    color: #fa0 !important;
    background: #0000 !important;
}

.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:before,
.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:after {
    content: url(/e/marseyexciteddance.webp);
    position: absolute;
}

.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:before {
    left: calc(50vw - 400px) !important;
    top: -83px !important;
    scale: 1.2 !important;
    filter: brightness(160%) hue-rotate(30deg) !important;
}

.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center:after {
    right: calc(50vw - 400px) !important;
    top: -83px !important;
    scale: -1.2 1.2 !important;
    filter: brightness(160%) hue-rotate(30deg) !important;
}

div#navbar .container-fluid button,
div#mobile-bottom-navigation-bar>button,
.list-inline-item.mr-3.btn {
    border: none !important;
}

.flex-row.box-shadow-bottom.d-flex.justify-content-center.justify-content-md-between.align-items-center * {
    background-color: #0000 !important;
    border: none !important;
}

div#sidebar-content:after {
    content: "Vaporeon was here!";
    font-size: 20px;
    display: flex;
    justify-content: center;
}

::-webkit-scrollbar {
    width: 0 !important;
}

.modal-content {
    background-color: #0009 !important;
    border: solid 3px #fa0 !important;
    border-radius: 20px !important;
}

.modal-content .format {
    margin: 0 !important;
}

div.actionbtns:has(a[href="/log?target_id=261437"]) {
    display: none !important;
    /* remove da modlogs */
}

div.actionbtns {
    margin: 0 !important;
    padding: 0 !important;
}

div#profile--pfp {
    width: 100% !important;
    height: min-content !important;
    position: absolute;
    display: flex;
    justify-content: center !important;
    filter: sepia(1) saturate(150%);
}

div#profile-mobile--pfp {
    padding-top: 75px !important;
    padding-bottom: 10px !important;
    filter: sepia(1) saturate(150%);
}

#profilestuff {
    padding-top: 130px !important;
    margin-left: 0 !important;
}

body {
    background: url("https://i.watchpeopledie.tv/images/1721029619248681.webp") center center fixed;
    background-size: auto;
}