style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a202c;
}

::-webkit-scrollbar-thumb {
    background: #2d3748;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* Goal celebration animation */
@keyframes goalCelebration {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.goal-animation {
    animation: goalCelebration 0.5s ease-in-out;
}

/* Fade out animation */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-out {
    animation: fadeOut 0.5s ease-in forwards;
}

/* Button press animation */
@keyframes buttonPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.button-press {
    animation: buttonPress 0.2s ease-in-out;
}

/* Ball movement animation */
@keyframes ballMove {
    0% { transform: translateX(-100px) translateY(0); }
    50% { transform: translateX(0) translateY(-20px); }
    100% { transform: translateX(100px) translateY(0); }
}

.ball-move {
    animation: ballMove 0.8s ease-in-out forwards;
}

/* Goal net animation */
@keyframes netShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.net-shake {
    animation: netShake 0.5s ease-in-out;
}