/* Styles for the body element */
body {
    margin: 0; /* Removes default margin */
    font-family: Monaco, monospace; /* Sets the font family for text */
    background-color: #f3f3f3; /* Sets the background color */
    background-image: url('homepage.jpg'); /* Sets the background image */
    background-size: cover; /* Ensures the background image covers the entire container */
    background-position: top; /* Positions the background image at the top */
}

/* Styles for the container class */
.container {
    text-align: center; /* Aligns content to the center */
    background-color: rgba(255, 255, 255, 0.7); /* Adds transparency to the background color */
    padding: 20px; /* Adds padding around the container */
    border-radius: 20px; /* Rounds the corners of the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds a shadow effect */
    width: 30%; /* Sets the width of the container */
}

/* Styles for the level 1 heading */
h1 {
    text-align: center; /* Aligns text to the center */
    font-size: 24px; /* Sets the font size */
}

/* Styles for form groups */
.form-group {
    margin-bottom: 20px; /* Adds margin at the bottom */
}

/* Styles for labels */
label {
    display: inline-block; /* Displays labels as blocks */
    width: 150px; /* Sets the width of labels */
    font-weight: bold; /* Sets the font weight */
    font-size: 14px; /* Sets the font size */
}

/* Styles for input fields */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 160px); /* Calculates the width of input fields */
    padding: 8px; /* Adds padding */
    border-radius: 5px; /* Rounds the corners of input fields */
    border: 1px solid #ccc; /* Sets border color and style */
    font-size: 14px; /* Sets the font size */
}

/* Styles for submit button */
button[type="submit"] {
    background-color: #333; /* Sets background color */
    color: #fff; /* Sets text color */
    padding: 10px 20px; /* Adds padding */
    border: none; /* Removes border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes cursor to pointer */
    width: 100%; /* Sets width to 100% */
    transition: background-color 0.3s ease; /* Adds transition effect */
}

/* Styles for submit button on hover */
button[type="submit"]:hover {
    background-color: #222; /* Changes background color on hover */
}

/* Styles for button container */
.buttons {
    text-align: center; /* Aligns buttons to the center */
}

/* Styles for back button */
.back-button {
    font-size: 14px; /* Sets font size */
    background-color: #333; /* Sets background color */
    color: #fff; /* Sets text color */
    padding: 10px 20px; /* Adds padding */
    border: none; /* Removes border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes cursor to pointer */
    transition: background-color 0.3s ease; /* Adds transition effect */
    margin-top: 10px; /* Adds margin at the top */
    display: inline-block; /* Displays as inline block */
}

/* Styles for back button on hover */
.back-button:hover {
    background-color: #222; /* Changes background color on hover */
}

/* Styles for error messages */
.error-message {
    color: red; /* Sets text color to red */
}

/* Styles for additional text */
.gloucestershire-text {
    font-size: 14px; /* Sets font size */
    margin-top: 5px; /* Adds margin at the top */
    color: #555; /* Sets text color */
}
/* Styles for the body element */
body {
    font-family: Arial, sans-serif; /* Sets the font family for text */
    display: flex; /* Uses flexbox for layout */
    justify-content: center; /* Aligns content horizontally */
    align-items: center; /* Aligns content vertically */
    height: 100vh; /* Sets height to 100% of viewport height */
    margin: 0; /* Removes default margin */
    background-color: #f4f4f4; /* Sets the background color */
}

/* Styles for the level 1 heading */
h1 {
    margin-bottom: 20px; /* Adds margin at the bottom */
}

/* Styles for button container */
.buttons {
    display: flex; /* Uses flexbox for layout */
    flex-direction: column; /* Arranges buttons vertically */
    align-items: center; /* Aligns buttons horizontally */
}

/* Styles for primary button */
.primary-button {
    background-color: #333; /* Sets background color */
    color: white; /* Sets text color */
    border: none; /* Removes border */
    padding: 10px 20px; /* Adds padding */
    margin: 10px; /* Adds margin */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes cursor to pointer */
    font-size: 16px; /* Sets font size */
    width: 200px; /* Sets width */
    text-align: center; /* Aligns text to the center */
}

/* Styles for primary button on hover */
.primary-button:hover {
    background-color: #333; /* Changes background color on hover */
}

/* Styles for container */
.container {
    height: 100vh; /* Sets height to 100% of viewport height */
    display: flex; /* Uses flexbox for layout */
    flex-direction: column; /* Arranges content vertically */
    align-items:
}