@import url('https://fonts.cdnfonts.com/css/source-sans-pro?styles=14484,14483,14488,14493');

body {
    background-color: #000;
    color: #fff;
    font-family: 'Source Sans Pro', cursive, sans-serif;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: -webkit-fill-available
}

button{
    border: 0;
}

.blackscreen {
    background: rgb(0, 0, 0);
    transition: all 500ms cubic-bezier(1, -0.01, .65, 1.04) 600ms;
}

.parallax-bg {
    background-image: url(../imgs/bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform: translateY(0);
    transition: all 1.7s cubic-bezier(.55, -.01, .36, 1), transform .1s ease-out, opacity .2s ease;
    visibility: hidden;
    width: 100%;
    will-change: transform, opacity;
    z-index: -1
}

.content {
    position: relative;
    z-index: 1
}

@keyframes pulse-highlight {
    0% {
        background-color: #707070;
        scale: 1
    }

    25% {
        background-color: #7a8183;
        box-shadow: 0 0 20px 4px hsla(0, 0%, 100%, .5);
        scale: 1.1
    }

    75% {
        background-color: #7a8183;
        box-shadow: 0 0 20px 4px hsla(0, 0%, 100%, .5);
        scale: 1.1
    }

    to {
        background-color: #707070;
        scale: 1
    }
}

@property --wave-shift {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@keyframes rgbWave {
    0% {
        --wave-shift: 0%;
    }

    100% {
        --wave-shift: 100%;
    }
}

.dnt {
    background: #ffffff2b;
    border-radius: 15px;
    transition: all 0.1s;
}

.dnt a {
    border-style: solid;
    transition: all 0.18s;
    padding: 6px 25px;
    display: inline-block;
    font: bold 20px 'BuilderSans';
    border-radius: 8px;
    text-shadow: 0 0 5px black;
    color: white;
    text-decoration: none;

}

#thous a {
    outline: auto 1px white;
    background: linear-gradient(90deg,
            color(display-p3 1 0 0) 0%,
            color(display-p3 1 1 0) 16%,
            color(display-p3 0 1 0) 33%,
            color(display-p3 0 1 1) 50%,
            color(display-p3 0 0 1) 66%,
            color(display-p3 1 0 1) 83%,
            color(display-p3 1 0 0) 100%);
    background-size: 400%;
    background-position: var(--wave-shift) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rgbWave 6s linear infinite;
}

.dnt:has(a:hover) {
    transform: scale(1.1);

}

.dnt a:hover {
    text-shadow: 0 0 222px color(display-p3 1 0 1), 0 0 222px color(display-p3 0 1 1), 0 0 222px color(display-p3 1 1 0);
}




#donate-btn {
    font-family: Playpen Sans;
    font-weight: 600;
    margin: 16px 34% 0px;
    transition: all .2s cubic-bezier(.215, .61, .355, 1);
    background: linear-gradient(154deg, #ffd91e, #ffb200, #c48900);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 1px 5px 4px 3px #0000002b, inset 0px -8px 0 0 #ae7631bf, inset 0px -8px 7px 0 #745022, inset 1px 7px 17px 0 #ffffff73;
    color: #fff;
    padding: 10px 20px 15px;
    text-shadow: 0 0 2px #fff;
    transform: translateY(0px) rotateX(20deg);
}

#donate-btn:hover {
    box-shadow: 1px 5px 10px 1px #0000004a, inset 0px -15px 3px 0 #8f633dbd, inset 0px -6px 5px 0 #000000, inset 1px 7px 17px 0 #ffffffd4;
    color: #fff;
    padding: 10px 20px 22px;
    text-shadow: 0 0 5px #fff;
    transform: translateY(-5px) rotateX(30deg);
}

#donate-btn:active {
    transform: translateY(2px) rotateX(30deg);
    box-shadow: 0px 3px 4px 1px #00000042, inset 0px -8px 10px 0 #00000038, inset 0px -8px 11px 7px #583a12a3, inset 1px 7px 20px 0px #ffffffa6;
    color: #ffffff21;
    padding: 14px 20px 15px;
    background: linear-gradient(179deg, #733f04, #79530c, #a37713, #755100, #b97000);
    text-shadow: 0 0 3px #ffffffbd;
}

#patchnotes.animate {
    animation: pulse-highlight 1.7s cubic-bezier(.18, .89, .32, 1.28);
    transition: background-color .3s ease
}

footer p {
    color: #ffffffb0;
    font-family: monospace;
    font-size: 1.45em;
    margin-bottom: 0;
    padding: 26px 0 10px
}

.discord:hover {
    background: #719cff;
    box-shadow: inset 0 0 9px #8367ff, 0 0 9px 0 #00000038
}

.flex-sections {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 44px;
    width: 100%
}

.half {
    flex: 1;
    flex: 1 337px;
    min-width: 0
}

@media (max-width:768px) {
    .flex-sections {
        flex-direction: column
    }
}

#preloadedImages {
    background-image: url(../imgs/5liRRie.png);
    background-image: url(../imgs/XRmpB1c.png);
    display: inline;
    height: 0;
    width: 0
}

.intro {
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, #e9e9e9, #ffffff80);
    display: grid;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    top: 0;
    transition: filter .5s, opacity .4s ease;
    z-index: 1272
}

.grad,
.intro {
    opacity: 0;
    position: fixed;
    visibility: hidden;
    width: -webkit-fill-available
}

#refresh-button {
    margin-right: 13px;
}

