/* ============================================
   RESET
============================================ */

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

/* ============================================
   BODY GLOBAL
============================================ */

body {
    min-height: 100vh;
    background-color: #000;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;

    background-image:
        url('images/legend/13-Diego%20Maradona-Argentina.jpeg'),
        url('images/legend/19-Pel%C3%A9-Brasil.jpeg'),
        url('images/legend/15-Ronaldo%20Naz%C3%A1rio-Brasil.jpeg'),
        url('images/legend/16-Ronaldinho%20Ga%C3%BAcho_Brasil.jpeg'),
        url('images/legend/17-Rom%C3%A1rio-Brasil.jpeg'),
        url('images/legend/19-Pel%C3%A9-Brasil.jpeg');

    background-repeat: no-repeat;

    /* ========================================
       DESKTOP POSITIONS
    ======================================== */

    background-position:
        4% 18%,
        96% 12%,
        6% 76%,
        96% 88%,
        18% 46%,
        82% 56%;

    background-size:
        140px 180px,
        130px 170px,
        150px 190px,
        120px 160px,
        140px 180px,
        130px 170px;

    background-attachment: fixed;
}

/* ============================================
   REGISTER PAGE
============================================ */

body.register-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* ============================================
   CONTAINER
============================================ */

.container {

    width: 100%;

    max-width: 330px;

    background: #d29b00;

    padding: 26px 22px;

    border-radius: 28px;

    text-align: center;

    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}

/* ============================================
   LOGO
============================================ */

.logo {
    margin-bottom: 16px;
}

.logo img {

    width: 220px;

    height: auto;

    object-fit: contain;
}

/* ============================================
   TITLES
============================================ */

h1 {

    font-size: 1.85rem;

    font-weight: 900;

    line-height: 1.1;

    margin-bottom: 16px;

    color: #111;
}

/* ============================================
   FORM
============================================ */

form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================
   INPUTS
============================================ */

input {

    width: 100%;

    padding: 16px 18px;

    border-radius: 14px;

    border: 1px solid #ccc;

    font-size: 1rem;

    outline: none;

    background: #fff;

    color: #111;

    transition: 0.2s;
}

input:focus {

    border-color: #e2b200;

    box-shadow: 0 0 0 4px rgba(255,215,0,0.15);
}

/* ============================================
   BUTTONS
============================================ */

button {

    width: 100%;

    padding: 16px;

    border: none;

    border-radius: 14px;

    background: #000;

    color: #fff;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

button:hover {

    background: #333;
}

/* ============================================
   GOOGLE BUTTON
============================================ */

.google-button {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 16px;

    border-radius: 14px;

    background: #000;

    color: #fff;

    text-decoration: none;

    font-weight: bold;

    margin-top: 12px;

    margin-bottom: 22px;
}

/* ============================================
   LINKS
============================================ */

.links {

    margin-top: 20px;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}

.links a {

    color: #000;

    text-decoration: none;

    font-weight: 900 !important;

    font-size: 1rem;
}

/* ============================================
   MOBILE
============================================ */

@media screen and (max-width: 768px) {

    /* ========================================
       BODY MOBILE
    ======================================== */

    body {

        background-position:
            6% 1%,
            100% 2%,
            0% 97%,
            100% 95%,
            50% 0%,
            50% 101%;

        background-size:
            clamp(95px, 16vw, 110px) auto,
            clamp(95px, 16vw, 110px) auto,
            clamp(95px, 16vw, 110px) auto,
            clamp(95px, 16vw, 110px) auto,
            clamp(105px, 18vw, 120px) auto,
            clamp(105px, 18vw, 120px) auto;

        background-attachment: scroll;
    }

    /* ========================================
       REGISTER PAGE MOBILE
    ======================================== */

    body.register-page {
        padding: 14px 10px;
    }

    /* ========================================
       CONTAINER MOBILE
    ======================================== */

    .container {

        width: 100%;

        max-width: clamp(260px, 82vw, 300px);

        padding: 20px 16px;

        border-radius: 20px;

        background: rgba(255, 187, 0, 0.415);
    }

    /* ========================================
       MOBILE LOGO
    ======================================== */

    .logo img {
        width: 170px;
    }

    /* ========================================
       MOBILE TITLE
    ======================================== */

    h1 {
        font-size: 1.5rem;
    }

    /* ========================================
       MOBILE INPUT
    ======================================== */

    input {

        padding: 13px;

        font-size: 0.95rem;
    }

    /* ========================================
       MOBILE BUTTON
    ======================================== */

    button {

        padding: 13px;

        font-size: 0.95rem;
    }

    /* ========================================
       MOBILE GOOGLE BUTTON
    ======================================== */

    .google-button {

        margin-top: 4px !important;

        margin-bottom: 28px !important;
    }

    /* ========================================
       CREATE ACCOUNT MOBILE
    ======================================== */

    body.create-account-page {

        background-image: none !important;
    }
}

/* ============================================
   FORGOT PASSWORD
============================================ */

.forgot a {

    font-weight: 900 !important;

    color: #000;
}