@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ms+Madi&family=Oswald:wght@700&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{      
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;	
    overflow: hidden;
    margin: 0;
    background: #fff;
}


.gradient{	
    position:absolute;	
    background: linear-gradient(45deg, #f5e501, #F9E803, #faf170, #fff); 
    animation: rotation 8s infinite linear;
    width: 250vw;
    height: 250vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index: -10;
} 

.iconelogo, .iconelogoanimado{
    transition: 0.75s;
}

/*icone usuario*/
.input-group .fa-user{
    transition: 0.75s;
}
.input-group:hover .fa-user{
    animation: girarY 0.5s 1 linear;		
}
/*icone senha*/
.input-group .fa-key{
    transition: 0.75s;
}
.input-group:hover .fa-key{
    animation: girarZ 0.5s 1 linear;		
}

/*icone olho aberto*/
.input-group-append .fa-eye{
    transition: 0.75s;
}
.input-group-append:hover .fa-eye{
    animation: piscar 2s infinite linear;
    
}	

/*icone email*/
.input-group .fa-at{
    transition: 0.75s;
}
.input-group:hover .fa-at{
    animation: girarY 0.5s 1 linear;		
}
.card:hover .iconelogoanimado{
    transform: translateY(-50px) scale(0.12);
    
}

.card:hover .iconelogo{
    transform: translateY(-50px) scale(2);
    
}
.texto-cinza{
    color: rgb(101, 101, 101);
}

@keyframes girarY {
    0%, 100% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    50%{
        transform: rotate3d(0, 1, 0, 180deg);
    }
}
@keyframes girarZ {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to{
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes piscar {
    0%,10%, 20%, 30%, 60%, 70%,100% {
        transform: rotate3d(1, 0, 0, 0deg);
    }
    5%, 25%, 65%{
        transform: rotate3d(1, 0, 0, 85deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.container{
    position: relative;   
    width: 350px; 
    z-index: 5;  
    display: flex;
    justify-content: center;
    align-items: center;  
}
.card{
    position: absolute;
    border-radius: 5px;
    width: 350px; 
    margin-left:auto; 
    margin-right:auto;
}

.card img .rodape_natal{
    position: absolute !important;
    width: 100%;    
    bottom: 0 !important;
    left: 0;
}

.input-group-text{
background-color:#f6f6f6;
color: #C60910;

}

.header {
    position:absolute;  
    width: 100vw;
    height: 100%;
    bottom: 0;
    left: 0;
    text-align:center;
    color:white;
    z-index: -4;
}