@import url("global.css");


@media screen and (max-width:480px) {




/* --- Nav Bar Container --- */

.navbar_container {

    display: flex;
    flex: row wrap;

    padding: 20px;
    width: 100%;
    background-color: var(--nav-bg-color);
    justify-content: center;

    top: 0px;
    position: fixed;
    z-index: 1000;
}

/* --- Navbar content --- */

.navbar_content {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0px;  
    align-items: center;  
    
    letter-spacing: 2px;
    
    
}

.navbar_content-image {

    width: 100px;

}


/* --- Navbar_text --- */

.navbar_text {

    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
    

    font-size: small;
    
           
}

.navbar_text a {

    color: var(--text-color);

}

.navbar_text-button {

    padding: 8px 26px;
    text-align: center;
    transition: 0.5s;
    color: var(--text-color);

}

.navbar_text-button:hover {
  
    background-color: var(--text-color) ;
    color: black;
    
} 





/* --- main container --- */


.main_container {

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

    background: linear-gradient(0deg, rgba(2,2,40,1) 0%, rgba(2,2,40,0) 40%, rgba(2,2,40,0) 60%, rgba(2,2,40,1) 100%),
    url('../images/background-movies-series.png');
    background-size: cover;
    background-repeat: no-repeat;

    margin: 180px 0px 50px 0px;
    padding: 20px;

}


/* --- main - Form container content --- */

.container_content {

    width: 100%;
    padding: 40px;
    
    

    display: flex;
    flex-direction: column;
    gap: 24px;
    

    max-width: 800px;
    background-color: var(--form-bg-color);
    border-radius: 8px;

    text-align: center;
    color: white;

}

/* --- main - Form content item  --- */

.singin_title {

    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.20rem;
    
}

.singin_label {

    text-align: left;

}


.singin_input {

    color: var(--text-color);
    padding: 16px;
    font-size: 1rem;
    
    background: var(--form-field-bg-color);
    border: var(--form-field-border);
    border-radius: 8px;
    transition: 1s ease;
    

}

.singin_input::placeholder {

    color: var(--form-field-placeholder);
}

.singin_input:invalid {

    border: 1px solid var(--form-field-error);
}



/* --- main - container buttons */


.content_button {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap:24px;
    width: 100%;
}


/* --- main -  buttons itens */

.button_submit {

    max-width: 200px;
    padding: 15px 25px;
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    background: var(--btn-bg-color-gradient);
    background-size: 250%;
    background-position: initial;
    
    
    outline: 3px solid transparent;

     transition:  background 3s ease-out, outline 1s , transform 1s, background-position 2s ease;  

}

.button_submit:hover {

    
    transform: scale(1.05);
    background: transparent;
    background-position: right;
    outline: 3px solid var(--secondary-color);
    
}


.button_forgot {

    color: var(--link-color);

}





/* --- footer container --- */

.footer_container {

    width: 100%;
    margin: 50px 0px 20px 0px;

}


/* --- footer content --- */

.footer_content {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

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

}

/* --- footer content  nav --- */

.content_nav {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.nav_item {

    color: var(--link-color);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    transition: color 1s ease;
    font-size: 0.80rem;
}

.nav_item:link {

    color: var(--link-color);
}

.nav_item:visited {
     color: var(--tertiary-color);
}

.nav_item:hover {

    cursor: pointer;
    color: white;

}

/* --- footer content texto ---  */

.content_txt {

    font-size: 0.75rem;
    color: var(--link-color);
    font-weight: 300;
    text-align: center;
    margin: 20px 8%;

}


/* --- footer content social  --- */


.content_social {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;

    margin: 15px auto;

}


}