:root {
    --bg-color: #f3f2ef;
    --blue-logo: #0A66C2;
    --blue-hover: #004182;
    --color-error: #D13241;
    --color-success: #269E41;
    --color-border: #666666;
    --color-line: #cdcfd2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    background-color: var(--bg-color);
}


/* TAMANHO PADRÃO */
.container {
    display: flex;
    width: 109.4rem;

}

/* ALINHA O CONTEÚDO AO CENTRO */
header {
    display: flex;
    justify-content: center;
}

header img {
    width: 14rem;
}

.registration-title h1 {
    width: 100%;
    font-weight: normal;
    font-size: 3.2rem;
    text-align: center;
    padding: 0 2rem;
}


/* ALINHA O CONTEÚDO AO CENTRO */
section#registration {
    display: flex;
    justify-content: center;
    margin-top: 2.8rem;

}

/* ÁREA QUE ENGLOBA O FORMULÁRIO E OPÇÕES DE LOGIN */
.register {
    background-color: #fff;
    padding: 3rem 2.5rem;
    border-radius: 2rem 2rem 0 0;

}

/* INÍCIO FORMATAÇÕES FORM E SEUS ELEMENTOS */
form {
    max-width: 44.4rem;
}

form label {
    font-size: 1.4rem;
    color: var(--color-border);
}


form a {
    font-weight: bold;
    text-decoration: none;
    color: var(--blue-logo);
}

form a:hover {
    text-decoration: underline;
}


input {
    width: 100%;
    height: 3.2rem;
    font-size: 1.4rem;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.4rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
}

/* VALIDAÇÃO INPUT USER E PASSWORD */
input:valid {
    border: 0.1rem solid var(--color-success);
}

form p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

input[type=submit] {
    background-color: var(--blue-logo);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    width: 100%;
    height: 4.8rem;
    margin: 0;
    border: none;
    border-radius: 2.4rem;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: var(--blue-hover);
}

/* ÁREA QUE MOSTRA O TEXTO "OU" COM DUAS UMA LINHA EM CADA LADO - VISÍVEL APENAS EM TELA > 1115px */
#registration .option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;

}

.option span {
    flex: 1;
    text-align: center;
}

.option span.line {
    flex: 2;
    background-color: var(--color-line);
    height: 0.1rem;
}


/* OPÇÕES DE LOGIN */
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* LOGIN COM GOOGLE */
.login a.google {
    text-decoration: none;
    color: var(--color-border);
    font-weight: bold;

    width: 100%;
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}

.login a.google div:hover {
    color: var(--blue-hover);
}

a.google img {
    width: 2rem;
    margin-right: 1rem;
}

a.google div {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.4rem;
    border: 0.1rem solid var(--color-line);
    border-radius: 2rem;
    padding: 1rem;
}

/* LOGIN LINKEDIN - USUÁRIOS CADASTRADOS */
.linkedin a.login-link {
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--blue-logo);
}

.linkedin a.login-link:hover {
    text-decoration: underline;
}


/* RODAPÉ */
footer {
    display: flex;
    justify-content: center;

    background-color: #fff;
    padding: 2rem;

}

.help-company {
    display: flex;
    justify-content: center;
    background-color: #fff;
}


.help-company p.help {
    width: 100%;
    text-align: center;
    padding: 1.6rem 0 0 0;
}

.help-company p.help a {

    /* text-align: center; */
    font-size: 1.4rem;
}

.help-company a {
    color: var(--blue-logo);
    font-weight: 600;

}


ul .logo-black-linkedin {
    font-size: 1.2rem;
    color: var(--color-border);

}


.container nav {
    width: 100%;
}

/* ORGANIZAÇÃO DOS LINKS */
.container ul {
    display: grid;

    grid-template-columns: repeat(8, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
}


.container li,
a,
select {
    list-style-type: none;
    text-decoration: none;
    width: max-content;
    font-size: 1.2rem;
    color: var(--color-border);

}

.container li:hover,
a:hover,
select:hover {
    text-decoration: underline;
    color: var(--blue-logo);

}

ul select {
    border: none;
    cursor: pointer;

}


/* RESPONSIVIDADE */
@media (max-width: 1115px) {

    body {
        background-color: #fff;
    }

    header img {
        width: 14rem;
        padding-left: 2.4rem;
    }

    form p {
        margin-bottom: 0;
    }


    #registration .option {
        display: none;
    }


    .container ul {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 2rem;
        padding: 2.4rem 1.6rem;
    }

}

@media (max-width: 600px) {

    html {
        font-size: 55%;
    }


}