.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.brutalist-shadow {
    box-shadow: 4px 4px 0px #1A1A1A;
}

.brutalist-shadow-blue {
    box-shadow: 6px 6px 0px #00B5E2;
}

.shadow-solid {
    box-shadow: 4px 4px 0px #1A1A1A;
}

.shadow-solid-lg {
    box-shadow: 8px 8px 0px #1A1A1A;
}

.brutalist-shadow-hover:hover {
    box-shadow: 6px 6px 0px #1A1A1A;
    transform: translate(-2px, -2px);
}

.brutalist-shadow-active:active {
    box-shadow: 2px 2px 0px #1A1A1A;
    transform: translate(2px, 2px);
}

.rotated-card-1 {
    transform: rotate(-1.5deg);
}

.rotated-card-2 {
    transform: rotate(2deg);
}

.rotated-card-3 {
    transform: rotate(-0.8deg);
}


.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: scroll 60s linear infinite;
    gap: 3rem;
    width: fit-content;
}

.marquee-content:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 100px;
    background: white;
    border: 4px solid #1A1A1A;
    box-shadow: 6px 6px 0px #1A1A1A;
    padding-inline: 1.5rem;
    transition: all 0.3s ease;
}

.sponsor-logo:hover {
    box-shadow: 8px 8px 0px #00B5E2;
    border-color: #00B5E2;
    transform: translate(-2px, -2px);
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

.animate-in.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-in.zoom-in {
    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


#project-modal .bg-white::-webkit-scrollbar {
    width: 10px;
}

#project-modal .bg-white::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#project-modal .bg-white::-webkit-scrollbar-thumb {
    background: #1A1A1A;
    border: 2px solid #f1f1f1;
}

#project-modal .bg-white::-webkit-scrollbar-thumb:hover {
    background: #00B5E2;
}