:root {
    --dark-blue: #0a192f;
    --navy: #172a45;
    --light-navy: #303f60;
    --lightest-navy: #465672;
    --blue: #4a8cff;
    --white: #e6f1ff;
}

body {
    background-color: var(--dark-blue);
    color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

.card {
    border-radius: 10px;
    border: 1px solid var(--light-navy);
}

.btn-primary {
    background-color: var(--blue);
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #3a7be0;
    transform: translateY(-2px);
}

.form-control {
    color: var(--white);
    border-radius: 5px;
}

.form-control:focus {
    background-color: var(--navy);
    color: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 0.25rem rgba(74, 140, 255, 0.25);
}


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

.card {
    animation: fadeIn 0.6s ease-out forwards;
}