:root {
    --primary-color: #003300;
    --primary-darker: #002200;
    --text-light: white;
    --text-dark: black;
    --background-light: white;
    --border-color-light: #ccc;
    --form-background: #f9f9f9;
    --warning-color: red;
    --icon-color: #555;
    --icon-color-hover: #000;
    --success-text: #155724;
    --success-background: #d4edda;
    --success-border: #c3e6cb;
    --error-text: #721c24;
    --error-background: #f8d7da;
    --error-border: #f5c6cb;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background-light);
    color: var(--text-dark);
    line-height: 1.6;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

h2,
h3 {
    color: var(--primary-color);
}

header {
    background-color: var(--background-light);
    color: var(--primary-color);
    text-align: left;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header img {
    max-height: 60px;
    width: auto;
    display: block;
}

header div {
    display: flex;
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: var(--primary-color);
    text-decoration: none;
    padding: 5px 10px;
}

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

main {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    flex: 1;
}

main ul {
    list-style-type: disc;
    padding-left: 20px;
    text-align: left;
}

main h2 {
   text-align: center;
}

main p {
   text-align: left;
}

main section > div {
    text-align: center;
}

footer {
    background-color: var(--primary-color);
    color: var(--text-light);
    text-align: center;
    padding: 10px 0;
}

.button {
    background-color: var(--primary-color);
    color: var(--text-light);
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px 10px;
    text-decoration: none;
    text-align: center;
    /* Ensure consistent height */
    min-height: 38px; /* Match the new rule below */
    box-sizing: border-box;
}

.button:hover {
    background-color: var(--primary-darker);
}

.get-started-button {
    margin-left: 20px;
}

.user-dashboard-button { /* Added class for potential specific styling */
     margin-left: 20px;
}

/* --- Rule Added to Hide Button Container Initially --- */
#user-action-button-container {
    /* Hide initially, but keep space */
    visibility: hidden;
    display: inline-block; /* Ensure it flows correctly with nav */
    vertical-align: middle; /* Align with nav items */
    min-width: 120px; /* Approximate width of buttons, adjust as needed */
    min-height: 38px; /* Approximate height of buttons, adjust as needed */
    text-align: center; /* Center content if needed */
    margin-left: 20px; /* Match margin of original .get-started-button */
}
/* --- End Added Rule --- */


.social-links a {
    margin-right: 20px;
    color: var(--text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
}

.social-links i {
    margin-right: 5px;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }

    header nav ul {
        flex-direction: column;
        text-align: center;
    }

    header nav ul li {
        margin: 10px 0;
    }

     /* Adjust container alignment in mobile view */
     header div {
         flex-direction: column;
     }
     #user-action-button-container {
         margin-left: 0; /* Remove left margin in stacked view */
         margin-top: 15px; /* Add some space above button */
     }


    main {
        padding: 10px;
    }

    .button {
         padding: 8px 16px;
         font-size: 14px;
         min-height: 34px; /* Adjust min height for smaller buttons */
    }
     #user-action-button-container {
         min-height: 34px; /* Match smaller button height */
     }
}