.grad {
    background: linear-gradient(0deg, #fff0 7%, rgba(16, 73, 102, .77) 55%, #000);
    height: 24vh;
    z-index: 0
}

body.fonts-loaded .grad,
body.fonts-loaded .intro,
body.fonts-loaded .parallax-bg,
body.fonts-loaded header {
    opacity: 1;
    visibility: visible
}

body.fonts-loaded html {
    overflow: scroll
}

.logo4 {
    bottom: -42px;
    left: 180px;
    position: absolute;
    transform: rotate(25deg);
    transition: 1s ease-in-out;
    width: 135px
}

.logo5 {
    left: -150px;
    text-shadow: -4px -4px 0 #000, 0 -4px 0 #000, 4px -4px 0 #000, 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, -4px 4px 0 #000, -4px 0 0 #000
}

.logo5,
.logo6 {
    position: absolute;
    -webkit-text-fill-color: #fff0;
    bottom: -104px;
    display: inline-block;
    font: 200 224px Bunny Flowers;
    transition: .5s ease-in-out;
    z-index: 123
}

.logo6 {
    font-size: 51px;
    text-shadow: -3px -3px 0 #000, 0 -3px 0 #000, 3px -3px 0 #000, 3px 0 0 #000, 3px 3px 0 #000, 0 3px 0 #000, -3px 3px 0 #000, -3px 0 0 #000
}

.logo-header2 {
    height: 180px;
    right: 0;
    scale: .72;
    transform: translateY(-50%)
}

.logo-header,
.logo-header2 {
    color: #fff;
    position: relative;
    transition: .5s ease-in-out
}

.logo-header {
    display: block;
    filter: drop-shadow(2px 4px 4px #0000002d);
    margin: auto
}

.logo2 {
    background: -webkit-linear-gradient(bottom, #ff0, #24ff5a) text;
    background-clip: text;
    -webkit-text-fill-color: #fff0;
    color: #fff;
    font: 200 1em Bunny Flowers;
    left: 0;
    opacity: 1;
    text-shadow: none;
    top: 0
}

.logo,
.logo2 {
    display: inline-block;
    position: absolute;
    z-index: 123
}

.logo {
    -webkit-text-fill-color: #fff0;
    bottom: -150px;
    font: 200 224px Bunny Flowers;
    left: -216px;
    text-shadow: -4px -4px 0 #000, 0 -4px 0 #000, 4px -4px 0 #000, 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, -4px 4px 0 #000, -4px 0 0 #000
}

.logo#two {
    position: absolute;
    -webkit-text-fill-color: #fff0;
    bottom: -50px;
    display: inline-block;
    font: 200 51px Bunny Flowers;
    left: -15px;
    opacity: 0;
    text-shadow: -3px -3px 0 #000, 0 -3px 0 #000, 3px -3px 0 #000, 3px 0 0 #000, 3px 3px 0 #000, 0 3px 0 #000, -3px 3px 0 #000, -3px 0 0 #000;
    z-index: 123
}

.logo#two.active {
    bottom: -70px;
    opacity: 1;
    transition: all .6s cubic-bezier(.18, .89, .32, 1.28)
}

.logo#two.fade {
    bottom: -560px;
    scale: 4;
    transition: 1.7s ease-in-out
}

.vote-button {
    background-color: #4caf50;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 18px
}

.vote-button.dislike {
    background-color: #f44336
}

.vote-button:hover {
    opacity: .9
}

.open-poll {
    background: #2e2e2e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    padding: 10px 16px
}

.open-poll:hover {
    background: #3a3a3a
}

.logo.active {
    bottom: -70px;
    opacity: 1;
    transition: all .9s cubic-bezier(.18, .89, .32, 1.28)
}

main {
    filter: opacity(0);
    justify-content: center;
    scale: .9;
    transition: 1s
}

.logo.fade {
    bottom: -90px;
    left: -770px;
    scale: 4;
    transition: 1.7s ease-in-out
}

.logo3 {
    bottom: -150px;
    filter: opacity(0);
    left: 66px;
    transform: rotate(-80deg);
    transition: 1s cubic-bezier(.6, -.25, .59, 1.12)
}

.logo3,
.logo3.active {
    position: absolute;
    width: 135px
}

.logo3.active {
    bottom: 0;
    filter: opacity(1);
    left: 106px;
    transform: rotate(21deg);
    transition: all .9s cubic-bezier(.18, .89, .32, 1.28)
}

.logo3.fade {
    bottom: 3px;
    left: 423px;
    position: absolute;
    scale: 4;
    transform: rotate(21deg);
    transition: 1.7s ease-in-out
}

header {
    display: grid;
    padding: 2.2rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

h1 {
    font-size: 2.2em
}

header h1 {
    font-size: 2.5rem;
    margin: 0
}

nav {
    align-items: flex-end;
    display: flex;
    gap: 4px;
    height: 88px;
    justify-content: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}


nav a>img {
    max-width: inherit;
    position: relative;
    transition: all .3s cubic-bezier(.18, .89, .32, 1.28)
}

nav a:hover img {
    margin-bottom: 25px
}

@keyframes itemFadeIn {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.item-refresh-animate {
    animation: itemFadeIn .4s ease-out
}

nav a {
    align-items: stretch;
    border-radius: 35% 35% 0 0;
    box-shadow: inset 2px 2px 4px rgba(160, 110, 0, .6), inset -2px -2px 4px rgba(255, 245, 200, .5), 0 1px 2px rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: inherit;
    max-width: 100px;
    padding: .35rem;
    transition: all .3s cubic-bezier(.18, .89, .32, 1.28);
    width: calc(3vw + 46px);
    z-index: 125
}

nav #gearstab {
    background: linear-gradient(145deg, #47fd4e, #1de9c4)
}

nav #deathstab {
    background: linear-gradient(145deg, #ff4848, #ff6f1a)
}

nav #titlestab {
    background: linear-gradient(145deg, #f347fd, #a215fa)
}

nav #petstab {
    background: linear-gradient(145deg, #4facff, #4915fa)
}

nav #effectstab {
    background: linear-gradient(145deg, #fdf147, #fa9415)
}

nav #cheststab {
    background: linear-gradient(345deg, #238099, #71cbff)
}

nav #scammerstab {
    background: linear-gradient(345deg, #000, #717171)
}

nav #scammerstab:hover>img {
    content: url(../imgs/5liRRie.png)
}

nav #scammerstab>img {
    content: url(../imgs/SK5csOS.png)
}

