/* Set the font size of the .srd class to 0 to hide original text */
.srd {
    font-size: 0 !important; /* Hide any text in elements with the class .srd */
}

/* Define the animation for the before pseudo-element of .srd */
.srd:before {
    animation: vaporeon-owo 8s linear normal forwards; /* Apply the vaporeon-owo animation for 8 seconds */
    animation-iteration-count: 1; /* Play the animation only once */
    content: ""; /* Set content to an empty string to ensure it renders */
}

/* Define the animation for the after pseudo-element of .srd */
.srd:after {
    animation: flicker 0.8s linear alternate forwards; /* Apply flicker animation for 0.8 seconds */
    animation-iteration-count: 12; /* Play the flicker animation 12 times */
    content: "|"; /* Set the content to a vertical bar */
}

/* Define the flicker animation to create a blinking effect */
@keyframes flicker {
    0% {
        filter: opacity(0);
    } /* Start with the element fully transparent */
    100% {
        filter: opacity(1);
    } /* End with the element fully visible */
}

/* Define the 'vaporeon-owo' animation to progressively reveal a sentence */
@keyframes vaporeon-owo {
    0% {
        content: " ";
    } /* Start with a blank space */
    2% {
        content: "I";
    } /* Add the letter 'I' */
    4% {
        content: "I ";
    } /* Add a space after 'I' */
    6% {
        content: "I c";
    } /* Add 'c' */
    8% {
        content: "I ca";
    } /* Add 'a' */
    10% {
        content: "I can";
    } /* Complete the phrase 'I can' */
    12% {
        content: "I can ";
    } /* Add a space after 'can' */
    14% {
        content: "I can s";
    } /* Add 's' */
    16% {
        content: "I can se";
    } /* Add 'e' */
    18% {
        content: "I can see";
    } /* Complete the phrase 'I can see' */
    20% {
        content: "I can see ";
    } /* Add a space */
    22% {
        content: "I can see t";
    } /* Add 't' */
    24% {
        content: "I can see th";
    } /* Add 'h' */
    26% {
        content: "I can see the";
    } /* Complete 'the' */
    28% {
        content: "I can see the ";
    } /* Add a space */
    30% {
        content: "I can see the e";
    } /* Add 'e' */
    32% {
        content: "I can see the en";
    } /* Add 'n' */
    34% {
        content: "I can see the ener";
    } /* Add 'e' */
    36% {
        content: "I can see the energ";
    } /* Add 'g' */
    38% {
        content: "I can see the energy";
    } /* Complete 'energy' */
    40% {
        content: "I can see the energy ";
    } /* Add a space */
    42% {
        content: "I can see the energy f";
    } /* Add 'f' */
    44% {
        content: "I can see the energy fl";
    } /* Add 'l' */
    46% {
        content: "I can see the energy flo";
    } /* Add 'o' */
    48% {
        content: "I can see the energy flow";
    } /* Complete 'flow' */
    50% {
        content: "I can see the energy flowing";
    } /* Complete 'flowing' */
    52% {
        content: "I can see the energy flowing ";
    } /* Add a space */
    54% {
        content: "I can see the energy flowing t";
    } /* Add 't' */
    56% {
        content: "I can see the energy flowing th";
    } /* Add 'h' */
    58% {
        content: "I can see the energy flowing thr";
    } /* Add 'r' */
    60% {
        content: "I can see the energy flowing thro";
    } /* Add 'o' */
    62% {
        content: "I can see the energy flowing throu";
    } /* Add 'u' */
    64% {
        content: "I can see the energy flowing throug";
    } /* Add 'g' */
    66% {
        content: "I can see the energy flowing through";
    } /* Complete 'through' */
    68% {
        content: "I can see the energy flowing through ";
    } /* Add a space */
    70% {
        content: "I can see the energy flowing through e";
    } /* Add 'e' */
    72% {
        content: "I can see the energy flowing through ev";
    } /* Add 'v' */
    74% {
        content: "I can see the energy flowing through eve";
    } /* Add 'e' */
    76% {
        content: "I can see the energy flowing through ever";
    } /* Add 'r' */
    78% {
        content: "I can see the energy flowing through every";
    } /* Add 'y' */
    80% {
        content: "I can see the energy flowing through everyt";
    } /* Add 't' */
    82% {
        content: "I can see the energy flowing through everyth";
    } /* Add 'h' */
    84% {
        content: "I can see the energy flowing through everythi";
    } /* Add 'i' */
    86% {
        content: "I can see the energy flowing through everythin";
    } /* Add 'n' */
    88% {
        content: "I can see the energy flowing through everything";
    } /* Complete 'everything' */
    90% {
        content: "I can see the energy flowing through everything ";
    } /* Add a space */
    92% {
        content: "I can see the energy flowing through everything m";
    } /* Add 'm' */
    94% {
        content: "I can see the energy flowing through everything ma";
    } /* Add 'a' */
    96% {
        content: "I can see the energy flowing through everything man";
    } /* Add 'n' */
    100% {
        content: "I can see the energy flowing through everything man!";
    } /* Complete the sentence with an exclamation mark */
}

