Фулл Nee Extra.Less Bless Russia (AbsaOper)

[AbsaOper]

Сливаю для вас фулл новые баннеры + префиксы Блесс Раши (там даже есть светящиеся иконки для Навигации)

.vlad,
.glavsled,
.zamglavsled,
.lider,
.kur,
.rykvod,
.pomtech,
.server2a,
.server3l,
.server3a,
.server4a,
.server2l,
.ban,
.specadm,
.moroz,
.modr,
.vklad,
.sliva,
.legend,
.gltest,
.sist,
.mlmoder,
.stmoder,
.zgta,
.techadm,
.adm,
.stadm,
.razrab,
.tpshka,
.tester,
.forum,
.glavadm,
.kk,
.dir,
.gm,
.server1a,
.server1l,
.zga,
.prmanager {
    color: #fff;
    border: 1.2px solid;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all .25s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-height: 28px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    margin: 0 2px 3px 0;
    line-height: 1.2
}

.userBanner {
    margin: 0 3px 4px 0 !important
}

.server4a,
.tpshka,
.tester,
.kk,
.gltest {
    color: #000;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4)
}

.vlad::before,
.glavsled::before,
.zamglavsled::before,
.lider::before,
.kur::before,
.rykvod::before,
.pomtech::before,
.server2a::before,
.server3l::before,
.server3a::before,
.server4a::before,
.server2l::before,
.ban::before,
.specadm::before,
.moroz::before,
.modr::before,
.vklad::before,
.sliva::before,
.legend::before,
.gltest::before,
.sist::before,
.mlmoder::before,
.stmoder::before,
.zgta::before,
.techadm::before,
.adm::before,
.stadm::before,
.razrab::before,
.tpshka::before,
.tester::before,
.forum::before,
.glavadm::before,
.kk::before,
.dir::before,
.gm::before,
.server1a::before,
.server1l::before,
.zga::before,
.prmanager::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 35%;
    right: 35%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.7) 70%, transparent 100%);
    border-radius: 1px;
    opacity: 0.7
}

.server4a::before,
.tpshka::before,
.tester::before,
.kk::before,
.gltest::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, transparent 100%)
}

.vlad::after,
.glavsled::after,
.zamglavsled::after,
.lider::after,
.kur::after,
.rykvod::after,
.pomtech::after,
.server2a::after,
.server3l::after,
.server3a::after,
.server4a::after,
.server2l::after,
.ban::after,
.specadm::after,
.moroz::after,
.modr::after,
.vklad::after,
.sliva::after,
.legend::after,
.gltest::after,
.sist::after,
.mlmoder::after,
.stmoder::after,
.zgta::after,
.techadm::after,
.adm::after,
.stadm::after,
.razrab::after,
.tpshka::after,
.tester::after,
.forum::after,
.glavadm::after,
.kk::after,
.dir::after,
.gm::after,
.server1a::after,
.server1l::after,
.zga::after,
.prmanager::after {
    margin-left: 4px;
    text-shadow: 0 0 3px currentColor;
    font-size: 0.75em;
    animation: subtleTwinkle 2.5s ease-in-out infinite
}

@keyframes subtleTwinkle {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

.vlad:hover,
.glavsled:hover,
.zamglavsled:hover,
.lider:hover,
.kur:hover,
.rykvod:hover,
.pomtech:hover,
.server2a:hover,
.server3l:hover,
.server3a:hover,
.server4a:hover,
.server2l:hover,
.ban:hover,
.specadm:hover,
.moroz:hover,
.modr:hover,
.vklad:hover,
.sliva:hover,
.legend:hover,
.gltest:hover,
.sist:hover,
.mlmoder:hover,
.stmoder:hover,
.zgta:hover,
.techadm:hover,
.adm:hover,
.stadm:hover,
.razrab:hover,
.tpshka:hover,
.tester:hover,
.forum:hover,
.glavadm:hover,
.kk:hover,
.dir:hover,
.gm:hover,
.server1a:hover,
.server1l:hover,
.zga:hover,
.prmanager:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px currentColor, inset 0 1px 0 rgba(255, 255, 255, 0.4);
    filter: brightness(1.08);
    z-index: 1
}

