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


*{

font-family:
Vazirmatn,sans-serif;

box-sizing:border-box;

}



body{

margin:0;

min-height:100vh;

background:#272727;

display:flex;

align-items:center;

justify-content:center;

color:#f1f1f1;

}



.main-card{

width:min(850px,95%);

background:#0f0f0f;

padding:35px;

border-radius:30px;

}



h1{

text-align:center;

color:#ff0033;

}



input{

width:100%;

padding:18px;

border:0;

border-radius:999px;

background:#272727;

color:white;

}



button{

width:100%;

padding:16px;

border:0;

border-radius:999px;

background:#ff0033;

color:white;

}



.two-buttons{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-top:20px;

}



.video-card{

background:#272727;

border-radius:30px;

overflow:hidden;

}



.video-card img{

width:100%;

}



.video-info{

padding:20px;

color:#aaa;

}



.video-info span{

color:#f1f1f1;

}



.share-box{

margin-top:20px;

background:#272727;

padding:18px;

border-radius:999px;

text-align:center;

}



.quality-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

}



.quality-grid button{

background:#f1f1f1;

color:#0f0f0f;

}



.player-wrapper{

background:#272727;

border-radius:24px;

overflow:hidden;

}


.video-js{

width:100%;

aspect-ratio:16/9;

}


@media(max-width:600px){

.two-buttons{

grid-template-columns:1fr 1fr;

}

.quality-grid{

grid-template-columns:repeat(2,1fr);

}

}