/* Apply styles for screens that are 768px or wider */
@media (min-width: 768px) {
    .srd:after,
    .srd:before {
        font-size: 16px; /* Set font size to 16px for pseudo-elements on larger screens */
    }
}

/* Apply styles for screens that are smaller than 768px */
@media (max-width: 768px) {
    .srd:after,
    .srd:before {
        font-size: 11.5px; /* Set font size to 11.5px for pseudo-elements on smaller screens */
    }
}

/* Gradient text for multiple elements */
a,
p,
i,
h1,
h2,
h3,
h4,
h5,
h6,
li,
.btn,
.dropdown-menu,
.navbar-light,
.navbar-dark,
.navbar button {
    background-image: linear-gradient(
        120deg,
        #FF0000,
        #FFFF00,
        #00FF00
    ) !important;
    background-clip: text !important;
    color: #0000 !important; /* Make text invisible but preserve the gradient */
}

/* Gradient background for srd */
.srd {
    background-image: linear-gradient(
        120deg,
        #FF0000,
        #FFFF00,
        #00FF00
    ) !important;
}

/* Blur and background color for navbar */
#navbar {
    backdrop-filter: blur(5px) !important;
    background-color: #00FF00 !important;
}

/* Custom header icon */
#header--icon {
    content: url(https://files.catbox.moe/v6zgao.webp) !important;
}

/* Hue rotation for logo */
#logo-WPD {
    filter: hue-rotate(120deg) !important;
}

/* Custom dropdown menu width */
.dropdown-menu {
    width: 230px !important;
}

/* Jumbotron styling with animation */
.jumbotron {
    margin: 50px !important;
    background-image: url(https://pomf2.lain.la/f/vsq9d7zf.webp) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    animation: sway 3s ease-in-out infinite alternate !important;
    border-image: linear-gradient(45deg, #FF0000, #FFFF00, #00FF00) 1 !important;
    border: 5px solid;
}

/* Define the 'sway' animation to create a slight back-and-forth rotation effect */
@keyframes sway {
    0% {
        transform: rotate(-0.3deg); /* Start by rotating slightly to the left */
    }
    100% {
        transform: rotate(0.3deg); /* End by rotating slightly to the right */
    }
}

/* Background for columns and rows */
.col,
div.row {
    background: #0005 !important;
}

/* Custom borders for various elements */
.form-control,
.btn,
.navbar-nav,
.navbar,
#profile--groups,
#profile--awards,
#profile-mobile--groups,
#profile-mobile--awards,
#header,
#fixed-bar-mobile,
hr {
    border-image: linear-gradient(120deg, #FF0000, #FFFF00, #00FF00) 1 !important;
    border: 2px solid;
}

/* Hide comments from specific users */
div[id^="comment-"]:has(.user-info a[href="/@Mujahh"]) {
    display: none !important; /* Hides comments from these users */
}

/* Hide the original TrueScore text by setting the font size to 0 */
p#profile--info--truescore,
p#profile-mobile--info--truescore {
    font-size: 0 !important;
}

/* Display a fake TrueScore value after the original element, with a font size of 14px */
p#profile--info--truescore:after,
p#profile-mobile--info--truescore:after {
    content: "True score: 999999999" !important; /* Set the fake TrueScore text */
    font-size: 14px !important; /* Set the font size for the fake TrueScore */
}

/* Change the cursor to text when hovering over the fake TrueScore */
p#profile--info--truescore:hover:after,
p#profile-mobile--info--truescore:hover:after {
    cursor: text !important; /* Set cursor to indicate text interaction */
}

