@font-face {
  font-family: 'Lexend'; /* Choose a name for your font */
  src: url('../Lexend/Lexend-VariableFont_wght.ttf') format('woff2'); /* Variable font */
  font-weight: 1 1000; /* Set the font weight range */
  font-style: normal; /* Set the font style */
}

/* General styles for the body of the page */
body {
    font-family: 'Lexend', sans-serif; /* Use Lexend font */
    background-color: #11171A; /* Dark background color */
    color: white; /* White text color */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100vh; /* Full viewport height */
    background-image: url("https://assets-global.website-files.com/654bbd67b4e0953f279b843e/654bcada2226a9620e0b6ef4_bg_hero_img.png"); /* Background image */
}

/* Styles for the login container */
.login-container {
    max-width: 300px; /* Maximum width of the container */
    padding: 20px; /* Padding around the content */
    text-align: center; /* Center align text */
    font-family: 'Lexend', sans-serif; /* Use Lexend font */
}

/* Styles for the headings */
h2 {
    margin-bottom: 20px; /* Spacing below the heading */
}

/* Styles for the input group container */
.input-group {
    margin-bottom: 20px; /* Spacing below each input group */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align items */
    font-family: 'Lexend', sans-serif; /* Use Lexend font */
}

/* Styles for the input fields */
.input-group input {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the input */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
}

/* Styles for the input placeholder text */
input::placeholder {
    color: #ccc; /* Light gray color */
}

/* Styles for the buttons */
button {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the button */
    background-color: #fe4301; /* Electric orange background color */
    border: none; /* Remove border */
    color: white; /* White text color */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-bottom: 10px;
    font-family: 'Lexend', sans-serif; /* Use Lexend font */
}

/* Hover effect for buttons */
button:hover {
    background-color: #000000; /* Change background color on hover */
}

/* Styles for the dashboard content */
.dashboard-content {
    margin-top: 20px; /* Spacing above the dashboard content */
    display: block; /* Ensure it's displayed as a block-level element */
    clear: both; /* Clear floats */
}

/* Styles for error messages */
.error-message {
    color: #ff0000; /* Red text color */
    margin-top: 10px; /* Spacing above the error message */
    text-align: center; /* Center align text */
}

/* Styles for the logo */
.logo {
    max-width: 100px; /* Maximum width of the logo */
    margin-bottom: 20px; /* Spacing below the logo */
}

/* Styles for the social icons container */
.social-icons {
    margin-top: 40px; /* Spacing above the social icons */
}

/* Styles for the social icon links */
.social-icons a {
    margin: 0 5px; /* Horizontal spacing between icons */
}

/* Styles for the social icon images */
.social-icons img {
    height: 30px; /* Height of the icons */
}

/* Additional styles for the logo */
.logo {
    width: 100%; /* Set logo width to match parent width */
    max-width: 250px; /* Limit the maximum width of the logo */
    margin-bottom: 20px; /* Spacing below the logo */
}