@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

.gradient-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #581c87 100%);
}

.coin-animation {
    animation: coinFloat 3s ease-in-out infinite;
}

@keyframes coinFloat {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(180deg);
    }
}

.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}

.page-active {
    opacity: 1;
    transform: translateY(0);
}

.nav-active {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}