* {
    margin: 0px;
    padding: 0px;
}

:root {
    --color-white: #FFFFFF;
    --color-bg: #E4E0D8;
    --color-card-bg: #F4ECE1;
    --color-text: #2A2018;
    --color-text-muted: #6B5D4F;
    --color-input-border: #1E1A16;
    --color-input-placeholder: #A69C9C;
    --color-divider: #D1C8C8;
    --color-footer-bg: #1E1A16;
    --color-footer-text: #F4ECE1;

    --color-btn-light: #4B9B31;
    --color-btn-base: #377A25;
    --color-btn-base-hover: #316E21;
    --color-btn-shadow: #27591C;
    --color-btn-border: #222120;

    --color-btn-discord-light: #7983F5;
    --color-btn-discord-brand: #5865F2;
    --color-btn-discord-brand-hover: #4752C4;
    --color-btn-discord-shadow: #3C45A5;

    --color-btn-retry-light: #C25A48;
    --color-btn-retry-base: #A63D2F;
    --color-btn-retry-base-hover: #8F3428;
    --color-btn-retry-shadow: #7A2C22;

    --font-title: 'Pixelify Sans', sans-serif;
    --font-body: 'Work Sans', sans-serif;
}

/* Base */
body {
    background-color: var(--color-bg);
    font-family: var(--font-body);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.entry-page {
    flex: 1;
    padding: 3rem;
}

/* Header */
.entry-header {
    text-align: center;
    margin-bottom: 2.5rem;

    & .entry-header__title {
        font-family: var(--font-title);
        text-transform: uppercase;
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    & .entry-header__subtitle {
        color: var(--color-text-muted);
        font-size: 0.9rem;
        margin: 0;
    }
}

/* Card */
.entry-card {
    background-color: var(--color-card-bg);
    border-radius: 3px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;

    /* Form */
    .entry-form {
        margin-bottom: 1rem;

        & .entry-form__label {
            display: block;
            font-weight: 500;
            margin-top: 0.7rem;
        }

        & .entry-form__input {
            width: 100%;
            background-color: var(--color-white);
            border: 1px solid var(--color-input-border);
            padding: 0.6rem 0.75rem;
            font-size: 1rem;
            color: var(--color-text);

            &::placeholder {
                color: var(--color-input-placeholder);
            }

        }
    }

    & .btn-entry {
        width: 100%;
        margin-top: 1.5rem;
        padding: 0.75rem 1rem;
        font-family: var(--font-title);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.3rem;
        color: var(--color-white);
        background-color: var(--color-btn-base);
        border: 2px solid var(--color-btn-border);
        box-shadow:
            inset 0 4px 0 0 var(--color-btn-light),
            inset 0 -4px 0 0 var(--color-btn-shadow);
        cursor: pointer;
    }

    .btn-entry:hover {
        background-color: var(--color-btn-base-hover);
    }

    .btn-entry:active {
        transform: translateY(1px);
    }

    /* Botão do Discord */
    .btn-entry--discord {
        text-decoration: none;
        display: block;
        text-align: center;
        background-color: var(--color-btn-discord-brand);
        box-shadow:
            inset 0 4px 0 0 var(--color-btn-discord-light),
            inset 0 -4px 0 0 var(--color-btn-discord-shadow);
    }

    .btn-entry--discord:hover {
        background-color: var(--color-btn-discord-brand-hover);
    }

    /* Botão Retry */
    .btn-entry--retry {
        background-color: var(--color-btn-retry-base);
        box-shadow:
        inset 0 4px 0 0 var(--color-btn-retry-light),
        inset 0 -4px 0 0 var(--color-btn-retry-shadow);
    }

    .btn-entry--retry:hover {
        background-color: var(--color-btn-retry-base-hover);
    }



    & .entry-card__divider {
        border: 1px solid var(--color-divider);
        margin: 1.25rem 0 0.75rem;
    }

    & .entry-card__note {
        text-align: center;
        color: var(--color-text);
        font-size: 0.85rem;
    }

    /* Mensagem de sucesso */
    .message {
        text-align: center;
        font-size: 1rem;
    }
}

/* Footer */
.entry-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    text-align: center;
    padding: 1.25rem 0.2rem;
    font-size: 0.8rem;
    justify-content: end;

    & .entry-footer__disclaimer {
        margin-bottom: 0.50rem;
    }

    & .entry-footer__copyright {
        display: block;
    }
}