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

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

body{
    background: linear-gradient(rgba(0,75,173,0.55), rgba(0,0,0,0.45)),
    url('img/Background.png') no-repeat center center;
    background-size:cover;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    font-family:'Poppins', sans-serif;

    min-height:100vh;
    padding:20px;
}

h1{
    font-weight:bold;
}

a{
    color:#13777e;
    font-size:12px;
    text-decoration:none;
}

/* CONTAINER */

.container{
    background:#fff;
    border-radius:30px;

    box-shadow:
    0 14px 28px rgba(3,89,100,0.45),
    0 10px 10px rgba(0,0,0,0.22);

    position:relative;
    overflow:hidden;

    width:90%;
    max-width:730px;
    min-height:700px;
}

/* FORM */

form{
    background-color:#ffffffa8;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:50px 60px;
    height:100%;
    text-align:center;
}

/* cadeado */
.logo{
    width:40px;
    max-width:100%;
    height:auto;
    margin-bottom:10px;
    transition:0.3s;
}

.logo:hover{
    transform:scale(1.1);
}

/* INPUTS */

.formulario input{

    width:100%;
    padding:14px 20px;

    border:none;
    border-radius:20px;

    margin:8px 0;

    font-family:'Poppins', sans-serif;

    background-color:rgba(19,119,126,0.15);
    color:#0f5c61;

    transition:0.3s;

    box-shadow:
    0 2px 5px rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.22);
}

.formulario input::placeholder{
    color:rgba(15,92,97,0.7);
}

.formulario input:focus{

    outline:none;

    background-color:rgba(19,119,126,0.45);

    box-shadow:
    0 0 0 2px rgba(19,119,126,0.4),
    0 4px 10px rgba(0,0,0,0.3);
}

/* BOTÃO */

.cta{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:220px;

    padding:12px 30px;

    border:none;

    background:#0a59a3fa;
    color:white;

    font-family:'Poppins', sans-serif;
    font-size:14px;
    font-weight:bold;

    letter-spacing:1px;
    text-transform:uppercase;

    cursor:pointer;

    transition:0.5s;

    box-shadow:6px 6px 0 rgba(27,113,163,0.541);

    transform:skewX(-15deg);

    height:60px;
}

.cta span{
    transform:skewX(15deg);
}

.cta span:nth-child(2){
    width:20px;
    margin-left:20px;
    position:relative;
    top:2px;
    transition:0.5s;
}

.cta:hover{
    box-shadow:10px 10px 0 #FBC638;
}

.cta:hover span:nth-child(2){
    margin-left:15px;
}

/* SVG ANIMAÇÃO */

path.one{
    transition:0.4s;
    transform:translateX(-60%);
}

path.two{
    transition:0.5s;
    transform:translateX(-30%);
}

path.three{
    transition:0.5s;
}

.cta:hover path.one{
    transform:translateX(0%);
    animation:color_anim 1s infinite 0.6s;
}

.cta:hover path.two{
    transform:translateX(0%);
    animation:color_anim 1s infinite 0.4s;
}

.cta:hover path.three{
    animation:color_anim 1s infinite 0.2s;
}

@keyframes color_anim{
    0%{fill:white;}
    50%{fill:#FBC638;}
    100%{fill:white;}
}

/* LOGIN */

.login-container{
    position:absolute;
    top:0;
    height:100%;
    left:0;
    width:50%;
    z-index:2;
}

/* IMAGEM DIREITA */

.overlay-container{
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    overflow:hidden;
}

.overlay{

    
    background-size:115%;

    height:100%;
    width:100%;

    position:relative;
}

/* RESPONSIVO */

@media (max-width:768px){

.container{
    width:100%;
    min-height:auto;
}

.login-container{
    width:100%;
    position:relative;
}

.overlay-container{
    display:none;
}

form{
    padding:30px 20px;
}

.cta{
    width:100%;
}

}