/* ==========================================
   Header
========================================== */

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin: 20px;
    margin-bottom: 40px;
    padding: 20px;

    background: var(--color-header);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-medium);
}

.header-buttons {
    display: flex;
    gap: 10px;
}

/* ==========================================
   Main Layout
========================================== */

main {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
}

/* ==========================================
   Generic Containers
========================================== */

.container {
    width: 60%;

    margin: 0 auto;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;

    background: var(--color-card);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);
}

/* ==========================================
   Members Page
========================================== */

#members-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================
   Legal Page
========================================== */

#legal-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#legalBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    width: 300px;
}

/* ==========================================
   Construction Page
========================================== */

#constructionPage {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

/* ==========================================
   signup page
========================================== */

#signupMain {
    flex-direction: column;
}