Nuevo chat

/* Colores de Argentina: Celeste y Blanco */
:root {
    --color-celeste: #74acdf; /* Celeste claro, similar a la bandera */
    --color-blanco: #ffffff;
    --color-azul-oscuro: #004b8d; /* Azul para contraste (texto/botones) */
    --color-gris-claro: #f4f4f9; /* Un gris muy suave para toques sutiles */
}
/* 1. Fondo del Body (Celeste) */
/* Esto le dará el color celeste de fondo a toda la ventana */
body {
    font-family: Arial, sans-serif;
    background-color: var(--color-celeste); /* El fondo principal es celeste */
    color: var(--color-azul-oscuro); /* Color de texto predeterminado */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
/* 2. Fondo del Contenedor (Blanco) */
/* Esto le dará el color blanco al área de contenido principal */
.container {
    background-color: var(--color-blanco); /* El contenedor central es blanco */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
    text-align: center;
    margin: 20px 0;
}
/* 3. Ajustes de Estilo Adicionales para el tema */
/* Título */
h1 {
    color: var(--color-azul-oscuro);
    margin-bottom: 25px;
}
/* Botón de Comprimir */
.compress-btn {
    background-color: var(--color-azul-oscuro); /* Botón en azul oscuro */
    color: var(--color-blanco);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 20px;
}
.compress-btn:hover {
    background-color: #0066c0; /* Un azul un poco más claro al pasar el mouse */
}
/* Mensajes de éxito/error */
.message.success {
    background-color: #e0f7fa; /* Fondo muy claro (casi blanco) */
    color: var(--color-azul-oscuro);
    border: 1px solid var(--color-celeste);
}
.message.error {
    background-color: #ffebee; /* Fondo para errores */
    color: #c62828;
    border: 1px solid #c62828;
}
/* Elementos del formulario */
.upload-form {
    padding: 20px;
    border: 2px dashed var(--color-celeste); /* Borde punteado celeste */
    border-radius: 10px;
    background-color: var(--color-gris-claro); /* Fondo del formulario un gris suave */
}
/* Etiqueta del input file */
.file-input label {
    color: var(--color-azul-oscuro);
    font-weight: bold;
}

Change the styles to make the website more attractive, I want a modern look that will astonish all my visitors
Untitled
Texto 

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body {
    font-family: 'Inter', sans-serif;
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}
.container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
h1 {
    text-align: center;
    color: #2d3748;
    margin-bottom: 40px;
    font-size: 2.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.upload-form {
    text-align: center;
}
.file-input {
    margin: 30px 0;
    padding: 30px;
    border: 3px dashed #e2e8f0;
    border-radius: 15px;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}
.file-input:hover {
    border-color: #667eea;
    background: linear-gradient(145deg, #edf2f7, #e2e8f0);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}
.file-input label {
    display: block;
    color: #4a5568;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    cursor: pointer;
}
.file-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.custom-file-button {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #4a5568;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 200px;
}
.custom-file-button:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.file-name-display {
    margin-top: 15px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    color: #4a5568;
    font-size: 0.9rem;
    display: none;
}
.compress-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
}
.compress-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
}
.compress-btn:active {
    transform: translateY(0);
}
.message {
    margin-top: 25px;
    padding: 15px 20px;
    border-radius: 12px;
    font-weight: 500;
    text-align: center;
}
.success {
    background: linear-gradient(135deg, #68d391, #48bb78);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
}
.error {
    background: linear-gradient(135deg, #fc8181, #e53e3e);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
}
.info {
    background: linear-gradient(135deg, #63b3ed, #4299e1);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
}
.supported-formats {
    margin-top: 30px;
    text-align: center;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 400;
}
.supported-formats p {
    margin: 0;
    padding: 15px;
    background: rgba(113, 128, 150, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(113, 128, 150, 0.2);
}

Change the styles to make the website more attractive, I want a modern look that will astonish all my visitors!
Modern Stunning Website Styles
Código 

I've created a stunning, modern CSS design that will absolutely astonish your visitors! Here's what makes it special:

✨ Key Features:

    Mesmerizing Dark Theme - Deep gradient background with animated floating particles that drift across the screen
    Glassmorphism Effects - Semi-transparent container with frosted glass blur effects
    Animated Glow Effects - The title pulses with a glowing effect and has an animated underline
    Interactive Hover Animations - Everything responds beautifully when you hover (buttons scale up, glow intensifies, file input transforms)
    Ripple Effects - Buttons have expanding ripple animations on hover
    Smooth Transitions - All animations use professional easing functions for buttery-smooth motion
    Modern Typography - Space Grotesk font for a contemporary, tech-forward look
    Vibrant Gradients - Eye-catching purple, pink, and blue gradients throughout
    Depth & Shadows - Multiple layered shadows create a 3D floating effect
    Responsive Design - Looks great on all screen sizes

The design combines cutting-edge trends like glassmorphism, gradient overlays, micro-interactions, and animated backgrounds to create an unforgettable user experience. Your visitors will definitely say "whoa!" 🚀

The color of the fond is not so visible now. Can you fix that?
Modern Stunning Website Styles
Código ∙ Versión 2 

Perfect! I've brightened the title text by using lighter gradient colors and adding a brightness filter. The "Compresor de Video 10MB" title should now be much more visible and pop against the dark background. The text now uses lighter shades of purple, blue, and pink that will stand out beautifully! ✨

Now the page is scrollable! I don't want that. I want it to render in the space available
Modern Stunning Website Styles
Código 

Perfect! I've fixed the scrolling issue. The page now:

    Uses height: 100vh instead of min-height on the body
    Has overflow: hidden to prevent scrolling
    Centers content vertically and horizontally using flexbox
    Reduced padding and margins throughout to fit everything in the available viewport
    **Made the title sm


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

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

body {
    font-family: 'Space Grotesk', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated background particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 179, 237, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 10%, rgba(252, 70, 107, 0.3) 0%, transparent 50%);
    animation: drift 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.container {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    padding: 40px;
    border-radius: 30px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 100px rgba(120, 119, 198, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.8s ease-out;
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
}

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

h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #a8b5ff 0%, #b99dff 50%, #ffc4f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    position: relative;
    animation: glow 3s ease-in-out infinite;
    filter: brightness(1.3);
}

h1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    border-radius: 2px;
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(118, 75, 162, 0.6)); }
}

@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.upload-form {
    text-align: center;
}

.file-input {
    margin: 25px 0;
    padding: 35px 25px;
    border: 3px dashed rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.file-input::before {
    content: '📁';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    opacity: 0.1;
    transition: all 0.4s ease;
}

.file-input:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(102, 126, 234, 0.3),
        inset 0 0 60px rgba(102, 126, 234, 0.1);
}

.file-input:hover::before {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
}

.file-input label {
    display: block;
    color: #e2e8f0;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.file-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.custom-file-button {
    display: inline-block;
    padding: 18px 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    min-width: 250px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    z-index: 1;
}

.custom-file-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.custom-file-button:hover::before {
    width: 300px;
    height: 300px;
}

.custom-file-button:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 40px rgba(102, 126, 234, 0.6),
        0 0 60px rgba(118, 75, 162, 0.4);
}

.file-name-display {
    margin-top: 20px;
    padding: 15px 25px;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 15px;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 500;
    display: none;
    border: 1px solid rgba(102, 126, 234, 0.3);
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compress-btn {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    padding: 20px 60px;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 35px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 15px 35px rgba(245, 87, 108, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.compress-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.compress-btn:hover::before {
    left: 100%;
}

.compress-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 20px 50px rgba(245, 87, 108, 0.6),
        0 0 80px rgba(240, 147, 251, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.compress-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.message {
    margin-top: 30px;
    padding: 20px 30px;
    border-radius: 20px;
    font-weight: 600;
    text-align: center;
    font-size: 1.05rem;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.success {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 10px 30px rgba(86, 171, 47, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.error {
    background: linear-gradient(135deg, #eb3349, #f45c43);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 10px 30px rgba(235, 51, 73, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.info {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 10px 30px rgba(79, 172, 254, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.supported-formats {
    margin-top: 40px;
    text-align: center;
}

.supported-formats p {
    margin: 0;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e0;
    font-size: 1rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 40px 30px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    .file-input {
        padding: 40px 20px;
    }
    
    .custom-file-button,
    .compress-btn {
        padding: 16px 40px;
        font-size: 1rem;
        min-width: auto;
        width: 100%;
    }
}