/* Overall background */
body {
    background-color: #000000; /* Black background */
    color: white; /* Default text color for contrast */
}

/* Remove bullet points */
ul {
    list-style-type: none;
    padding: 0;
}

/* Style the links as chunky buttons */
ul li {
    margin-bottom: 10px; /* Space between the buttons */
}

ul li a {
    display: block; /* Make the link take up the full width */
    padding: 15px; /* Add padding for a chunky button effect */
    background-color: #4CAF50; /* Button background color (green in this case) */
    color: white; /* Text color */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Round the corners */
    font-size: 18px; /* Make the text larger */
    font-weight: bold; /* Make the text bold */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: background-color 0.3s ease; /* Add a hover transition */
}

/* Hover effect for the links */
ul li a:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Optional: Change the button appearance on active (pressing the button) */
ul li a:active {
    background-color: #388e3c; /* Even darker green when the button is pressed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slightly reduce shadow */
}


/* Remove bullet points */
ul.link-list {
    list-style-type: none;
    padding: 0;
}

/* Style the links as chunky buttons with red background and black bold text */
ul.link-list li {
    margin-bottom: 10px; /* Space between the buttons */
}

/* Style the links as chunky buttons with red background and black bold text, with a gradient to blue */
ul.link-list li a {
    display: block; /* Make the link take up the full width */
    padding: 15px; /* Add padding for a chunky button effect */
    background: linear-gradient(to right, #e74c3c 85%, #3498db); /* Red to blue gradient */
    color: #000000; /* Bold black text */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
    border-radius: 5px; /* Round the corners */
    font-size: 18px; /* Make the text larger */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: background-color 0.3s ease; /* Add a hover transition */
}

/* Hover effect for the links */
ul.link-list li a:hover {
    background: linear-gradient(to right, #c0392b 55%, #2980b9); /* Darker red to darker blue on hover */
}

/* Optional: Change the button appearance on active (pressing the button) */
ul.link-list li a:active {
    background: linear-gradient(to right, #a93226 85%, #1f78b4); /* Even darker red to blue when the button is pressed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slightly reduce shadow */
}


/* Full-screen background image container */
.login-background {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    background-color: #f0f0f0; /* Light background to make the form stand out */
}

/* Centered login container */
.login-container {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    width: 350px; /* Width of the login form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a shadow for depth */
}

/* Shrink the lamb logo and overlay it */
.logo-container {
    position: relative;
    width: 100%;
    height: 100px; /* Adjust the height to fit the container better */
    overflow: hidden; /* Ensure the image doesn't overflow */
}

.lamb-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-2%);
    width: 160px; /* Shrink the logo further */
    height: auto;
    z-index: 1; /* Ensure the image is in the background */
    opacity: 0.3; /* Lighten the image to keep focus on the form */
}

/* Style for the form elements */
.login-container input[type="text"], 
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50; /* Green button */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #45a049; /* Darker green on hover */
}