body, html {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: #fff;
    background-color: #0a0a0a;
}
* {
    z-index: 1;
}
.background {
    z-index: 0;
    position: fixed;
    left: 0; /* Add this */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(transparent 0,transparent 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.184' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='13' specularConstant='0.3' specularExponent='20' lighting-color='%23ffffff' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='133'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='specularLighting' result='colormatrix'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%2300000000'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23ffffff' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
    animation: blink 2s infinite;
}
@keyframes blink {
    0% {
      opacity: 1;
    }
    
    10% {
      opacity: 0.8;
    }
    20% {
      opacity: 0.9;
    }
    30% {
      opacity: 0.6;
    }
    40% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.7;
    }
    60% {
      opacity: 0.4;
    }
    70% {
      opacity: 1;
    }
    80% {
      opacity: 0.6;
    }
    90% {
      opacity: 0.8;
    }
    100% {
      opacity: 1;
    }
}
p {
    margin: 0;
}



.noty {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}
.noty {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: fit-content;
    margin: 0 0 16px;
    padding: 36px;
    border-radius: 100%;
    color: #666cff;
    background-color: #666cff40;
    backdrop-filter: blur(2px);
}
.noty h1 {
    margin: 0;
    font-size: 4rem;
}



.buttons {
    display: flex;
    gap: 6px;
}
.button {
    display: flex;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 8px;
    color: #fff;
    background-color: #1e1e1e;
    transition: all .2s;
}
.button:hover {
    border-radius: 12px;
    background-color: #181818;
}
.download-button .button {
    margin-bottom: 12px;
    padding: 12px 24px;
    background-color: #666cff;
}



.slider {
    overflow: hidden;
    position: absolute;
    bottom: 16px;
    max-width: 800px;
    margin: 12px 12px 0;
    padding: 12px;
    border-radius: 8px;
    background-color: #1e1e1e;
}

.card-container,
.cards {
    display: flex;
}

.card {
    display: flex;
    align-items: center;
    text-align: start;
    gap: 8px;
    padding: 6px;
    border: 2px solid #111111;
    border-radius: 8px;
    background-color: #111111;
}
.supporter-plus-card {
    border: 2px solid #E4B963;
    background: #423721;
}

.card img {
    height: 42px;
    border-radius: 8px;
}

.card p {
    font-weight: 500;
}

.card p.small {
    font-weight: 400;
}

.card span.small {
    margin: 0 4px;
}

.card .small {
    width: fit-content;
    opacity: .5;
    font-size: small;
    font-weight: 400;
}

.card .icon-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cards::after {
    content: "";
    width: 4px;
    height: 60%;
    margin: auto 12px;
    border-radius: 8px;
    background-color: #111111;
}