*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: Ggsans, sans-serif;
    animation: none;
    -webkit-tap-highlight-color: transparent;
}

body{
    background-color: #000000;
    overflow-x: hidden;
    width: 100%;
    height: auto;
}

.main__content-login{
    display: flex;
    flex-flow: column nowrap;
    color: #ffffff;
    width: 100%;
    height: 100dvh;
    overflow-x: hidden;
}

#form-title{
    font-size: 1.7rem;
}

.content__login{
    display: flex;
    flex-flow: row nowrap;
    color: #ffffff;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.login__form-wrapper, .form__inputs{
    display: flex;
    flex-flow: column nowrap;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 17rem;
}

.content__login-form{
    text-align: -webkit-center;
    text-align: center;
    padding: 1rem;
}

.content__login-form img{
    width: 100%;
    max-width: 11rem;
}

.form__inputs input{
    width: 100%;
    max-width: 14.5rem;
    height: 1.6rem;
    border-radius: 0.3rem;
    border: 0.3px solid #b3b3b3;
    margin: 1rem 0.3rem 0rem;
    padding: 0.2rem 0.7rem;
    background-color: rgba(18, 18, 18, 1);
    color: white;
}

.form__inputs input::placeholder{
    color: rgba(168, 168, 168, 1);
}

.form__inputs button{
    width: 100%;
    border-radius: 0.4rem;
    border: none;
    padding: 0.4rem;
    font-weight: 600;
    background-color: rgba(52, 65, 175, 1);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1.5rem;
    cursor: pointer;
    transition: 0.1s ease-in-out;
}

.form__inputs button:hover{
    background-color: rgb(80, 90, 180);
}

.content__login-space{
    width: 12rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
}

.trace-line{
    height: 0.8px;
    width: 100%;
    background-color: rgba(38, 38, 38, 1);
    margin: 0px 1rem;
}

.login__alternative, .login__alternative-facebook{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.login__alternative-facebook{
    flex-direction: row;
    color: rgba(0, 149, 246, 1);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.login__alternative-facebook svg{
    margin-right: 0.5rem;
}

.login__alternative-facebook:hover, .login__alternative a:nth-child(2):hover, .login__signin a:hover{
    text-decoration: underline;
    cursor: pointer;
}

.login__alternative a:nth-child(2){
    color: #ffffff;
}

.login__signin a{
    color: rgba(0, 149, 246, 1);
}

.login__signin{
    margin-top: 2rem;
}

.content__login-carrossel-wrapper{
    width: 39rem;
    height: 31rem;
    max-width: 630px;
    max-height: 280px;
    display: block;
    margin: 0 auto;
    position: relative;
}

/* Lateral form carrossel */ 
.content__login-img-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1.5rem;
}

.carrossel_img-1{
    background-image: url("../images/cat-1.jpg");
    transition: 1s ease-in-out;
    max-width: 210px;
    z-index: -1;
    justify-self: anchor-center;
    transition: 1s ease-in-out;
    transform: rotate(6deg);
    border-radius: 2.3rem;
}

.carrossel_img-2{
    background-image: url("../images/cat-2.jpg");
    transition: 1s ease-in-out;
    max-width: 210px;
    z-index: -2;
    justify-self: anchor-center;
    transition: 1s ease-in-out;
    transform: rotate(-12deg);
}

.carrossel_img-3{
    background-image: url("../images/cat-3.jpg");
    transition: 1s ease-in-out;
    max-width: 210px;
    z-index: -3;
    justify-self: anchor-center;
    transition: 1s ease-in-out;
}

.carrossel_img-4{
    background-image: url("../images/cat-4.jpg");
    transition: 1s ease-in-out;
    max-width: 210px;
    z-index: -4;
    justify-self: anchor-center;
    transition: 1s ease-in-out;
    transform: rotate(12deg);
}

.carrossel_img-move-back{
    animation: goLeft 4s ease-in-out forwards;
    opacity: 1;
    transition: transform 2s ease-in-out;
}
 
.carrossel_img-move-front{
    animation: goRight 3s ease-in-out 3s forwards;
    opacity: 1;
    transition: transform 2s ease-in-out;
}

@keyframes goLeft {
    0%{
        opacity: 1;
        z-index: 9;
        transition: 2s ease-in-out;
    }
    90%{
        transform: translateX(-15rem);
        opacity: 1;
    }
    100%{
        transform: translateX(0px);
        opacity: 0;
        z-index: -9;
    }
    
}

@keyframes goRight {
    0%{
        opacity: 0;
        transition: 2s ease-in-out;
    }
    60%{
        transform: translateX(5rem);
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
        z-index: 3;
    }
    
}

.content__login-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s ease-in-out;
}

.content__login-img-wrapper.active {
  animation: goRight 3s ease-in-out forwards;
}

.carrossel_img-move-back {
  animation: goLeft 4s ease-in-out forwards;
}

.footer ul{
    margin: 5rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
}

.footer ul li:hover{
    text-decoration: underline;
    cursor: pointer;
}

.rights{
    padding: 1rem;
    text-align: -webkit-center;
    text-align: center;
}


@media screen and (max-width: 906px) {
    .content__login-carrossel-wrapper{
        max-width: 400px;
    }

    .content__login{
        margin-top: 5rem;
    }
}

@media screen and (max-width: 760px) {
    .content__login-carrossel{
        display: none;
    }
}