body {
    font-family: Arial, sans-serif;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;  /* Stack the content vertically */
    min-height: 100vh;  /* Minimum height of 100% of the viewport height */
    background-image: url('/static/images/background4.png'); /* Set the background image here */
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Optional: to keep the background fixed during scroll */
   
}

main {
    flex-grow: 1;  /* Allow this element to grow and take up any remaining space */
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
    margin-top: 92px; /* Add a top margin to make room for the fixed header */
    margin-left: 0px;
    margin-right: 0px;
    z-index: 1; /* Position this element above the background image */
}

.landing-content {
    background-color: rgba(255, 255, 255, 0); /* Make the landing-content div transparent */
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.justified-text {
    text-align: justify;
    line-height: 1.6;
}

.background-section {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    max-width: 800px; /* Adjust this value to suit your design */
    margin: 0 auto; /* This centers the div */
    text-align: left;
    padding: 20px; /* Adds padding inside the section */
    border-radius: 20px; /* Rounds the corners of the section */
}

.landing-content div {
    margin-bottom: 15px; /* Adjust the space between the buttons */
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header {
    position: fixed; /* Fix the position of the header */
    top: 0; /* Position the header at the top of the page */
    width: 100%; /* Make the header span the full width of the page */
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.8); /* Change to your preferred color */
    color: rgb(17, 17, 17);
    text-align: center;
    border-bottom: 3px solid #e8491d; /* Change to your preferred color */
    z-index: 2; /* Position this element above the background image */
    display: flex; /* Added to use flexbox for layout */
    justify-content: space-between; /* Added to space out branding and login status */
    align-items: center; /* Added to vertically center content */
}


header a {
    color: rgb(17, 17, 17);
    text-decoration: none;
    font-size: 16px;
}

header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
}

#branding {
    display: flex; /* Use flexbox to align items in a row */
    align-items: center; /* Center items vertically */
    /* Add any additional styling such as padding or margins as needed */
}

.header-logo {
    height: 30px; /* or any size you prefer */
    width: auto;
    padding: 10px; /* Adds some space between the logo and the text */
}

#branding p, .branding-link p {
    margin: 0; /* Remove default margins */
    padding: 0;
}

.branding-link {
    display: flex; /* Ensures flexbox layout for the contents */
    align-items: center; /* Centers items vertically */
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Inherits the text color from parent elements */
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 10px;
}

header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}

header a:hover {
    color: #cccccc;
    font-weight: bold;
}

#login-status {
    position: absolute;
    right: 0;
    top: 0;
    padding: 20px;
}


.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #492909;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e8491d;
}

footer {
    width: 100%;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.5);; /* Change to your preferred color */
    text-align: center;
    border-top: 3px solid #e8491d; /* Change to your preferred color */
    z-index: 1; /* Position this element above the background image */
}

footer img {
    height: 50px; /* Adjust as needed */
}

.form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start */
    justify-content: center;
    max-width: 500px; /* Adjust based on your preference */
    margin: 0 auto; /* This centers the box horizontally */
    padding: 20px; /* Optional: Adds some padding inside the box */
    font-size: 14px; /* Set font size to 14px */
}

.form-group {
    display: flex;
    justify-content: flex-start; /* Ensure alignment at the start */
    align-items: center;
    width: 100%; /* Ensure the form group takes the full width of the form-container */
    padding: 5px;
}

.form-group label {
    flex-basis: 200px; /* Assign a fixed width to the label for alignment */
    text-align: right; /* Align the text to the right for a uniform look */
    margin-right: 20px; /* Space between the label and the input */
}

.form-group input {
    flex-grow: 1; /* Allow the input to take up the remaining space */
    max-width: 350px; /* Set a maximum width for the input fields */
    padding: 8px; /* Add padding inside the input for better text visibility */
    border: 1px solid #ccc; /* Adds a border to the input */
    border-radius: 4px; /* Rounds the corners of the input field */
}


.flashes {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 20px 0; /* Add some space above and below the list */
    width: 100%; /* Ensure it spans the full width of its container */
    text-align: center; /* Center-align the text */
}

.flashes li {
    background-color: #f2dede; /* Light red background for error messages */
    color: #a94442; /* Dark red text color for better readability */
    padding: 10px; /* Add some padding to make the messages easier to read */
    margin-bottom: 10px; /* Add some space between consecutive messages */
    border-radius: 5px; /* Optional: Rounds the corners of the message boxes */
    display: inline-block; /* Display messages inline-block for center alignment */
    max-width: 80%; /* Limit the maximum width of messages */
}

.form-group input.invalid-input {
    border: 2px solid red;
}

.btn:disabled {
    background-color: #cccccc; /* Lighter color to indicate it's disabled */
    color: #666666; /* Dim text color */
    cursor: not-allowed; /* Change cursor to indicate the action is not allowed */
    border: 1px solid #999999; /* Optional: change border color */
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    font-size: 14px; /* Smaller font size for modal content */
  }
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }