@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;500;800&display=swap');


*{
box-sizing:border-box;
}


header{

padding:40px;

background:#111;

}


.folders{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}


.folder{

background:#1c1c1c;
padding:40px;
border-radius:20px;
width:250px;

transition:.3s;

}


.folder:hover{

transform:scale(1.05);

}


a,button{

background:#e50914;
color:white;
padding:12px 30px;
border-radius:25px;
text-decoration:none;

}


input{

display:block;
margin:15px auto;
padding:15px;
border-radius:10px;

}


.login-box{

margin:150px auto;
width:350px;

background:#151515;
padding:40px;
border-radius:20px;

}


body{

margin:0;
font-family:Heebo,Arial;
background:#080808;
color:white;
text-align:center;

}



.hero{

height:70vh;

background:
linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.9)
),
url("../images/hero.jpg");

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

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

}



.overlay{

text-align:center;

}


.overlay h1{

font-size:70px;
margin:0;

}


.overlay p{

font-size:25px;

}



button{

background:#e50914;
border:0;
padding:15px 40px;
color:white;
font-size:20px;
border-radius:30px;

}



.library{

padding:40px;

}



.library h2{

font-size:40px;

}



.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}



.card{

height:350px;

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

border-radius:20px;

overflow:hidden;

text-decoration:none;

color:white;

transition:.4s;

}



.card:hover{

transform:scale(1.05);

}



.card-content{

height:100%;

display:flex;

flex-direction:column;

justify-content:end;

padding:30px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.9)
);


}


.card h3{

font-size:35px;

}



.card span{

font-size:22px;

}



footer{

text-align:center;

padding:30px;

color:#aaa;

}