/* style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;/*margin and padding: Sets margin and padding to zero, removing default spacing.*/
    padding: 0;
    background-color: #f0f0f0;
}

.login-container {
    max-width: 600px;/*Sets the maximum width of the container to 600 pixels.*/
    margin: 50px auto;/*Centers the container horizontally by setting a top and bottom margin of 50 pixels and auto for left and right margins.*/
    background-color: #fff;
    padding: 20px;/*Adds 20 pixels of padding inside the container.*/
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* Adds a subtle shadow to the container for a visual effect*/
}

h1, h2 {
    text-align: center;
    color: #333;
}

.login-form {
    margin-top: 20px;
}

table {
    width: 100%;
}

input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.social-buttons {
    margin-top: 20px;
    text-align: center;
}

.facebook, .google, .instagram {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #3b5998; /* Facebook blue */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.google {
    background-color: #dd4b39; /* Google red */
}

.instagram {
    background-color: #e4405f; /* Instagram pink */
}

.social-buttons button:hover {
    opacity: 0.8;
}