stocks-fe/static/css/form.css

.text-column {
    text-align: center; /* Center align text */
}

.card {
    background-color: #ffffff; /* White background for the card */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 20px; /* Padding inside the card */
    width: 300px; /* Fixed width for the card */
    transition: transform 0.3s; /* Transition for hover effect */
}

.card:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
}

.input-field {
    width: 90%; /* Full width for inputs */
    padding: 12px; /* Padding for input fields */
    margin: 10px 0; /* Margin between input fields */
    border: 1px solid #ccc; /* Light border */
    border-radius: 6px; /* Rounded corners for input fields */
    font-size: 16px; /* Font size for input text */
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s; /* Transition for border color */
}

.input-field:focus {
    border-color: #007bff; /* Change border color on focus */
}

button {
    width: 100%; /* Full width for the button */
    margin: 5px 0;
    padding: 12px; /* Padding for the button */
    background-color: #007bff; /* Button color */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 6px; /* Rounded corners for button */
    font-size: 16px; /* Font size for button text */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s; /* Transition for button color */
}

.login-button {
    background-color: #007bff; /* Button color */
    color: white; /* White text color */
}

.register-button {
    background-color: #20bf6b; /* Button color */
    color: white; /* White text color */
}

.login-button:hover {
    background-color: #0056b3; /* Darker button color on hover */
}