.vlad {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.vlad::after {
    content: '👑';
    color: #FFD700
}

.glavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.glavsled::after {
    content: '🔍';
    color: #FFFFFF
}

.zamglavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.zamglavsled::after {
    content: '🔎';
    color: #FFD700
}

.lider {
    background: linear-gradient(135deg, #ffa500, #ffc966);
    border-color: #E69500
}

.lider::after {
    content: '👑';
    color: #FF5500
}

.kur {
    background: linear-gradient(135deg, #d465f1, #e891ff);
    border-color: #C050E0
}

.kur::after {
    content: '📦';
    color: #FFFFFF
}

.rykvod {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800
}

.rykvod::after {
    content: '🎖️';
    color: #FF6600
}

.pomtech {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.pomtech::after {
    content: '🔩';
    color: #FFFFFF
}

.server2a {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2a::after {
    content: '🟢';
    color: #00FF00
}

.server3l {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3l::after {
    content: '🔷';
    color: #00CCFF
}

.server3a {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3a::after {
    content: '🔶';
    color: #FF9900
}

.server4a {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800;
    border-radius: 25px
}

.server4a::after {
    content: '💛';
    color: #FF6600
}

.server2l {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2l::after {
    content: '🟩';
    color: #00FF00
}

.ban {
    background: linear-gradient(135deg, #212428, #3a3f45);
    border-color: #1A1D21
}

.ban::after {
    content: '🚫';
    color: #FF3333
}

.specadm {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.specadm::after {
    content: '🛡️';
    color: #FFD700
}

.moroz {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.moroz::after {
    content: '❄️';
    color: #00CCFF
}

.modr {
    background: linear-gradient(135deg, #abcdef, #cde6ff);
    border-color: #9ABCDE
}

.modr::after {
    content: '🛡️';
    color: #FFFFFF
}

.vklad {
    background: linear-gradient(135deg, #66f, #99f);
    border-color: #33f
}

.vklad::after {
    content: '💰';
    color: #FFD700
}

.sliva {
    background: linear-gradient(135deg, #ff5d76, #ff8da1);
    border-color: #FF4466
}

.sliva::after {
    content: '💧';
    color: #00BFFF
}

.legend {
    background: linear-gradient(135deg, #32cd32, #6f6);
    border-color: #28B428
}

.legend::after {
    content: '👑';
    color: #FFD700
}

.gltest {
    background: linear-gradient(135deg, #efef12, #ff6);
    border-color: #DFDF10
}

.gltest::after {
    content: '🧪';
    color: #FF4444
}

.sist {
    background: linear-gradient(135deg, #57cdd6, #7de8f0);
    border-color: #45BCC5
}

.sist::after {
    content: '⚙️';
    color: #FFFFFF
}

.mlmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.mlmoder::after {
    content: '🤖';
    color: #4A90E2
}

.stmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.stmoder::after {
    content: '📊';
    color: #4A90E2
}

.zgta {
    background: linear-gradient(135deg, #ff74a8, #ffa6cc);
    border-color: #FF5C99
}

.zgta::after {
    content: '🎀';
    color: #FFFFFF
}

.techadm {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.techadm::after {
    content: '🔧';
    color: #FFD700
}

.adm {
    background: linear-gradient(135deg, #fc6, #ffe0a3);
    border-color: #E6B850
}

.adm::after {
    content: '👨‍💼';
    color: #FFFFFF
}

.stadm {
    background: linear-gradient(135deg, #333aff, #666cff);
    border-color: #1F26E6
}

.stadm::after {
    content: '⭐';
    color: #FFD700
}

.razrab {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.razrab::after {
    content: '💻';
    color: #00CCFF
}

.tpshka {
    background: linear-gradient(135deg, #deb887, #f5d4aa);
    border-color: #C9A87A
}

.tpshka::after {
    content: '🛠️';
    color: #8B4513
}

.tester {
    background: linear-gradient(135deg, #8287c1, #a5a9d6);
    border-color: #6A6FB0
}

.tester::after {
    content: '🧪';
    color: #4A4F9E
}

.forum {
    background: linear-gradient(135deg, #a200ff, #c266ff);
    border-color: #8C00E6
}

.forum::after {
    content: '💬';
    color: #E6CCFF
}

.glavadm {
    background: linear-gradient(135deg, #c00, #f33);
    border-color: #B30000
}

.glavadm::after {
    content: '👑';
    color: gold
}

.kk {
    background: linear-gradient(135deg, #88ecdf, #b2f5ea);
    border-color: #66D9C7
}

.kk::after {
    content: '⚡';
    color: #0077cc
}

.dir {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.dir::after {
    content: '🎯';
    color: #ffcc00
}

.gm {
    background: linear-gradient(135deg, #09f, #3bf);
    border-color: #0077cc
}

.gm::after {
    content: '🛡️';
    color: #ffff00
}

.server1a {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1a::after {
    content: '🔴';
    color: #ffffff
}

.server1l {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1l::after {
    content: '🔺';
    color: #ffffff
}

.zga {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #ff0c0c
}

.zga::after {
    content: '✅';
    color: #00ff00
}

.prmanager {
    background: linear-gradient(135deg, #f07b14, #ff9e40);
    border-color: #D66B10
}

.prmanager::after {
    content: '📢';
    color: #FFD700
}

.glavadm,
.dir,
.prmanager,
.techadm,
.adm,
.stadm,
.razrab,
.legend,
.glavsled,
.rykvod,
.specadm,
.vlad {
    animation: subtlePulse 4s infinite
}

@keyframes subtlePulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.01)
    }
}

@media (max-width:768px) {

    .vlad,
    .glavsled,
    .zamglavsled,
    .lider,
    .kur,
    .rykvod,
    .pomtech,
    .server2a,
    .server3l,
    .server3a,
    .server4a,
    .server2l,
    .ban,
    .specadm,
    .moroz,
    .modr,
    .vklad,
    .sliva,
    .legend,
    .gltest,
    .sist,
    .mlmoder,
    .stmoder,
    .zgta,
    .techadm,
    .adm,
    .stadm,
    .razrab,
    .tpshka,
    .tester,
    .forum,
    .glavadm,
    .kk,
    .dir,
    .gm,
    .server1a,
    .server1l,
    .zga,
    .prmanager {
        font-size: 0.65rem;
        padding: 4px 10px;
        min-height: 24px;
        border-radius: 20px;
        margin: 0 1px 2px 0
    }

    .vlad::after,
    .glavsled::after,
    .zamglavsled::after,
    .lider::after,
    .kur::after,
    .rykvod::after,
    .pomtech::after,
    .server2a::after,
    .server3l::after,
    .server3a::after,
    .server4a::after,
    .server2l::after,
    .ban::after,
    .specadm::after,
    .moroz::after,
    .modr::after,
    .vklad::after,
    .sliva::after,
    .legend::after,
    .gltest::after,
    .sist::after,
    .mlmoder::after,
    .stmoder::after,
    .zgta::after,
    .techadm::after,
    .adm::after,
    .stadm::after,
    .razrab::after,
    .tpshka::after,
    .tester::after,
    .forum::after,
    .glavadm::after,
    .kk::after,
    .dir::after,
    .gm::after,
    .server1a::after,
    .server1l::after,
    .zga::after,
    .prmanager::after {
        display: none
    }

    .vlad::before,
    .glavsled::before,
    .zamglavsled::before,
    .lider::before,
    .kur::before,
    .rykvod::before,
    .pomtech::before,
    .server2a::before,
    .server3l::before,
    .server3a::before,
    .server4a::before,
    .server2l::before,
    .ban::before,
    .specadm::before,
    .moroz::before,
    .modr::before,
    .vklad::before,
    .sliva::before,
    .legend::before,
    .gltest::before,
    .sist::before,
    .mlmoder::before,
    .stmoder::before,
    .zgta::before,
    .techadm::before,
    .adm::before,
    .stadm::before,
    .razrab::before,
    .tpshka::before,
    .tester::before,
    .forum::before,
    .glavadm::before,
    .kk::before,
    .dir::before,
    .gm::before,
    .server1a::before,
    .server1l::before,
    .zga::before,
    .prmanager::before {
        display: none
    }
}

.message .message-user .userBannerWrapper {
    margin-bottom: 5px !important
}

.message .message-user .userBanner {
    margin: 2px 3px 3px 0 !important
}

@media (prefers-color-scheme:dark) {

    .vlad,
    .glavsled,
    .zamglavsled,
    .lider,
    .kur,
    .rykvod,
    .pomtech,
    .server2a,
    .server3l,
    .server3a,
    .server4a,
    .server2l,
    .ban,
    .specadm,
    .moroz,
    .modr,
    .vklad,
    .sliva,
    .legend,
    .gltest,
    .sist,
    .mlmoder,
    .stmoder,
    .zgta,
    .techadm,
    .adm,
    .stadm,
    .razrab,
    .tpshka,
    .tester,
    .forum,
    .glavadm,
    .kk,
    .dir,
    .gm,
    .server1a,
    .server1l,
    .zga,
    .prmanager {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)
    }
}

@-webkit-keyframes wave {
    from {
        -webkit-mask-position: 150%
    }

    to {
        -webkit-mask-position: -50%
    }
}

.prefixBall {
    color: #ffffff;
    background: linear-gradient(45deg, #c62828 0%, #e53935 25%, #d32f2f 50%, #f44336 75%, #c62828 100%);
    background-size: 300% 300%;
    font-size: 75%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 20px;
    border-radius: 50px;
    text-align: center;
    display: inline-block;
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.3), 0 4px 15px rgba(198, 40, 40, 0.4);
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    animation: gradientFlow 5s ease infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.prefixBall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.2), inset 0 0 60px rgba(255, 215, 0, 0.1);
    pointer-events: none
}

.prefixBall::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .3s ease
}

.prefixBall:hover::after {
    opacity: 1;
    animation: shineMove 1.5s ease
}

@keyframes shineMove {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg)
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg)
    }
}

.prefixBall:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.4), 0 6px 25px rgba(198, 40, 40, 0.6);
    animation-duration: 3s
}

.prefixBall:active {
    transform: translateY(1px) scale(.98)
}

.prefixBall .icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    animation: iconFloat 3s ease-in-out infinite
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-3px) rotate(10deg)
    }
}

@media (max-width:650px) {
    .prefixBall {
        font-size: 70%;
        padding: 1px 15px;
        animation-duration: 7s
    }
}

@media (prefers-color-scheme:dark) {
    .prefixBall {
        box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.2), 0 4px 15px rgba(198, 40, 40, 0.6)
    }

    .prefixBall:hover {
        box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.3), 0 6px 25px rgba(198, 40, 40, 0.8)
    }
}

a.bb-code-href-button {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
    transition: background-color .125s ease, border-color .125s ease, color .125s ease;
    font-size: 14px;
    border-radius: 16px;
    padding-top: 13px;
    padding-right: 15px;
    padding-bottom: 13px;
    padding-left: 15px;
    font-family: 'Readex Pro', sans-serif;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background-color: #7c7771;
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: none;
    padding: 0px 4px;
    margin: 3px 6px 4px 0;
    border-radius: 2px;
    box-shadow: 1px 1px #dfdfdf, 2px 2px #6c6666
}

a.bb-code-href-button.button--splitTrigger>.button-text {
    border-right-color: #6f6a65
}

a.bb-code-href-button.button--splitTrigger>.button-menu {
    border-left-color: #89847e
}

a.bb-code-href-button:hover,
a.bb-code-href-button:active,
a.bb-code-href-button:focus {
    background-color: #67635e
}

a.bb-code-href-button:before {
    content: "\f360";
    width: 1.28571429em;
    display: inline-block;
    text-align: center
}

a.bb-code-href-button:before {
    padding: 0 4px
}

a.bb-code-href-button:hover {
    color: #b0babc;
    background-color: #504d4a;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

a.bb-code-href-button:hover.button--splitTrigger>.button-text {
    border-right-color: #43403e
}

a.bb-code-href-button:hover.button--splitTrigger>.button-menu {
    border-left-color: #5d5a56
}

a.bb-code-href-button:hover:hover,
a.bb-code-href-button:hover:active,
a.bb-code-href-button:hover:focus {
    background-color: #3b3936
}

.dima {
    color: #fff;
    background: linear-gradient(270deg, #ff6b82, #ff4a69, #ff6b82);
    background-size: 600% 600%;
    border-color: #a50000;
    font-size: 75%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    animation: pulse 3s ease infinite
}

@keyframes pulse {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 100% 50%
    }
}

.userBanner.userBanner--staff {
    color: #fff;
    background: #d80000;
    border-color: #a50000;
    font-size: 75%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-align: center;
    display: inline-block
}

.button.button--cta,
button.button a.button.button--cta {
    color: #fff;
    background: #ff9305;
    border: none;
    border-color: #e14f4d
}

.p-nav-list .p-navEl.is-selected {
    color: #FFC618;
    font-weight: 600;
    background: #42464d
}

.blockMessage.blockMessage--error {
    border-left: 2px solid #c84448;
    background: #2d3238;
    color: #c84448
}

.block-rowMessage.block-rowMessage--warning {
    border-left: 2px solid #dcda54;
    background: #383c42;
    color: white
}

.block-container .uix_newIndicator {
    font-size: 12px;
    color: #fff;
    background: #ff9305;
    border-radius: 4px;
    padding-top: 1px;
    padding-right: 4px;
    padding-bottom: 1px;
    padding-left: 4px
}

.uix_fabBar .p-title-pageAction .button {
    border-radius: 100%;
    height: 60px;
    width: 60px;
    padding: 0;
    font-size: 0;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 10px 0px rgba(0, 0, 0, 0.14), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px 0 rgba(0, 0, 0, 0.2)
    background: #FFC618;
    color: #fff
}

.test {
    color: #00FF1F;
    background: black;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    background: #008000;
    font-size: 11px;
    font-weight: italic
}

@keyframes AnimNic {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes username_gradient {
    0% {
        text-shadow: none;
        opacity: 1
    }

    25% {
        text-shadow: 0 0 8px rgba(255, 192, 203, 0.8);
        opacity: 1
    }

    50% {
        text-shadow: 0 0 12px #ffc0cb;
        opacity: 0.8
    }

    75% {
        text-shadow: none;
        opacity: 1
    }

    100% {
        text-shadow: none;
        opacity: 1
    }
}

.pgreen {
    background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #32cd32, inset 0 0 10px rgba(50, 205, 50, 0.3);
    position: relative;
    overflow: hidden;
    animation: christmasTree 4s ease infinite
}

@keyframes christmasTree {
    0% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #32cd32
    }

    100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }
}

.pgreen::before {
    content: '🎄';
    margin-right: 3px;
    animation: treeWobble 2s infinite ease-in-out
}

@keyframes treeWobble {

    0%,
    100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(-5deg)
    }

    75% {
        transform: rotate(5deg)
    }
}

.porange {
    background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ff9800, inset 0 0 8px rgba(255, 152, 0, 0.3);
    animation: mandarinGlow 3s infinite alternate;
    position: relative
}

@keyframes mandarinGlow {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ff9800
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #ff9800
    }
}

.porange::after {
    content: '🍊';
    margin-left: 3px;
    animation: fruitBounce 1.5s infinite
}

@keyframes fruitBounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }
}

.paqua {
    background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #03a9f4, inset 0 0 10px rgba(3, 169, 244, 0.2);
    animation: iceFlow 5s linear infinite;
    position: relative
}

@keyframes iceFlow {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.2)
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

.paqua::before {
    content: '❄️';
    margin-right: 3px;
    animation: snowflakeSpin 4s infinite linear
}

.pred {
    background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
    background-size: 400% 400%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #f00, inset 0 0 15px rgba(255, 0, 0, 0.4);
    animation: ballGlow 3s ease-in-out infinite
}

@keyframes ballGlow {

    0%,
    100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #f00
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #f00, 0px 0px 25px #f44
    }
}

.pred::after {
    content: '🔴';
    margin-left: 3px;
    font-size: 10px;
    animation: shineReflect 2s infinite
}

@keyframes shineReflect {

    0%,
    100% {
        opacity: 0.7
    }

    50% {
        opacity: 1
    }
}

.ypred {
    background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
    background-size: 300% 300%;
    color: black;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ffc018, inset 0 0 10px rgba(255, 193, 7, 0.4);
    animation: goldFire 2s infinite alternate;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
}

@keyframes goldFire {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ffc018
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #ffc018, 0px 0px 20px #ffd700
    }
}

.ypred::before {
    content: '✨';
    margin-right: 3px;
    animation: sparkleTwinkle 1s infinite alternate
}

.bpred {
    background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #1844ff, inset 0 0 10px rgba(24, 68, 255, 0.3);
    animation: nightSky 6s ease infinite;
    position: relative;
    overflow: hidden
}

@keyframes

Хз зачем но кому то пригодиться