header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    background-color: #1a1a1a;
    width: 100%; /* Ensures the header stretches across the full width */
}

.header-title p, .header-nav a, .header-auth label, .header-auth a, .header-title a {
    color: #ffffff; /* Sets text color to white for all specified elements */
    margin: 0 5px; /* Sets margin for elements */
    text-decoration: none; /* Removes underline from text and links */
    font-size: 16px;
    cursor: pointer; /* Pointer cursor on hover */
    align-items: center;
}

body {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: small;
    /*display: flex;
    /*justify-content: center;
    align-items: flex-start; /* Align items to the start of the container */
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    /*overflow: auto; /* Adds scroll if content exceeds the viewport height */
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Content starts from the top */
    width: 100%;
    min-height: 100vh; /* Ensures it takes at least the full height of the viewport */
    padding-top: 20px; /* Adds some padding at the top */
}

button {
    background-color: #eb6c22; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 10px 20px; /* Top and bottom padding of 10px, left and right padding of 20px */
    text-align: center; /* Center the text inside the button */
    text-decoration: none; /* No underline */
    display: inline-block; /* Allows setting dimensions */
    font-size: 16px; /* Slightly larger font size for readability */
    margin: 4px 2px; /* Some margin to avoid elements sticking to each other */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

button:hover {
    background-color: #c04000; /* Darker shade of green on hover */
}

.color-picker-container {
    text-align: center;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 20px; /* To ensure spacing around the container */
}

input[type="color"] {
    width: 60px; 
    height: 60px;
    border-radius: 50%;  /* Makes the picker look circular */
    border: 1px solid black;  /* Adds a border for better visibility */
    cursor: pointer;
}

/* Targeting the color swatch inside the picker on WebKit browsers */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%; /* Circular shape */
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%; /* Circular shape */
}

table {
    width: 80%; /* Adjusted to not be too wide or too narrow */
    margin-top: 20px; /* Space between form and table */
    border-collapse: collapse; /* Ensures borders are not doubled */
    border: 1px solid #ccc; /* Lighter border for a more minimal look */
}

th, td {
    text-align: left;
    padding: 8px; /* Comfortable padding inside cells */
    border: 1px solid #ccc; /* Consistent with table border */
}

th {
    background-color: #e9e9e9; /* Light grey background for headers */
}

.color-swatch {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #000; /* Visible border for color swatches */
}



.header-container {
    text-align: center;
    margin-bottom: 20px; /* Spacing between the form and the table */
}

table {
    margin-top: 20px; /* Additional margin for spacing */
}