#countdown,
#countdown2 {
    color: #ccc;
    font-weight: 700;
    font-size: 1.7rem;
}

nav a:hover {
    transform: translateZ(40px) translateY(0)
}

nav #gamenightstab:hover {
    background: linear-gradient(145deg, #5188ff, #9013af);
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15)
}

nav #gamenightstab {
    background: linear-gradient(145deg, #4753fd, #5c0e91)
}

nav #gearstab:hover {
    background: linear-gradient(145deg, #84fe80, #46faff)
}

nav #deathstab:hover,
nav #gearstab:hover {
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15)
}

nav #deathstab:hover {
    background: linear-gradient(145deg, #ff5252, #ff7f34);
    color: #422006
}

nav #titlestab:hover {
    background: linear-gradient(145deg, #f762ff, #a137e7)
}

nav #petstabtab:hover,
nav #titlestab:hover {
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15)
}

nav #petstabtab:hover {
    background: linear-gradient(145deg, #7dd4ff, #0055e5)
}

nav #effectstab:hover {
    background: linear-gradient(145deg, #fcff38, #ffb724)
}

nav #cheststab:hover,
nav #effectstab:hover {
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15)
}

nav #cheststab:hover {
    background: linear-gradient(345deg, #3e9db8, #94d8ff)
}

nav #scammerstab:hover {
    background: linear-gradient(145deg, #6d4949, #e44d4d);
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15);
    filter: drop-shadow(0 0 4px red)
}

nav a:active {
    box-shadow: inset -2px -2px 4px rgba(160, 110, 0, .6), inset 2px 2px 4px rgba(255, 245, 200, .5), 0 0 0 #fff0;
    transform: translateZ(40px) translateY(0)
}

.top-link {
    align-items: center;
    border-radius: 50%;
    bottom: 0;
    cursor: pointer;
    display: inline-flex;
    height: 80px;
    justify-content: center;
    margin: 0 2em 3em 0;
    padding: .25em;
    position: fixed;
    right: 0;
    transition: all .15s ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 80px;
    z-index: 1000
}

.top-link:hover {
    filter: brightness(1.2);
    scale: 1.1
}

.top-link:active {
    scale: .6
}

.arrow {
    height: 163px;
    width: 163px
}

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center
}

section {
    zoom: .93;
    background: #666;
    border: 15px solid #555;
    border-radius: 33px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
    flex: 1 20030px;
    margin: 0 5vw 50px;
    padding: 1vw 1vw 27px;
    position: sticky;
    z-index: 22
}

.title {
    font: 700 2.3rem 'Source Sans Pro';
    margin: 0;
    text-shadow: 2px 3px 9px #0006;
    top: -65px
}

.title+.title {
    -webkit-text-stroke: 0 #000
}

.show {
    opacity: 1;
    visibility: visible
}

.hide {
    opacity: 0;
    visibility: hidden
}

input {
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    padding: .7rem;

}

.welcome h2 {
    margin-block-start: .2em
}

footer {
    background: linear-gradient(180deg, #717171, #515151);
    border-radius: 30px 30px 0 0;
    box-shadow: 0 0 1em 0 #0000004a;
    margin-top: 38px;
    padding: 0;
    text-align: center
}

.logo-container {
    filter: drop-shadow(2px 4px 4px #00000069);
    margin-bottom: 18px;
    position: relative;
    transform: scale(.9);
    transition: transform .25s cubic-bezier(.7, .38, .24, 1.27);
    z-index: 1
}

.logo-container:hover {
    transform: scale(1) rotate(2.4deg)
}

div.logo-container {
    margin: auto;
    max-height: 170px;
    max-width: 400px
}

.catalog {
    zoom: .87;
    display: flex;
    display: flow;
    justify-content: center;
    padding-bottom: 27px;
    padding-top: 18px;
    text-align: center;
    z-index: auto
}

.catalog-grid {
    display: flex;
    gap: 21px;
    grid-template-columns: repeat(auto-fill, 194px);
    padding: 2%;
    zoom: 1.1;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center
}

p {
    color: #fff;
    font-size: 1.3em;
    margin: 13px
}

.catalog p {
    color: #fff;
    font: 600 1.25rem 'Source Sans Pro'
}

.search-item.active,
.search-item:hover {
    background-color: #797979
}

#weeklystar .item {
    background: linear-gradient(145deg, #7e7e7e, #858585);
    outline-offset: -6px;
    outline-style: solid;
    outline-width: 5px
}

#pets {
    background-color: #377bfa;
    outline-color: #fae351
}

#effects {
    background-color: #ffb135;
    outline-color: #ffb135
}

#gears {
    background-color: #5bfe6a;
    outline-color: #ff2a00
}

#deaths {
    background-color: #ff7a5e;
    outline-color: #b31aff
}

#titles {
    background-color: #c960fe;
    outline-color: #fae351
}

.welcome h1 {
    font-family: BuilderSans;
    font-size: 2.6em
}

#titles div {
    bottom: -73px
}

.discord {
    background: #5386ff;
    border-radius: 9px;
    box-shadow: inset 0 0 9px #4a35a3, 0 0 9px 0 #00000038;
    color: #f5fcff;
    font: 600 1em BuilderSans;
    margin: 4px;
    padding: .34em .6em;
    text-decoration: blink;
    text-shadow: 0 0 4px #ffffff1f;
    transition: all .2s;
    white-space: pre
}

.ff {
    align-items: center;
    background-color: hsla(0, 0%, 100%, .15);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    height: 190px;
    height: 13vw;
    justify-content: flex-end;
    justify-items: center;
    max-height: 191px;
    max-width: 191px;
    min-height: 126px;
    min-width: 126px;
    padding: 0;
    transition: transform .18s ease, background .25s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 190px;
    width: 13vw
}

.ff p {
    bottom: 43px;
    display: none;
    font-size: 22px;
    font: 100 24px 'Source Sans Pro';
    left: 16px;
    position: relative;
    text-align: left;
    text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 1px 0 0 #000, 2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000;
    z-index: 99999
}

.ff p img {
    float: left;
    height: 27px;
    width: 27px
}

.item {
    align-items: center;
    background-color: hsla(0, 0%, 100%, .15);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    height: 13vw;
    justify-content: flex-end;
    justify-items: center;
    max-height: 139px;
    max-width: 139px;
    min-height: 126px;
    min-width: 126px;
    padding: 0;
    transition: transform .15s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 13vw
}

.item:hover {
    background-color: red;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
    filter: grayscale(0) brightness(1.12);
    transform: scale(1.05);
    z-index: 1;
}


.item:active {
    background-color: rgba(0, 0, 0, .349);
    box-shadow: 0 4px 10px transparent;
    filter: grayscale(0) brightness(.88);
    transform: scale(.95)
}

body.pressing-heart .item:active {

    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
    filter: grayscale(0) brightness(1.12);
    transform: scale(1.05)
}


.staff {
    filter: grayscale(1) brightness(1);
    transition: all .15s ease-in-out
}

#h3 {
    bottom: 0;
    font: 400 1.1rem 'Source Sans Pro';
    height: 21px;
    padding-top: 4px;
    text-shadow: -1.3px -1.3px 0 #000, 0 -1.3px 0 #000, 1.3px -1.3px 0 #000, 1.3px 0 0 #000, 1.3px 1.3px 0 #000, 0 1.3px 0 #000, -1.3px 1.3px 0 #000, -1.3px 0 0 #000;
    z-index: 99
}

#titles.item {
    align-items: center;
    justify-content: center
}

#titles.item #h3 {
    bottom: 0;
    height: auto;
    position: relative
}

#titles.item #h3 #h3 {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    font: 1 1em Arimo;
    height: auto;
    left: 0;
    position: absolute;
    text-shadow: none;
    white-space: nowrap;
    z-index: 22
}

.item>canvas {
    height: 70%;
    position: relative;
    width: 70%;
    z-index: 0
}

#titles.item>canvas {
    height: 90%;
    position: relative;
    width: 90%;
    z-index: 0
}

.widgetRoot * {
    all: unset
}

.widgetRoot,
.widgetRoot * {
    border: 0;
    margin: 0;
    padding: 0
}

.item p,
.widgetRoot div,
.widgetRoot h1 {
    display: block
}

.item p {
    white-space: nowrap;
    backdrop-filter: blur(12px);
    background: #00000040;
    border-radius: 9px;
    bottom: -7px;
    font: 200 20px BuilderSans;
    left: -7px;
    padding: 0 5px;
    position: absolute;
    text-align: left;
    text-shadow: 0 0 4px #000;
    z-index: 99999
}

.item p img {
    filter: drop-shadow(1px 1px 2px black);
    float: left;
    height: auto;
    width: 25px
}

.glow {
    -webkit-animation: glow 3s linear 0s infinite alternate;
    animation: glow 3s linear 0s infinite alternate;
    border-radius: 50%;
    width: 40px
}

.glow,
.particles {
    position: absolute;
    z-index: 0
}

.particles {
    height: 100px;
    left: calc(42% - 50px);
    top: calc(10% - 70px);
    width: 400px
}

.rotate {
    height: 30px;
    left: calc(46% + 97px);
    position: relative;
    top: -127px;
    width: 30px;
    z-index: -1
}

.angle {
    pointer-events: none
}

.angle,
.position,
.pulse,
.size {
    left: 0;
    position: absolute;
    top: 0
}

.particle {
    border-radius: 50%;
    height: 10px;
    left: calc(50% - 5px);
    position: absolute;
    top: calc(50% - 5px);
    width: 10px
}

.flash {
    box-shadow: 0 0 3px 1px #fff
}

.rotate {
    -webkit-animation: rotate 20s linear 0s infinite alternate;
    animation: rotate 20s linear 0s infinite alternate
}

.pulse {
    -webkit-animation: pulse 1.5s linear 0s infinite alternate;
    animation: pulse 1.5s linear 0s infinite alternate
}

#messages {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 10px;
    font-size: 123%;
    height: 346px;
    margin-bottom: 10px;
    overflow-y: auto;
    padding: 10px;
    text-align: left
}

input {
    background: #2a2a2a;
    border: 1px solid #555;
    color: #fff;
    padding: 10px;

}

#messages::-webkit-scrollbar {
    width: 11px
}

#messages::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px #000
}

#messages::-webkit-scrollbar-thumb {
    background: #545454;
    border-radius: 10px
}

