@import "tailwindcss";

/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
}

.glass {
    -webkit-backdrop-filter: blur(12px);
    background: rgba(23, 23, 23, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.text-outline {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    color: transparent;
}

.clip-slant {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.card-image-cycle {
    animation: cardImageFade 16s infinite;
}

.card-image-cycle:nth-child(1) {
    animation-delay: 0s;
}

.card-image-cycle:nth-child(2) {
    animation-delay: -4s;
}

.card-image-cycle:nth-child(3) {
    animation-delay: -8s;
}

.card-image-cycle:nth-child(4) {
    animation-delay: -12s;
}

@keyframes cardImageFade {
    0% {
        opacity: 0;
    }

    6.25% {
        opacity: 1;
    }

    18.75% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.level-benefits-wrap {
    position: relative;
    flex: 1 1 0%;
    min-height: 0;
    max-height: 14rem;
    margin-bottom: 1.5rem;
}

.level-benefits-list {
    height: 100%;
    max-height: 14rem;
    overflow-y: auto;
    padding-right: 0.5rem;
    padding-bottom: 4rem;
    scrollbar-gutter: stable;
}

.level-benefits-list::-webkit-scrollbar {
    width: 6px;
}

.level-benefits-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.level-benefits-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
}

.level-benefits-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
}

.level-benefits-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to top, rgb(10 10 10), transparent);
}

.sponsor-card {
    height: 5rem;
    background: rgb(23 23 23);
    border: 1px solid rgb(38 38 38);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sponsor-logo {
    max-height: 3rem;
    max-width: 100%;
    object-fit: contain;
}

.grecaptcha-badge {
    opacity: 0;
    visibility: hidden;
}