:root{
    --stejos-red:#0096fa;
    --stejos-yellow:#0c5eda;
}

body{
    font-family: "Mulish", sans-serif !important;
}

.glassy{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(235, 236, 236, 0.329);
}

.glassy-filters{
    backdrop-filter: blur(7px) saturate(100%);
    -webkit-backdrop-filter: blur(7px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.38);
    border-bottom: 1px solid rgba(209, 213, 219, 0.3);
}

.glassy-auth{
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(100%);
    background-color: rgba(255, 255, 255, 0.38);
    border-bottom: 1px solid rgba(209, 213, 219, 0.3);
}

.text-gradient {
  background: linear-gradient(to bottom right, #0c5eda, #0096fa); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

button:hover{
    transform: translateY(-2px);
}

.bg-stejos{
    background-color: var(--stejos-red);
}

/* Marquee */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

.container-block {
    container-type: inline-size;
}

@container (max-width: 1100px) {
    .container-block svg:nth-child(3),
    .container-block svg:nth-child(4) {
        display: none;
    }
}

.bg-info{
    background-image: url(/static/images/coming-soon.webp);
    background-position: center;
    background-attachment: fixed;
}