#messages::-webkit-scrollbar-thumb:hover {
    background: #484848
}

#indicator {
    pointer-events: none;
    position: absolute;
    right: 58px
}

@-webkit-keyframes glow {
    0% {
        box-shadow: 0 0 60px 20px #eef956, 25px 15px 50px 10px #fff, -5px -25px 30px 5px #fff;
        transform: rotate(0deg)
    }

    to {
        box-shadow: 0 0 90px 20px #eef956, 35px 20px 40px 10px #fff, -30px -30px 40px 5px #fff;
        transform: rotate(5deg)
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 60px 20px #eef956, 25px 15px 50px 10px #fff, -5px -25px 30px 5px #fff;
        transform: rotate(0deg)
    }

    to {
        box-shadow: 0 0 90px 20px #eef956, 35px 20px 40px 10px #fff, -30px -30px 40px 5px #fff;
        transform: rotate(5deg)
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes angle {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn)
    }
}

@keyframes angle {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes size {
    0% {
        transform: scale(10)
    }

    to {
        transform: scale(10)
    }
}

@keyframes size {
    0% {
        transform: scale(10)
    }

    to {
        transform: scale(10)
    }
}

@-webkit-keyframes position {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0)
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(10px, 10px, 0)
    }
}

@keyframes position {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(10px, 10px, 0)
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1)
    }

    to {
        -webkit-transform: scale(.5)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(.5)
    }
}

.rotate .angle:first-child {
    -webkit-animation: angle 10s steps(5) 0s infinite;
    animation: angle 10s steps(5) 0s infinite
}

.rotate .angle:first-child .size {
    -webkit-animation: size 10s steps(5) 0s infinite;
    animation: size 10s steps(5) 0s infinite
}

.rotate .angle:first-child .particle {
    -webkit-animation: particle 6s linear infinite alternate;
    animation: particle 6s linear infinite alternate
}

.rotate .angle:first-child .position {
    -webkit-animation: position 2s linear 0s infinite;
    animation: position 2s linear 0s infinite
}

.rotate .angle:nth-child(2) {
    -webkit-animation: angle 4.95s steps(3) -1.65s infinite;
    animation: angle 4.95s steps(3) -1.65s infinite
}

.rotate .angle:nth-child(2) .size {
    -webkit-animation: size 4.95s steps(3) -1.65s infinite alternate;
    animation: size 4.95s steps(3) -1.65s infinite alternate
}

.rotate .angle:nth-child(2) .particle {
    -webkit-animation: particle 4.95s linear -3.3s infinite alternate;
    animation: particle 4.95s linear -3.3s infinite alternate
}

.rotate .angle:nth-child(2) .position {
    -webkit-animation: position 1.65s linear 0s infinite;
    animation: position 1.65s linear 0s infinite
}

.rotate .angle:nth-child(3) {
    -webkit-animation: angle 13.76s steps(8) -6.88s infinite;
    animation: angle 13.76s steps(8) -6.88s infinite
}

.rotate .angle:nth-child(3) .size {
    -webkit-animation: size 6.88s steps(4) -5.16s infinite alternate;
    animation: size 6.88s steps(4) -5.16s infinite alternate
}

.rotate .angle:nth-child(3) .particle {
    -webkit-animation: particle infinite 5.16s linear -1.72 alternate;
    animation: particle infinite 5.16s linear -1.72 alternate
}

.rotate .angle:nth-child(3) .position {
    -webkit-animation: position 1.72s linear 0s infinite;
    animation: position 1.72s linear 0s infinite
}

.rotate .angle:nth-child(5) .position {
    -webkit-animation: position 2.45s linear 0s infinite;
    animation: position 2.45s linear 0s infinite
}

html {
    overflow-x: hidden;
    overflow: hidden
}

html {
    @media screen and (max-width:600px) {
        font-size: 9px;
        width: 100vw
    }
}

.modal {
    align-items: center;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, .7);
    display: none;
    height: 120%;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: -10%;
    transition: opacity .3s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 1000
}

