@charset "UTF-8";


/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* === Variables css === */
:root {
    /* Modo de cor HSL(hue, saturation, lightness) */
    --first-color: hsl(208, 92%, 54%);
    --first-color-alt: hsl(208, 88%, 50%);
    --title-color: hsl(220, 68%, 4%);
    --white-color: hsl(0, 0%, 100%);
    --text-color: hsl(220, 15%, 66%);
    --body-color: hsl(0, 0%, 100%);
    --container-color: hsl(220, 50%, 97%);

    /*==== Font and typography ====*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat", system-ui;
    --big-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --tiny-font-size: .688rem;

    /*==== Font weight =====*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;

    /*==== z index ====*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*===== Tipografia Responsiva =====*/
@media screen and (min-width: 1150px) {
    :root {
        --big-font-size: 3rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --tiny-font-size: .75rem;
    }
}


/* ==== BASE ==== */

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


body,
input,
button {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

body {
    background-color: var(--body-color);
    color: var(--text-color);
}

input,
button {
    border: none;
    outline: none;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* CLASSES REUTILIZAVEIS NO CSS  */

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}

.grid {
    display: grid;
    gap: 1rem;
}


.login {
    position: relative;
    height: 100vh;
    align-items: center;
    overflow: hidden;
}

.login__blob {
    display: none;
}

.login__title {
    font-size: var(--big-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: 2rem;
}

.login__box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--container-color);
    border-radius: 1rem;
}


.login__input {
    background: none;
    width: 100%;
    padding: 1.5rem 2.5rem 1.5rem 1.25rem;
    font-weight: var(--font-semi-bold);
    border-radius: 1rem;
    border: 2px solid transparent;
    z-index: 1;
    transition: border-color .4s;
}

.login__input:autofill {
    transition: background-color 6000s, color 6000s;
}

.login__label {
    position: absolute;
    left: 1.25rem;
    font-weight: var(--font-semi-bold);
    transition: transform .4s, font-size .4s, color .4s;
}

.login__icon {
    position: absolute;
    right: 1rem;
    font-size: 1.25rem;
    transition: color.4s;
}

.login__password {
    cursor: pointer;
    z-index: 10;
}

.login__forgot {
    display: block;
    width: max-content;
    margin: 1rem 0 0 auto;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--text-color);
    transition: colo .4s;
}


.login__forgot:hover {
    color: var(--first-color);
}

.login__button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    background-color: var(--first-color);
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    padding-block: 1.5rem;
    border-radius: 4rem;
    margin-block: 2rem;
    cursor: pointer;
    transition: background-color .4s, box-shadow .4s;
}

.login__button:hover {
    background-color: var(--first-color-alt);
    box-shadow: 0 8px 24px hsla(208, 92%, 32%, .3);
}

.login__social {
    margin-bottom: 2rem;
}

.login__social-title{
    text-align: center;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: 1rem;
}

.login__social-img{
    width: 1rem;
}

.login__social-links{
    display: flex;
    justify-content: center;
    column-gap: 1.5rem;

}

.login__social-link{
    width: 32px;
    height: 32px;
    background-color: var(--body-color);
    box-shadow: 0 4px 8px hsla(0, 0%, 0%, .1);
    border-radius: .5rem;
    display: grid;
    place-items: center;
    transition: transform .4swww;
}

.login__social-link:hover{
    transform:  translateY(-.25rem);
}

.login__switch{
    text-align: center;
    font-size: var(--small-font-size);
}

.login__switch button {
    background: none;
    color: var(--first-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    cursor: pointer;
    transition: color .4s;
}

.login__switch button:hover{
    color: var(--first-color-alt);
}

.login__access, 
.login__register {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transition: transform .4s, opacity .4s .1s;
}

.login__register {
  transform: translateX(15rem);
  opacity: 0;
  pointer-events: none;
}

/* Input focus move up label */
/* Esse seletor pega uma div irmã adjascente(posterior a primeira div no HTML)*/
.login__input:focus ~ .login__label{
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
}

.login__input:focus{
    padding-block: 2rem 1rem;
}

/* Input foces sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) ~.login__label{
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
}

.login__input:not(:placeholder-shown).login__input:not(:focus){
    padding-block: 2rem 1rem;
}


/*Input focus color*/

.login__input:focus{
    border-color: var(--first-color);
}

.login__input:focus ~.login__label,
.login__input:focus ~.login__icon{
    color: var(--first-color);
}

/* Show/Hide & Create Account*/

.active .login__access{
    transform: translateX(15rem);
    opacity: 0;
    pointer-events: none;
}


.active .login__register{
    transform: translateX(0);
    opacity: 1;
    pointer-events: initial;
}


/* === MEDIA QUERIES === */
/* Para aparelhos pequenos */
@media screen and (max-width: 320px) {
    .container{
        margin-inline: 1rem;
    }
    
}

/* Para aparelhos medios */
@media screen and (min-width: 540px) {
    .login__area{
        width: 380px;
        margin-inline: auto;
    }
}

@media screen and (min-width: 350px) and (max-height: 600px) {
    .login{
       height: 768px;
    }
}
/* Para aparelhos grandes */

@media  screen and (min-width: 1160px) {
    .container{
        margin-inline: auto;
    }

    .login__area{
        width: 460px;
    }

    .login__access,
    .login__register{
        width: 600px;
    }

    .login__title{
        text-align: initial;
        margin-bottom: 3rem;
    }

    .login__button{
        margin-bottom: 3rem;
    }

    .login__group{
        grid-template-columns: repeat(2, 1fr);
    }

    .login__blob{
        display: block;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
    }

    .login__img{
        transform: translate(-8rem, -5rem); /* Mudar a posição da imagem de fundo */
    }
}