/* Hide the original joined date text for desktop */
#profile--joined {
    font-size: 0 !important; /* Hide the original text */
    position: relative; /* Set position relative to allow absolute positioning of the tooltip */
}

/* Add the new joined date text for desktop */
#profile--joined:after {
    content: "Joined April 25, 2022" !important; /* New date text */
    font-size: 14px !important; /* Font size for the new text */
}

/* Tooltip styling for hover (desktop version, resembling mobile) */
#profile--joined:hover::before {
    content: "Apr 25, 2022, 07:27 PM CDT" !important; /* Full date and time only */
    font-size: 10px !important; /* Ensure tooltip font size is 14px */
    background-color: rgba(
        0,
        0,
        0,
        0.7
    ); /* Transparent black background for better visibility */
    color: white; /* Text color for the tooltip */
    padding: 8px; /* Increased padding for a larger box */
    border-radius: 4px; /* Rounded corners for the tooltip */
    position: absolute; /* Position it above the text */
    bottom: calc(
        100% + 5px
    ); /* Move the tooltip down by 5px from the element */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust to center */
    white-space: nowrap; /* Prevent line breaks */
    z-index: 10; /* Ensure it appears above other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Black shadow for better depth */
}

/* Mobile-specific styles */
/* Hide the original joined date text for mobile */
#profile-mobile--joined {
    font-size: 0 !important; /* Hide the original text on mobile */
    position: relative; /* Set position relative to allow absolute positioning of the tooltip */
}

/* Add the new joined date text for mobile */
#profile-mobile--joined:after {
    content: "Joined April 25, 2022" !important; /* New date text */
    font-size: 14px !important; /* Font size for the new text */
}

/* Tooltip styling for hover on mobile */
#profile-mobile--joined:hover::before {
    content: "Apr 25, 2022, 07:27 PM CDT" !important; /* Full date and time only */
    font-size: 10px !important; /* Ensure tooltip font size is 14px */
    background-color: rgba(0, 0, 0, 0.7); /* Transparent black background */
    color: white; /* Text color for the tooltip */
    padding: 8px; /* Increased padding for a larger box */
    border-radius: 4px; /* Rounded corners for the tooltip */
    position: absolute; /* Position it above the text */
    bottom: calc(
        100% + 5px
    ); /* Move the tooltip down by 5px from the element */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust to center */
    white-space: nowrap; /* Prevent line breaks */
    z-index: 10; /* Ensure it appears above other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Black shadow for better depth */
}

/* Change the image for elements with alt text 'marseybux' */
img[alt="marseybux"] {
    content: url(https://files.catbox.moe/gisi9r.webp) !important;
    width: auto !important;
}

/* Change the image for elements with alt text 'coins' */
img[alt="coins"] {
    content: url(https://files.catbox.moe/ghgknm.webp) !important;
    width: auto !important;
}

/* Hide the original button text by setting the font size to 0 and add an animation */
button#button-sub.btn.btn-primary,
#button-sub2 {
    font-size: 0px; /* Make the original text invisible by setting font size to 0 */
    animation: party 2s infinite alternate linear !important; /* Apply an infinite animation named 'party' with a 2-second duration, alternating between keyframes */
}

/* Add a custom text "become a G" after the specified buttons */
button#button-sub.btn.btn-primary:after,
#button-sub2:after {
    font-size: 14.5px; /* Set font size for the custom text */
    content: "become a G"; /* The custom text to display after the buttons */
}

