*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

html,
body{
width:100%;
min-height:100%;
overflow-x:hidden;
}

body{
background:
linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.88)),
url('../images/hero-bg.jpg');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

color:#fff;
}

/* LOGO */

.logo{
position:fixed;
top:25px;
left:40px;
z-index:9999;
font-size:42px;
font-weight:900;
}

.logo span{
color:#e50914;
}

/* GENERAL */

.container{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:100px 20px 50px;
}

/* LOGIN CARD */

.card{
width:100%;
max-width:650px;

background:rgba(0,0,0,.88);

padding:50px;

border-radius:14px;

box-shadow:
0 0 50px rgba(0,0,0,.6);
}

.card h1{
font-size:42px;
font-weight:800;
margin-bottom:15px;
line-height:1.1;
}

.card p{
font-size:17px;
line-height:28px;
color:#bdbdbd;
margin-bottom:25px;
}

/* INPUTS */

.input{
width:100%;
height:62px;

background:#eef2f8;

border:none;

border-radius:10px;

padding:0 20px;

font-size:17px;

margin-bottom:18px;

color:#000;
}

.input:focus{
outline:none;
}

/* BUTTON */

.btn{
width:100%;
height:60px;

border:none;

border-radius:10px;

background:#e50914;

color:#fff;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.2s;
}

.btn:hover{
background:#ff1f29;
}

/* LINKS */

.links{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin-top:25px;
}

.links a{
color:#fff;
text-decoration:none;
font-size:15px;
}

.links a:hover{
color:#e50914;
}

/* SOCIAL */

.social{
display:flex;
justify-content:center;
gap:15px;
margin-top:30px;
}

.social div{
width:55px;
height:55px;

border-radius:50%;

background:#fff;

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

font-size:24px;
font-weight:700;

color:#000;

cursor:pointer;
}

/* FOOTER */

.footer{
text-align:center;
padding:25px;
color:#888;
font-size:14px;
}

/* REGISTER */

.registerWrap{
display:grid;
grid-template-columns:1fr 520px;
gap:60px;

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

align-items:center;

margin:auto;
}

.registerTitle{
font-size:56px;
line-height:1.1;
margin-bottom:20px;
}

.registerText{
font-size:26px;
line-height:44px;
color:#ddd;
margin-bottom:25px;
}

.registerFeatures{
font-size:20px;
line-height:50px;
}

.passwordRules{
margin-bottom:20px;
font-size:15px;
line-height:30px;
color:#8ed081;
}

/* TABLET */

@media(max-width:1100px){

.logo{
font-size:36px;
}

.registerWrap{
display:flex;
flex-direction:column;
text-align:center;

max-width:750px;

gap:35px;
}

.registerWrap > div:first-child{
width:100%;
}

.registerWrap .card{
width:100%;
max-width:650px;
}

.registerTitle{
font-size:42px;
}

.registerText{
font-size:20px;
line-height:34px;
}

.registerFeatures{
font-size:18px;
line-height:38px;
}

}

/* MOBILE */

@media(max-width:768px){

.logo{
position:relative;
left:auto;
top:auto;

text-align:center;

padding-top:20px;

font-size:32px;
}

.container{
padding:20px 15px 40px;
align-items:flex-start;
}

.card{
padding:25px;
max-width:100%;
}

.card h1{
font-size:30px;
}

.card p{
font-size:15px;
line-height:24px;
}

.input{
height:55px;
font-size:16px;
}

.btn{
height:55px;
font-size:17px;
}

.links{
flex-direction:column;
text-align:center;
}

.social div{
width:50px;
height:50px;
font-size:22px;
}

.registerTitle{
font-size:34px;
}

.registerText{
font-size:18px;
line-height:28px;
}

.registerFeatures{
font-size:16px;
line-height:32px;
}

}

/* SMALL MOBILE */

@media(max-width:480px){

.logo{
font-size:28px;
}

.card{
padding:20px;
}

.card h1{
font-size:26px;
}

.input{
height:50px;
font-size:15px;
}

.btn{
height:50px;
font-size:16px;
}

.registerTitle{
font-size:28px;
}

.registerText{
font-size:15px;
line-height:24px;
}

.registerFeatures{
font-size:14px;
line-height:28px;
}

.social div{
width:45px;
height:45px;
font-size:20px;
}

.footer{
font-size:13px;
}

}

.loginError{

background:
rgba(229,9,20,.12);

border:1px solid
rgba(229,9,20,.45);

color:#ff8a8a;

padding:14px;

border-radius:12px;

margin-bottom:18px;

font-size:14px;

font-weight:700;

text-align:center;

}