body{background:#222;color:#eee;font-family:sans-serif;padding-top:40px;text-align:center;}
input,select,button{padding:10px;border-radius:8px;margin-top:10px;font-size:1em;min-height: 35px;}
video,audio{width:100%;max-width:800px;margin-top:20px;border-radius:12px;}
.download,.df{background:rgb(52,231,52);transition:transform 0.1s;border:none;color:#000;font-weight:bold;}
.opt{background:red;color:#fff;border:none;}
.url{width:100%;box-sizing:border-box;background:#333;color:#eee;border:1px solid #555;}
.bar{width:100%;max-width:800px;height:20px;background:#555;border-radius:10px;overflow:hidden;margin:20px auto;}
.progress{width:0;height:100%;background:lime;transition:width 0.2s;}
.result{margin-top:20px;}
.thumbnail{max-width:400px;border-radius:12px;margin:10px auto;display:block;}
.info{background:#333;padding:15px;border-radius:10px;max-width:800px;margin:20px auto;text-align:left;}
@media (min-width:1025px){.download:hover,.df:hover{transform:scale(1.03)}.download,.df{cursor:pointer;}.opt{cursor:pointer;}}
.download:active,.df:active{transform:scale(0.9);}
.maindiv{grid-template-columns: 74% 1fr 1fr;}
@media (max-width:700px){input,select,button{padding:3px;border-radius:8px;margin-top:10px;font-size:0.7em;}.maindiv{grid-template-columns: 70% 1fr 1fr;}input{padding: 8px;}}
@media (max-width:385px){input,select,button{padding:2px;border-radius:8px;margin-top:10px;font-size:0.6em;}.maindiv{grid-template-columns: 65% 1fr 1fr;}input{padding: 8px;}}
@media (max-width:300px){input,select,button{padding:2px;border-radius:8px;margin-top:10px;font-size:0.5em;}.maindiv{grid-template-columns: 60% 1fr 1fr;}input{padding: 8px;}}
@media (max-width:260px){input,select,button{padding:2px;border-radius:8px;margin-top:10px;font-size:0.4em;}.maindiv{grid-template-columns: 55% 1fr 1fr;}input{padding: 8px;}}