* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    --color-primary: rgb(33, 49, 77);
    --color-secondary: rgb(211, 212, 213);
    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sl-color-primary-600: var(--color-primary);
    --sl-color-primary-500: var(--color-secondary);
    --sl-input-required-content: '';
    --sl-input-required-content-offset: 0;

    font: 18px/24px var(--font);
}

#main, #login-main {
    background: #637e9c url("../img/header-profile-le32UCS.png") top center no-repeat;
    color: var(--color-primary);
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;

    header {
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5rem;
        min-height: 33vh;
    }

    main {
        margin-inline: auto;
        max-width: calc(75ch + 2rem);
        width: calc(75vw + 2rem);
    }
}
#login-main {
    background: url("../img/header-lvIurgw.jpg") top center no-repeat;
    background-size: cover;
    color: white;

    main {
        padding-top: 10vh;
        max-width: 75ch;
        width: 75vw;
    }

    h1 {
        font-size: 1px;
        opacity: 0;
        width: 0;
        height: 0;
    }
}

h1 {
    font-weight: 300;
    text-transform: uppercase;
}

sl-button::part(base) {
    border-radius: 0;
}
sl-button::part(label) {
    text-transform: uppercase;
}
sl-button[variant="primary"]:hover::part(label),
sl-button[variant="primary"]:active::part(label),
sl-button[variant="primary"]:focus::part(label) {
    color: var(--color-primary);
}

sl-input {
    margin-bottom: 1rem;
}
sl-input::part(base) {
    border-radius: 0;
}
sl-input::part(form-control-label) {
    text-transform: uppercase;
}

.border {
    border: 1px solid currentColor;
    padding: 1rem;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination {
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    gap: 0.5rem;

    a {
        color: inherit;
        text-decoration: none;
    }

    .current {
        font-weight: bold;
    }
}