@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    min-height: 100vh;
}

main {
    width: 100%;
}

.shadow-2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.rounded-xl {
    border-radius: 1rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 88, 15, 0.2);
}

.form-field input,
.form-field select,
.form-field textarea {
    transition: all 0.3s ease;
    border: 1px solid #d1d5db;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
}

.btn {
    @apply px-4 py-2 rounded-md font-medium text-sm transition-all duration-200;
    min-width: 120px;
    text-align: center;
    margin: 0.25rem 0;
}

/* Animation for form fields */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-field {
    animation: fadeIn 0.5s ease-out forwards;
}

.form-field:nth-child(1) { animation-delay: 0.1s; }
.form-field:nth-child(2) { animation-delay: 0.2s; }
.form-field:nth-child(3) { animation-delay: 0.3s; }
.form-field:nth-child(4) { animation-delay: 0.4s; }
.form-field:nth-child(5) { animation-delay: 0.5s; }