.retired-badge {
    background: linear-gradient(180deg, #ff3c3c, #9f0000);
    border-radius: 6px;
    color: #fff;
    font-family: monospace;
    font-size: 1em;
    font-weight: bolder;
    letter-spacing: 2px;
    padding: 3px 4px 4px 6px;
    position: relative;
    top: 34px
}

#modal-retired {
    background: linear-gradient(180deg, #ff3c3c, #9f0000);
    border: solid red;
    border-radius: 12px;
    box-shadow: -1px 4px 6px #00000054;
    color: #fff;
    font: 1000 16px Arimo;
    letter-spacing: 2px;
    max-width: max-content;
    padding: 5px;
    width: fit-content
}

#modal-retired,
.modal-icon {
    display: block;
    justify-self: right;
    position: relative;
    transform: translateZ(30px);
    visibility: hidden;
    z-index: 22;
    margin: 0px;
}

.modal-icon {
    filter: drop-shadow(0 2px 6px #00000069);
    height: 35px;

}

.modal.show {
    display: flex;
    opacity: 1;
    pointer-events: auto
}

.modal-content {
    aspect-ratio: 9/15.5;
    background-position: 50%;
    background-size: cover;
    border-radius: 1.75rem;
    box-shadow: 0 0 0 2px rgba(255, 214, 102, .4), 0 0 25px 8px rgba(255, 214, 102, .15);
    cursor: default;
    display: block;
    max-height: 90vh;
    max-width: 380px;

    padding: 20px;
    position: absolute;
    text-align: center;
    opacity: 1;
    transform-origin: center;
    transform-style: preserve-3d;
    left: 0vw;
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), opacity .3s ease, left .2s ease;
    width: 100%;
    will-change: transform, box-shadow, background-size;
    transform: perspective(1800px) rotateY(0deg) scale(1) !important;

    @starting-style {
        opacity: 0;
        transform: perspective(1800px) rotateY(90deg) scale(1) !important;
    }
}


.modal-title {
    font: 900 45px 'Source Sans Pro';
    left: 19px;
    text-align: left;
    top: -36px;
    transform: translateZ(20px);
    max-width: 90%;
}




.modal-prc,
.modal-title {
    position: relative;
    text-shadow: 0px 1px 5px #49444499;
    z-index: 22
}

.modal-prc {
    height: fit-content;
    align-items: center;
    display: none;
    font: 700 42px BuilderSans;
    justify-self: right;
    margin-right: 13px;
    white-space: nowrap;
    margin-top: 15px;
    transform: translateZ(30px);
    width: fit-content;
}

.modal-content:hover {
    box-shadow: 0 0 0 3px rgba(255, 214, 102, .6), 0 0 35px 12px rgba(255, 214, 102, .25)
}

.inner-border-overlay {
    border: 1px solid rgba(255, 214, 102, .1);
    border-radius: 1.375rem;
    box-shadow: inset .5px .5px 1.5px rgba(255, 235, 180, .6), inset -1px -1px 1px rgba(160, 110, 0, .5), inset 3px 3px 6px rgba(0, 0, 0, .25);
    inset: 14px;
    pointer-events: none;
    position: absolute;
    will-change: transform;
    z-index: 10
}

#ctlg {
    background: #343434;
    border-radius: 20px;
    box-shadow: inset 0 0 20px 0 #00000054;
    padding: 1rem
}

#zd {
    font-size: 1.3rem;
    font-weight: 100;
    margin: 0 0 22px
}

#itemlist {
    display: none
}

.content-area {
    border-radius: 1.375rem;
    display: flex;
    flex-direction: column;
    inset: 14px;
    justify-content: space-evenly;
    overflow: hidden;
    z-index: 5
}

.content-area,
.gradient-overlay {
    position: absolute;
    will-change: transform
}

.gradient-overlay {
    background: linear-gradient(0deg, hsla(0, 0%, 4%, .9) 0, hsla(0, 0%, 4%, .65) 50%, transparent);
    bottom: 0;
    height: 75%;
    left: 0;
    pointer-events: none;
    right: 0;
    z-index: 15
}

.tour-button {
    align-items: center;
    background: linear-gradient(145deg, #fde047, #facc15);
    border: none;
    border-radius: 9999px;
    box-shadow: inset 2px 2px 4px rgba(160, 110, 0, .6), inset -2px -2px 4px rgba(255, 245, 200, .5), 0 1px 2px rgba(0, 0, 0, .1);
    color: #422006;
    display: flex;
    font-weight: 600;
    gap: .75rem;
    justify-content: center;
    letter-spacing: .025em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    max-width: 85%;
    min-width: 190px;
    padding: .75rem 1.75rem;
    position: relative;
    text-align: center;
    transform: translateZ(40px);
    transition: all .3s ease;
    width: auto;
    will-change: transform, box-shadow, background;
    z-index: 20
}

.tour-button:hover {
    background: linear-gradient(145deg, #feec80, #fde047);
    box-shadow: inset 2px 2px 5px rgba(160, 110, 0, .5), inset -2px -2px 5px rgba(255, 245, 200, .6), 0 2px 4px rgba(0, 0, 0, .15);
    color: #3f2810;
    transform: translateZ(40px) translateY(-2px)
}

.tour-button:active {
    background: linear-gradient(145deg, #facc15, #eab308);
    box-shadow: inset -2px -2px 4px rgba(160, 110, 0, .6), inset 2px 2px 4px rgba(255, 245, 200, .5), 0 0 0 #fff0;
    transform: translateZ(40px) translateY(0)
}

.cloud,
.cloud2,
.cloud3,
.cloud4 {
    -webkit-animation: cloud 4.5s linear 2s infinite alternate;
    animation: cloud 8s ease 2s infinite alternate;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 160px
}

.cloud2 {
    animation-duration: 6s;
    left: 22%;
    top: 52%;
    z-index: 2222
}

.cloud3 {
    animation-duration: 7s;
    left: 71%;
    top: 22%
}

.cloud4 {
    animation-duration: 10s;
    left: 11%;
    top: 92%
}

.logo5 {
    animation: logo 6s ease 0s infinite alternate
}

.logo6 {
    animation: logo 7s ease 0s infinite alternate
}

.logo4 {
    animation: logo1 12s ease 0s infinite alternate
}

@keyframes logo1 {
    0% {
        opacity: .5;
        transform: translateY(0) rotate(10deg)
    }

    to {
        opacity: 1;
        transform: translateY(-15px) rotate(35deg)
    }
}

@keyframes logo {
    0% {
        opacity: .5;
        transform: translateY(0)
    }

    to {
        opacity: 1;
        transform: translateY(-15px)
    }
}

@keyframes cloud {
    0% {
        opacity: 0;
        transform: translateY(0)
    }

    to {
        opacity: .8;
        transform: translateY(-3px)
    }
}

#new,
#weekly,
#weeklystar {
    zoom: 1.1;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center
}

.modal-arrow {
    border-radius: 10px;
    color: #ffffff33;
    cursor: pointer;
    font-size: 76px;
    font-weight: 700;
    padding: 8px 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: color .2s ease;
    user-select: none;
    z-index: 1001
}

#modal-left-arrow {
    left: 10px
}

#modal-right-arrow {
    right: 10px
}

