body { 
    margin: 0; 
    font-family: Arial; 
    background: linear-gradient(135deg, #87CEEB, #98FB98); 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

header { 
    background: #333; 
    color: white; 
    padding: 15px; 
    text-align: center; 
}

.logo { 
    font-size: 2em; 
    margin-bottom: 10px; 
}

.container { 
    text-align: center; 
    padding: 30px; 
    flex: 1; 
}

.colors { 
    margin: 20px 0; 
}

.color { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    margin: 8px; 
    cursor: pointer; 
    border: 4px solid #fff; 
    border-radius: 50%; 
    transition: transform 0.2s; 
}

.color:hover { 
    transform: scale(1.1); 
}

.color.active { 
    border-color: #000; 
    transform: scale(1.2); 
}

canvas { 
    border: 3px solid #333; 
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    display: block; 
    margin: 0 auto; 
}

footer { 
    background: #333; 
    color: white; 
    text-align: center; 
    padding: 20px; 
    margin-top: auto; 
}

.cloud { 
    position: absolute; 
    background: white; 
    border-radius: 50px; 
    opacity: 0.8; 
    animation: float 6s ease-in-out infinite; 
}

.cloud:before { 
    content: ''; 
    position: absolute; 
    background: white; 
    border-radius: 50px; 
}

.cloud1 { 
    width: 80px; 
    height: 40px; 
    top: 20%; 
    left: 10%; 
    animation-delay: 0s; 
}

.cloud2 { 
    width: 60px; 
    height: 30px; 
    top: 15%; 
    right: 15%; 
    animation-delay: 2s; 
}

.cloud3 { 
    width: 70px; 
    height: 35px; 
    top: 25%; 
    left: 70%; 
    animation-delay: 4s; 
}

@keyframes float { 
    0%, 100% { transform: translateY(0px); } 
    50% { transform: translateY(-10px); } 
}

@media (max-width: 768px) {
    .logo { 
        font-size: 1.5em; 
    }
    
    .container { 
        padding: 15px; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    
    .color { 
        width: 40px; 
        height: 40px; 
        margin: 5px; 
    }
    
    canvas { 
        width: 100%; 
        height: auto; 
        max-width: 350px; 
        display: block; 
        margin: 0 auto; 
    }
    
    .colors { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        max-width: 350px; 
    }
    
    .cloud { 
        display: none; 
    }
    
    footer p { 
        font-size: 0.9em; 
    }
}