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

body{
background:#0f0f0f;
color:white;
}

/* HEADER */

header{
height:80px;
background:#181818;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
border-bottom:1px solid rgba(255,255,255,.08);
position:sticky;
top:0;
z-index:100;
}

.logo{
font-size:34px;
font-weight:800;
color:#ff2d55;
}

header input{
width:500px;
padding:14px 20px;
border:none;
border-radius:30px;
background:#262626;
color:white;
outline:none;
}

.profile{
font-weight:700;
}

/* BANNER */

.channel-banner{
width:100%;
height:330px;
overflow:hidden;
}

.channel-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* CHANNEL HEADER */

.channel-header{
display:flex;
align-items:center;
gap:30px;
padding:40px;
background:#181818;
border-bottom:1px solid rgba(255,255,255,.08);
}

.avatar{
width:130px;
height:130px;
border-radius:50%;
object-fit:cover;
border:4px solid #ff2d55;
box-shadow:0 0 30px rgba(255,45,85,.35);
}

.channel-info{
flex:1;
}

.channel-info h1{
font-size:42px;
margin-bottom:10px;
}

.channel-info p{
opacity:.75;
margin-bottom:8px;
}

.bio{
max-width:700px;
line-height:1.6;
}

.subscribe-btn{
background:#ff2d55;
border:none;
padding:16px 35px;
border-radius:30px;
color:white;
font-weight:800;
cursor:pointer;
transition:.3s;
}

.subscribe-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 25px rgba(255,45,85,.4);
}

/* NAV */

.channel-nav{
display:flex;
gap:35px;
padding:22px 40px;
background:#121212;
border-bottom:1px solid rgba(255,255,255,.08);
}

.channel-nav a{
color:white;
text-decoration:none;
font-size:14px;
letter-spacing:2px;
font-weight:700;
opacity:.8;
transition:.3s;
}

.channel-nav a:hover{
color:#ff2d55;
opacity:1;
}

/* VIDEO GRID */

.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
padding:40px;
}

.video-card{
background:#181818;
border-radius:18px;
overflow:hidden;
cursor:pointer;
transition:.3s;
border:1px solid rgba(255,255,255,.06);
}

.video-card:hover{
transform:translateY(-8px);
box-shadow:0 0 35px rgba(255,45,85,.15);
}

.video-card img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}

.video-card h3{
font-size:20px;
padding:18px 18px 8px;
}

.video-card p{
padding:0 18px 18px;
opacity:.7;
}

/* ABOUT */

.about-channel{
padding:80px 40px;
background:#121212;
}

.about-channel h2{
font-size:42px;
margin-bottom:25px;
}

.about-channel p{
max-width:900px;
font-size:18px;
line-height:1.8;
opacity:.8;
}

/* FOOTER */

footer{
padding:60px;
text-align:center;
background:#0f0f0f;
border-top:1px solid rgba(255,255,255,.08);
}

footer h3{
font-size:34px;
color:#ff2d55;
margin-bottom:10px;
}

footer p{
opacity:.7;
margin:8px 0;
}

/* MOBILE */

@media(max-width:900px){

header{
height:auto;
padding:20px;
gap:20px;
flex-direction:column;
}

header input{
width:100%;
}

.channel-banner{
height:220px;
}

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

.subscribe-btn{
width:100%;
max-width:300px;
}

.channel-nav{
overflow-x:auto;
gap:25px;
}

}

@media(max-width:600px){

.channel-info h1{
font-size:32px;
}

.video-grid{
padding:25px;
}

.channel-banner{
height:180px;
}

.about-channel{
padding:60px 25px;
}

}