.modal-arrow:hover {
    color: #ffffffb9
}

@media (pointer:coarse) {
    .modal-arrow {
        display: none
    }
}

#credits-modal {
    display: none;
    padding: 20px;
    pointer-events: none;
    z-index: 9999
}

#credits-content {
    background: #1c1c1c;
    border-radius: 12px;
    box-shadow: 0 0 15px #000;
    color: #eee;
    font-size: 14px;
    min-width: 575px;
    padding: 0 25px 25px;
    position: absolute;
    width: min-content
}

#close-credits {
    color: #aaa;
    cursor: pointer;
    font-size: 35px;
    position: absolute;
    right: 15px;
    top: 0
}

#credits-content>h2 {
    color: #fc0;
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center
}

#credits-content>p {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 30px;
    text-align: center
}

#search-wrapper {
    position: relative;
    display: inline-block;
}

#search-bar {
    border: 1px solid #353535;
    background: #3e3e3e;
    padding: 10px;
    font-size: 22px;
    padding-inline-start: 15px;
    width: 100%;
    box-sizing: border-box;
}

#search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #222;
    border-radius: 0;
    box-shadow: 0 2px 12px #0008;
    color: #fff;
    max-height: 350px;
    overflow-y: auto;
    z-index: 9999;
}

#search-results::-webkit-scrollbar {
    width: 11px
}

#search-results::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 5px #000
}

#search-results::-webkit-scrollbar-thumb {
    background: #545454;
    border-radius: 10px
}

#search-results::-webkit-scrollbar-thumb:hover {
    background: #484848
}

.search-item {
    font-size: 1.1em;
    text-align: left;
    transition: background .15s
}

#credits-content>div:last-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: .95rem;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

#credits-content>div:last-child div {
    background: #2c2c2c;
    border-radius: 10px;
    padding: 15px
}

.circlebutton {
    -webkit-text-stroke: thin;
    background: #858585;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    float: right;
    font-family: monospace;
    font-size: 23px;
    height: 40px;
    line-height: 40px;
    margin-left: 0;
    padding: 1px;
    right: 20px;
    text-align: center;
    transition: .1s;
    user-select: none;
    width: 40px;
    z-index: 1000
}

.circlebutton:hover {
    background: #777
}

#credits-content>div:last-child div p {
    font-size: 16px
}

.butts {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    float: right;
    gap: 17px;
    height: 0;
    top: 21px;
    position: relative;
}

.bn {
    background: #424242;
    padding: 10px;
    text-align: center
}

@media (min-width:1035px) {
    .catalog:has(#weeklystar) {
        flex: 0 0 36vw
    }

    .catalog:has(#weekly) {
        flex: 0 0 36vw
    }

    .catalog:has(#new) {
        flex: 0 0 36vw
    }
}

@media (max-width:800px) {

    .welcome h1 {
        font-size: 2em;
    }

    .cloud,
    .cloud2,
    .cloud3,
    .cloud4 {
        width: 100px
    }

    nav a {
        align-items: stretch;
        border-radius: 100%;
        box-shadow: inset 2px 2px 4px rgba(160, 110, 0, .6), inset -2px -2px 4px rgba(255, 245, 200, .5), 0 1px 2px rgba(0, 0, 0, .1);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: inherit;
        padding: .35rem;
        transition: all .3s cubic-bezier(.18, .89, .32, 1.28);
        width: calc(3vw + 60px)
    }

    nav a:active,
    nav a:hover {
        transform: none
    }

    nav a:active {
        margin-bottom: 0
    }

    nav {
        flex: 1;
        flex-wrap: wrap;
        gap: 16px;
        height: auto;
        margin-bottom: 20px;
        margin-left: 75px;
        margin-right: 75px;
        width: 190px
    }

    nav a:hover img {
        margin-bottom: 0;
        padding: 0
    }
}