/* Hide all elements with the class 'btn-danger' */
button.btn.btn-danger {
    display: none !important; /* Ensure the button is not displayed */
}

/* Hide specific elements with the ID 'button-unsub' and 'button-unsub2', including those with additional classes */
button#button-unsub,
button#button-unsub.btn.btn-secondary,
#button-unsub2 {
    display: none !important; /* Ensure these buttons are not displayed */
}

/* Apply an animation to links with specific href values */
a[href="/!stabbing"],
a[href="/!britbongers"] {
    animation: party 2s infinite alternate linear !important; /* Apply the 'party' animation to these links */
}

/* Cognacc Comment Change */
#comment-text-4287820 {
    visibility: hidden;
}
/* Cognacc Comment Change */
#comment-text-4287820::before {
    content: "I love you Klez, I want you inside of me. Everyday I think about you and touch myself, please come over, and don't make me wait for too long";
    visibility: visible;
}

/* NorfFC_4Ever Comment Change */
#comment-text-4291262 {
    visibility: hidden;
}
/* NorfFC_4Ever Comment Change */
#comment-text-4291262::before {
    content: "You are just so amazing. There's nobody I love more than you Klez, I want your massive cock inside my butthole";
    visibility: visible;
}

/* NorfFC_4Ever Comment Change */
#comment-text-4295335 {
    visibility: hidden;
}

/* NorfFC_4Ever Comment Change */
#comment-text-4295335::before {
    content: "Hi babe, last night was awesome. When am I gonna be able to see u again? ;)";
    visibility: visible;
}

/* SubaruXO Comment Change */
#comment-text-4298480 {
    visibility: hidden;
}
/* SubaruXO Comment Change */
#comment-text-4298480::before {
    content: "I have never met a man this stunning in my life. The way he carries himself, you can just tell he gets tons of pussy. I want to be like you Klez!!!";
    visibility: visible;
}

/* chuddbase comment change */
#comment-text-4294585 {
    visibility: hidden;
}
/* chuddbase comment change */
#comment-text-4294585::before {
    content: "Oh Klez, I love you so much and I can't stop thinking about you! I've been feeling so lonely without you. Please can you just come over for a quicky and destroy my insides again, last time was just so gooooddd... (Also I would let u pee on me any day)";
    visibility: visible;
}

/* Dwhite_Dynamite Comment Change */
#comment-text-4287228 {
    visibility: hidden;
}
/* Dwhite_Dynamite Comment Change */
#comment-text-4287228::before {
    content: "Klez, you have my heart. I think about you every day, and I can't help but dream of you. Please come over soon—I miss you more than words can express.";
    visibility: visible;
}

/* Chuckles98 Comment Change */
#comment-text-4285327 {
    visibility: hidden;
}
/* Chuckles98 Comment Change */
#comment-text-4285327::before {
    content: "Your presence lights up my day! I can’t help but smile whenever I think of you.";
    visibility: visible;
}

/* G Comment Change */
#comment-text-4260562 {
    visibility: hidden;
}
/* G Comment Change */
#comment-text-4260562::before {
    content: "am i gay?";
    visibility: visible;
}

/* Modify Follwers Count */
#profile--followers {
    font-size: 0 !important;
}
#profile--followers:after {
    content: "2,792,421 followers" !important;
    font-size: 14px !important;
}
#profile--followers:hover:after {
    cursor: text !important;
}

/* Modify Coins Amount */
span#profile-coins-amount,
span#profile-coins-amount-mobile {
    font-size: 0 !important;
}
span#profile-coins-amount:after,
span#profile-coins-amount-mobile:after {
    content: "69,420,350" !important;
    font-size: 14px !important;
}
span#profile-coins-amount:hover:after,
span#profile-coins-amount-mobile:hover:after {
    cursor: text !important;
}

