/*
 Copyright (c) 2026 Ashraf Morningstar
 These are personal recreations of existing projects, developed by Ashraf Morningstar
 for learning and skill development.
 Original project concepts remain the intellectual property of their respective creators.
 Repository: https://github.com/AshrafMorningstar
*/

/*
═══════════════════════════════════════════════════════════════════════════════
Color Palette Generator - Vibrant Gradient Design
Created by: Ashraf Morningstar
GitHub: https://github.com/AshrafMorningstar
Repository: https://github.com/AshrafMorningstar/Ultimate-Web-Dev-Journey
═══════════════════════════════════════════════════════════════════════════════
*/

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6C63FF;
    --secondary: #4ECDC4;
    --accent: #FF6B6B;
    --dark: #1a1a2e;
    --light: #ffffff;
    --gray: #f5f5f5;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 600px;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

h1 {
    color: var(--dark);
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

#app {
    margin-top: 30px;
}

button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

button:hover {
    background: #5a52d5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4);
}

button:active {
    transform: translateY(0);
}

input, select {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

footer {
    margin-top: 40px;
    text-align: center;
    color: white;
    font-size: 0.9rem;
}

footer a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid white;
    transition: all 0.3s ease;
}

footer a:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .card {
        padding: 30px 20px;
    }
    
    h1 {
        font-size: 2rem;
    }
}