@media (max-width:600px) {
    nav {
        flex: 1;
        flex-wrap: wrap;
        gap: 16px;
        height: auto;
        margin-bottom: 20px;
        margin-left: 15px;
        margin-right: 15px;
        width: auto
    }

    #credits-modal {
        backdrop-filter: blur(6px);
        background-color: rgba(0, 0, 0, .5);
        display: none;
        height: -webkit-fill-available;
        left: 0;
        padding: 20px;
        pointer-events: auto;
        position: fixed;
        top: 0;
        width: -webkit-fill-available;
        z-index: 9999
    }

    .bn {
        display: none
    }

    header {
        display: grid;
        padding: 1rem 2.2rem 0;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .catalog:has(#new) .title {
        justify-self: anchor-center
    }

    .catalog:has(#weekly) .title {
        justify-self: anchor-center
    }

    .catalog:has(#weeklystar) .title {
        justify-self: anchor-center
    }

    .catalog:has(#ctlg) .title {
        font-size: 26px;
        justify-self: anchor-center
    }

    .title {
        font: 700 3rem 'Source Sans Pro';
        text-shadow: 2px 3px 9px rgba(0, 0, 0, 0.255);
    }

    #donate-btn {
        font-size: 1.8rem;
    }

    #search-bar {
        font-size: 18px;
    }

    input {
        font-size: 2rem
    }

    #messages {
        height: 200px
    }

    #credits-content {
        background: #1c1c1c;
        border-radius: 12px;
        box-shadow: 0 0 15px #000;
        color: #eee;
        font-size: 14px;
        margin: 60px auto;
        min-width: 85%;
        padding: 0 25px 25px;
        position: relative
    }

    #close-credits {
        color: #aaa;
        cursor: pointer;
        font-size: 35px;
        position: absolute;
        right: 15px;
        top: 0
    }

    #credits-content>h2 {
        color: #fc0;
        font-size: 3rem;
        margin-bottom: 10px;
        padding-top: 11px;
        text-align: center
    }

    #dacord {
        display: none
    }

    #credits-content>p {
        color: #ccc;
        font-size: 1.3rem;
        margin-bottom: 30px;
        margin-top: 18px;
        text-align: center
    }

    .discord {
        font: 600 1.45em BuilderSans
    }


    #zd {
        font-size: 1.6rem;
        font-weight: 100;
        margin: 0 0 17px;
        color: #ffffff40;
    }

    #donate-modal {
        zoom: 0.8;
    }

    #credits-content>div:last-child {
        gap: 8px 5px
    }

    #credits-content>div:last-child div {
        padding: 9px;
        width: 120px
    }

    #credits-content>div:last-child div p {
        font-size: 12px
    }

    #credits-content>div:last-child div:nth-child(3) {
        display: none
    }

    #grid {
        zoom: .27
    }

    section:first-of-type {
        margin-bottom: 64px;
        padding: 0rem 0rem 9rem
    }

    .butts {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        float: right;
        gap: 9px;
        height: 0;
        margin: 0 2000px;
        position: relative;
        top: 149px;
    }

    .logo-container {
        margin-bottom: 18px;
        position: relative;
        transform: scale(.8);
        transition: transform .25s cubic-bezier(.7, .38, .24, 1.27);
        z-index: 1
    }

    .logo-container:hover {
        transform: scale(.9) rotate(2.4deg)
    }

    .search-item {
        font-size: 1.6em;
        text-align: left;
        transition: background .15s
    }



    #refresh-button {
        background: #888;
        border-radius: 50%;
        box-shadow: 0 0 10px hsla(0, 0%, 100%, 0);
        color: #fff;
        cursor: pointer;
        float: right;
        font-family: monospace;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        position: absolute;
        right: 13px;
        text-align: center;
        margin-right: 13px;
        transition: .5s;
        user-select: none;
        width: 40px;
        z-index: 1000
    }

    #random {
        zoom: .88
    }



    section {
        zoom: 1;
        background: #666;
        border: 15px solid #555;
        border-radius: 33px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
        flex: 1 20030px;
        padding: 1vw;
        position: sticky;
        z-index: 22
    }



    #indicator {
        right: 32px
    }

    .scammer-block {
        max-width: 600px
    }

    .scammer-content {
        align-items: flex-start;
        flex-direction: column
    }

    #ctlg {
        padding: 4rem 0;
        border-radius: 0px;
    }

    .parallax-bg {
        background-size: auto 104vh
    }

    .item:hover {
        transform: scale(1)
    }

    .scammer-img {
        place-self: center;
        width: 195px
    }

    .scammer-info h2 {
        font-size: 6.1rem
    }

    .scammer-info p {
        font-size: 3.9rem
    }

    .tour-button {
        font-size: 29px;
        margin-top: 21px;
        padding: 1.75rem;
        width: 370px
    }

    #new,
    #weekly,
    #weeklystar,
    #random {
        zoom: .8;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: center
    }

    #random {
        width: 383px;
        justify-self: anchor-center;
    }

    .modal-title {
        text-wrap-style: balance;
        font: 900 39px 'Source Sans Pro';
    }

    #ctlg {
        zoom: 0.8;
        width: -webkit-fill-available;
    }

    .welcome h1 {
        font-family: BuilderSans;
        font-size: 2.7em;
    }

    #h3 {
        font: 100 1.2em 'Source Sans Pro'
    }

    .logo4 {
        bottom: -44px;
        left: 85%;
        position: absolute;
        transform: rotate(25deg);
        transition: 1s ease-in-out;
        width: 135px
    }

    .modal-content {
        scale: .8
    }

    .logo5 {
        bottom: -72px;
        font: 200 176px Bunny Flowers;
        left: -50%
    }

    .logo6 {
        font: 200 55px Bunny Flowers;
        left: 10%;
        top: 113%
    }

    div .psp {
        float: none;
        margin: 30px auto
    }

    div .psp p {
        font-size: 5rem
    }

    .tooltip {
        display: none
    }

    .logo-header {
        scale: .6
    }

    .catalog {
        zoom: 1;
        background: #666;
        border-radius: 0px;
        border-left: 0px;
        display: flex;
        border-right: 0px;
        margin: 0px;
        margin-bottom: 30px;
        padding: 1rem;
        position: sticky;
        z-index: 22;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .half {
        zoom: 1;
        background: #666;
        border: 15px 0 0 0 solid #555;
        border-radius: 0px;
        border-left: 0px;
        border-right: 0px;
        margin: 0px;
        margin-bottom: 30px;
        padding: 1rem;
        position: sticky;
        z-index: 22
    }

    #donators-list {
        zoom: 0.9;
    }
}

@media (pointer:coarse) {
    .modal-arrow {
        display: none !important
    }
}


@keyframes heart-pulse {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.2);
    }

    40% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1.15);
    }

    80% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

.heart-pulsing {
    animation: heart-pulse 0.5s ease;
}


.heart-button:hover {
    transform: scale(1.2);
}

.heart-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .item:hover .heart-button {
        opacity: 1;
        pointer-events: auto;
    }
}

.favorited {
    opacity: 1 !important;
}


.modal-content.swipeRight {
    left: 100vw;

}

.modal-content.swipeLeft {
    left: -100vw;

}

.modal-content.forceSwipe {
    transition: left 0s ease;

}