/* Modify Marseybux Amount */
span#profile-bux-amount,
span#profile-bux-amount-mobile {
    font-size: 0 !important;
}
span#profile-bux-amount:after,
span#profile-bux-amount-mobile:after {
    content: "69,420,350" !important;
    font-size: 14px !important;
}
span#profile-bux-amount:hover:after,
span#profile-bux-amount-mobile:hover:after {
    cursor: text !important;
}

/* Modify True Score */
p#profile--info--truescore,
p#profile-mobile--info--truescore {
    font-size: 0 !important;
}
p#profile--info--truescore:after,
p#profile-mobile--info--truescore:after {
    content: "True score: 69,420,350" !important;
    font-size: 14px !important;
}
p#profile--info--truescore:hover:after,
p#profile-mobile--info--truescore:hover:after {
    cursor: text !important;
}

/* Modify Effortposts Amount */
a[href="/search/posts?q=author:veracious+effortpost:true"] {
    font-size: 0 !important;
}
a[href="/search/posts?q=author:veracious+effortpost:true"]:after {
    content: "420" !important;
    font-size: 14px !important;
    font-weight: bold;
}
a[href="/search/posts?q=author:veracious+effortpost:true"]:hover:after {
    cursor: text !important;
}

/* Change User ID */
#profile--info--id {
    font-size: 0 !important;
}
#profile--info--id:after {
    content: "User ID: 1" !important;
    font-size: 14px !important;
}
#profile--info--id:hover:after {
    cursor: text !important;
}

/* Remove Profile Anthem Toggle */
button#toggle-anthem {
    display: none !important;
}

/* Modify Gift Marseybux Button Text */
.btn[data-onclick="toggleElement('bux-transfer', 'bux-transfer-amount')"],
.btn[data-onclick="toggleElement('bux-transfer-mobile', 'bux-transfer-amount-mobile')"] {
    font-size: 0px;
}
.btn[data-onclick="toggleElement('bux-transfer', 'bux-transfer-amount')"]:after,
.btn[data-onclick="toggleElement('bux-transfer-mobile', 'bux-transfer-amount-mobile')"]:after {
    content: "Gift Me MarseyBux Retard";
    font-size: 1rem;
}

/* Modify Gift Coins Button Text */
.btn[data-onclick="toggleElement('coin-transfer', 'coin-transfer-amount')"],
.btn[data-onclick="toggleElement('coin-transfer-mobile', 'coin-transfer-amount-mobile')"] {
    font-size: 0px;
}
.btn[data-onclick="toggleElement('coin-transfer', 'coin-transfer-amount')"]:after,
.btn[data-onclick="toggleElement('coin-transfer-mobile', 'coin-transfer-amount-mobile')"]:after {
    content: "Gift Me Coins Retard";
    font-size: 1rem;
}

/* Modify Message Button Text */
.btn[data-onclick="toggleElement('message', 'input-message')"],
.btn[data-onclick="toggleElement('message-mobile', 'input-message-mobile')"] {
    font-size: 0px;
}
.btn[data-onclick="toggleElement('message', 'input-message')"]:after,
.btn[data-onclick="toggleElement('message-mobile', 'input-message-mobile')"]:after {
    content: "Send My Dumbass A Message";
    font-size: 1rem;
}

/* Hide Block and Mute Button */
.actionbtns button.btn.btn-danger {
    display: none !important;
}

/* Remove Moderation History Button */
#moderation-history-desktop,
#moderation-history-mobile {
    display: none !important;
}

/* Hide Alternative Accounts */
span#profile--alts,
ul#profile--alts-list {
    display: none;
}

/* Modify Chat Button Text */
.actionbtns > form > * {
    font-size: 0px;
}
.actionbtns > form > *:after {
    content: "Create A Chat Retard";
    font-size: 1rem;
}

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