/* Custom CSS for AIUI.kr */

/* Tailwind config */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* Custom font family */
.font-pacifico {
    font-family: 'Pacifico', cursive;
}

/* Custom color variables */
:root {
    --yellow: #F7DA02;
    --dark-bg: #282828;
    --darker-bg: #3A3A3A;
    --light-text: #EEEEEE;
}

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

/* Custom styles that might not be in Tailwind */
.bg-yellow-custom {
    background-color: var(--yellow);
}

.text-yellow-custom {
    color: var(--yellow);
}

.bg-dark-custom {
    background-color: var(--dark-bg);
}

.bg-darker-custom {
    background-color: var(--darker-bg);
}

.text-light-custom {
    color: var(--light-text);
}

/* Hover effects */
button:hover {
    transform: translateY(-2px);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Animation for the bouncing arrow */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.animate-bounce-custom {
    animation: bounce 2s infinite;
}

/* Portfolio card hover effects */
.portfolio-card {
    transition: all 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(247, 218, 2, 0.1);
}

/* Button styles */
.btn-primary {
    background-color: var(--yellow);
    color: black;
    font-weight: 900;
    padding: 1rem 2.5rem;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: rgba(247, 218, 2, 0.9);
    transform: scale(1.05);
}

.btn-secondary {
    border: 2px solid var(--yellow);
    color: var(--yellow);
    background: transparent;
    font-weight: 900;
    padding: 1rem 2.5rem;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--yellow);
    color: black;
}