My current custom profile css

Feel free to take my current css, modify it, do whatever! I just hope this encourages more people to experiment with it :3

copy the following text and paste it into the custom css section when editing your profile:

:root {

    --bg: #060005;

    --surface: #120008;

    --border: #7a0020;

    --accent1: #c0002a;

    --accent2: #e03060;

    --text: #f0d0d8;

    --text-muted: #7a4050;

}



@keyframes bloodpulse {

    0% { background-color: #0f0008; }

    50% { background-color: #060005; }

    100% { background-color: #0f0008; }

}



@keyframes redglow {

    0% { border-color: #7a0020; box-shadow: 0 0 6px #7a002066, 0 0 14px #3a001044; }

    50% { border-color: #c0002a; box-shadow: 0 0 10px #c0002088, 0 0 22px #7a002055; }

    100% { border-color: #7a0020; box-shadow: 0 0 6px #7a002066, 0 0 14px #3a001044; }

}



@keyframes eyeglow {

    0% { text-shadow: 0 0 8px #9a0025bb, 0 0 20px #6a001544; }

    50% { text-shadow: 0 0 14px #c0002acc, 0 0 30px #8a002066; }

    100% { text-shadow: 0 0 8px #9a0025bb, 0 0 20px #6a001544; }

}



@keyframes float {

    0% { transform: translateY(0px); }

    50% { transform: translateY(-5px); }

    100% { transform: translateY(0px); }

}



@keyframes flicker {

    0%, 95%, 100% { opacity: 1; }

    96% { opacity: 0.92; }

    97% { opacity: 1; }

    98% { opacity: 0.88; }

    99% { opacity: 1; }

}



body {

    animation: bloodpulse 5s ease-in-out infinite;

    background-image: 

        repeating-linear-gradient(

            0deg,

            transparent,

            transparent 3px,

            rgba(150, 0, 20, 0.025) 3px,

            rgba(150, 0, 20, 0.025) 4px

        );

}



.navbar {

    animation: flicker 10s infinite;

    background: linear-gradient(90deg, #060005, #120008, #060005) !important;

    border-bottom: 2px solid #7a0020 !important;

    box-shadow: 0 2px 16px #5a001599;

}



.footer {

    background: linear-gradient(90deg, #060005, #120008, #060005) !important;

    border-top: 1px solid #7a0020 !important;

}



.card {

    animation: redglow 4s ease-in-out infinite;

    background: linear-gradient(135deg, #120008 0%, #080005 100%) !important;

}



h1, h2, h3 {

    animation: eyeglow 4s ease-in-out infinite;

    letter-spacing: 2px;

}



.btn {

    border-color: #7a0020 !important;

    color: #e03060 !important;

    background: transparent !important;

    transition: all 0.2s !important;

}



.btn:hover {

    background: #7a002033 !important;

    border-color: #c0002a !important;

    color: #f0d0d8 !important;

    transform: scale(1.03);

    box-shadow: 0 0 10px #c0002066;

}



img[style*="border-radius:50%"] {

    animation: float 4s ease-in-out infinite;

    box-shadow: 0 0 14px #9a002077, 0 0 28px #5a001044;

}



a {

    color: #e03060 !important;

    -webkit-text-fill-color: #e03060 !important;

}



a:hover {

    color: #f08090 !important;

    -webkit-text-fill-color: #f08090 !important;

    text-shadow: 0 0 6px #c0002066;

}



hr {

    border-image: linear-gradient(90deg, transparent, #7a0020, #c0002a, #7a0020, transparent) 1;

}



input, textarea, select {

    background: #0f0007 !important;

    border-color: #7a0020 !important;

    color: #f0d0d8 !important;

}