*{

box-sizing:border-box;

}


body{

margin:0;

background:#0f0f0f;

color:white;

font-family:
Arial, sans-serif;

}



.top{

padding:20px;

border-bottom:
1px solid #333;

text-align:center;

}



.top h2{

margin:0;

font-size:28px;

}



.top a{

color:#00ff99;

text-decoration:none;

}



.container{

max-width:1300px;

margin:auto;

padding:25px;

}



.search{

width:100%;

padding:15px;

border-radius:30px;

border:none;

font-size:16px;

margin:20px 0;

}



.videos{

display:grid;

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

gap:25px;

}



.video-card{

background:#181818;

border-radius:15px;

overflow:hidden;

transition:.3s;

}



.video-card:hover{

transform:scale(1.03);

}



.video-card a{

color:white;

text-decoration:none;

}



.thumbnail{

height:160px;

background:
linear-gradient(
135deg,
#222,
#000
);

display:flex;

justify-content:center;

align-items:center;

font-size:60px;

}



.video-card h3{

padding:15px;

font-size:17px;

}



.watch{

max-width:1100px;

margin:auto;

padding:20px;

}



.video-container{

width:100%;

}



video{

width:100%;

max-height:650px;

background:black;

border-radius:15px;

}



.watch h1{

font-size:25px;

margin-top:20px;

}



.creator{

color:#aaa;

}



hr{

border-color:#333;

}



@media(max-width:600px){

.watch{

padding:10px;

}


video{

border-radius:8px;

}

}