@import "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css";

body{
	margin: 0;
	padding: 0;
    font-family: "Avenir Medium", sans-serif;
    /*    background: url("../img/access.jpg") no-repeat;
    background-size: cover;
        background-position: center;
    background-attachment: fixed;*/
}


:root{
/* --background-gradient:
linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); */
--background-transparent: rgba(255, 255, 255, 0.082);
}
html {
font-size: 62.5%;
}

.header {
background: var(--background-gradient); 
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header .header__img {
width: 200px !important;
margin: 10px 10px -15px 10px;
}

.login {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0px 30px;
min-height: calc(100vh - 200px);

}



.login__container {
/*background-color: var(--background-transparent);*/
 /*background-color: rgba(240, 240, 240, 0.3);*/
 background-color: rgba(0, 0, 28, 0.4);
display: flex;
justify-content: space-around;
flex-direction: column;
border: 2px solid rgba(255, 255, 255, 0.596);
border-radius: 40px;
color: white;
padding: 60px 68px 40px;
min-height: 450px;
width: 300px;
box-shadow: 10px 10px 5px -6px rgba(0, 0, 0, 0.719);
}

.login__container_r{
 background-color: rgba(240, 240, 240, 0.3);
display: flex;
justify-content: space-around;
flex-direction: column;
border: 2px solid rgba(255, 255, 255, 0.596);
border-radius: 40px;
color: white;
padding: 60px 68px 40px;
min-height: 450px;
width: 400px;
box-shadow: 10px 10px 5px -6px rgba(0, 0, 0, 0.719);
}

.login__container h2 {
align-self: center;
font-size: 2rem;
letter-spacing: 0.4rem;
}
.login__container--form {
display: flex;
flex-direction: column;
}
.login__container--form label {
font-size: 1.4rem;
}
.login__container--remember-me {
color: white;
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.login__container--remember-me a {
text-decoration: none;
color: white;
font-size: 1.4rem;
}
.login__container--remember-me a:hover {
text-decoration: underline;
}
.login__container--social-media{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.login__container--social-media > div {
display: flex;
align-items: center;
font-size: 1.4rem;
margin-bottom: 10px;
}
.login__container--social-media span {
width: 15px;
height: 15px;
margin-right: 10px;
}
.login__container--social-media .google {
background-image: url('./images/google-g-icon-9.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.login__container--social-media .twitter {
background-image: url('./images/Twitter_logo.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.login__container--register {
font-size: 1.4rem;
align-self: center;
}
.login__container--register a {
font-size: 1.6rem;
color: white;
text-decoration: none;
font-weight: bold;
}
.login__container--register a:hover{
text-decoration: underline;
}
.input {
background-color: transparent;
border-left: 0px;
border-right: 0px;
border-top:0px;
border-bottom: 2px solid white;
font-size: 1.6rem;
margin-bottom: 20px;
padding: 0px 15px;
outline: none;
height: 50px;
   background-color: var(--background-transparent);
color: white; /*#6e9191*/
font-family: "Avenir Medium", sans-serif;
font-weight: bold;
font-size: 1.6rem;

}


::placeholder {
color: white; /*#6e9191*/
font-family: "Avenir Medium", sans-serif;
font-weight: bold;
font-size: 1.6rem;
}

.input:focus{
	   background-color: transparent;

}
.button {
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 25px;
color: #363635;
cursor: pointer;
font-family: "Avenir Medium", sans-serif;
font-weight: bold;
font-size: 1.6rem;
outline: none;
height: 45px;
letter-spacing: 0.1rem;
margin: 10px 0px;
}
.footer {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100%;
}
.footer a {
color: white;
cursor: pointer;
font-size: 1.4rem;
margin-right: 25px;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
.login__container {
background-color: transparent;
border: none;
box-shadow: none;
padding: 0px;
width: 100%;
}
.login__container--social-media {
align-self: center;
}
.login__container--register {
align-self: center;
}
.header__img {
margin: 0 auto;
padding-top: 10px;
}
.footer{
display: flex;
align-items: center;
flex-direction: column;
}
.footer a {
margin-bottom: 10px;
}
}