body {
    font-family: arial, serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #000;
    color: white;
    padding: 1em;
}

img {
    margin: 0 50px;   
}

img.team {
    margin: 0 0px;   
}

p.team {
    margin: 0;
    padding: 0;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.logo {
    height: 150px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    background-color: #000;
    padding: 0;
    border-radius: 5px;
}

.auth-form form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.auth-form label {
    flex: 0 0 auto; /* Prevent label from stretching */
    font-size: 0.9em;
    color: white;
    font-weight: bold;
}

.auth-form input {
    flex: 1; /* Allow input to take remaining space */
    padding: 0.5em;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.auth-form button {
    padding: 0.5em 1em;
    font-size: 0.9em;
    background-color: #555;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.auth-form button:hover {
    background-color: #777;
}

.login-form {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Space between rows */
        width: 100%; /* Ensure form takes full width for consistency */
    }

.form-row {
        display: flex;
        align-items: center; /* Vertically align label and input */
        gap: 10px; /* Space between label and input */
    }

.form-row label {
        flex: 0 0 auto; /* Prevent label from stretching */
        margin: 0; /* Remove default margins */
    }

.form-row input {
        flex: 1; /* Allow input to take remaining space */
        padding: 5px;
    }

.login-form button {
        align-self: flex-start; /* Align button to the left */
        padding: 5px 10px;
    }
    
.create-account-btn, .logout-btn, .forgot-password-btn, .profile-btn, .contact-us-btn{
    padding: 0.5em 3em;
    font-size: 0.9em;
    color: #000;
    text-decoration: none;
    border-radius: 3px;
    display: block; /* Ensure the link behaves as a block for centering */
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.contact-us-btn {
    width:35%;
}

.create-account-btn, .contact-us-btn{
    background-color: #76631d;
}

.create-account-btn:hover, .contact-us-btn:hover{
    background-color: #9d852a;
}

.profile-btn {
    padding: 0;
    background-color: transparent;
    color: #007bff;
    font-size: 0.8em;
}

.profile-btn:hover {
    text-decoration: underline;
}


.logout-btn {
    background-color: #dc3545;
}

.logout-btn:hover {
    background-color: #c82333;
}

.forgot-password-btn {
    padding: 0;
    background-color: transparent;
    color: #007bff;
    font-size: 0.8em;
}

.forgot-password-btn:hover {
    text-decoration: underline;
}

nav ul {
    list-style: none;
    padding: 0 1em;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1em;
}

nav ul li {
    flex: 0 1 auto;
}

nav ul li a {
    font-size: 24px;
    color: #76631d;
    text-decoration: none;
    padding: 5px 10px; /* Larger clickable area */
    display: block; /* Ensure full link area is clickable */
}

nav ul li a:hover {
    text-decoration: underline;
}

main {
    max-width: 800px;
    margin: 2em auto;
    padding: 1em;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 600px;
}

form_one_line {
        display: flex;
}

input, button, select, textarea {
    padding: 0.5em;
    font-size: 1em;
}

input[type="tel"], input[type="email"], input[type="text"], input[type="password"], select, textarea {
    width: 100%;
    box-sizing: border-box;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

.name-group {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.name-group input {
    flex: 1;
    min-width: 100px;
}

button {
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

.error {
    color: red;
    font-size: 0.9em;
}

#zip-error {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: red;
}

.success {
    color: green;
}

.required {
    color: red;
    font-weight: bold;
}

.calculator {
	margin: 2%;
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	font-size:150%;
}

.calcresult tr th, .calcresult tr td{
    border:1px solid black;
    text-align: right;
}

.footer {
	width: 100%;
	height: auto;
	background-color: #000;
	color: #76631d;
	margin-top: 15px;
    display:table;
}

.footerone ul{
    display:table-cell;
    width:30%;
    border:10px red;
}
.footertwo{
    display:table-cell;
    width:50%;
    border:10px red;
}
.footerthree{
    display:table-cell;
    width:20%;
    border:10px red;
}

a.footerlink:link {
	text-decoration: underline;
	color: #76631d;
}

a.footerlink:visited {
	text-decoration: underline;
	color: #76631d;
}

a.footerlink:hover {
	text-decoration: underline;
	color: #76631d;
}

a.footerlink:active {
	text-decoration: underline;
	color: #76631d;
}

.copyright {
	text-align: center;
	float: left;
	width: 100%;
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 5px;
}

@media (max-width: 600px) {
    .header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .auth-form {
        width: 80%;
    }
    .auth-form form {
        flex-direction: column;
        width: 100%;
    }
    .auth-form input, .auth-form button {
        width: 100%;
        box-sizing: border-box;
    }
    .name-group {
        flex-direction: column;
    }
    .name-group input {
        width: 100%;
    }
    nav ul {
        flex-direction: column;
        gap: 0.5em;
    }
    nav ul li.contact-us {
        margin-left: 0;
    }
}