html * {
    font-family: Roboto!important;
    font-size: 18px;
}
html, body {
    margin: 0;
    padding: 0;
}
h3 {
    background: #f00;
    box-shadow: 0 0 15px 5px #aaa;
    font-size: 1.5rem;
    margin: 0 0 2rem 0;
    padding: 1rem 0;
    text-align: center;
}
h3 a {
    color: #fff;
    display: inline-block;
    font-size: inherit;
    text-decoration: none;
    text-shadow: 0 0 0 #000;
    transition: .25s linear;
}
h3 a:hover,
h3 a:active {
    transform: scale(1.01);
    text-shadow: 0 0 4px #000;
}
section {
    text-align: center;
}
[name="yt_url"] {
    padding: .3rem .5rem;
    min-width: 25em;
}

.retry,
[name="search"] {
    background: #f00;
    border: 0;
    color: #fff;
    display: inline-block;
    padding: .3rem .5rem;
}
#query {
    box-shadow: 0 0 4px 1px #aaa;
    display: flex;
    flex-flow: row nowrap;
    margin: 1rem auto;
    padding: .5rem;
    width: 50%;
}
#progress {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
#progress .inv {
    box-shadow: 0 0 3px 1px #555;
    color: #fff;
    margin: 1rem auto auto;
    padding: .3rem .5rem;
}
.dl_btn {
    background: green;
    color: #fff;
    display: inline-block;
    /* margin: 10px 0 0; */
    padding: .3rem .5rem;
    text-decoration: none;
}
.dl_btn[active=''] {
    opacity: .75;
    pointer-events: none;
    text-align: center;
    display: inline-block;
}
#progress .title {
    display: inline-block;
    font-weight: bold;
    margin: 5px 0 10px;
}
.inv { background: #f00; }
.res { background: cornflowerblue; }
#progress:empty,
#query:empty {
    display: none;
}
legend {
    background: #000;
    color: #fff;
    padding: 3px 8px;
}
img {
    display: block;
    margin: 5px auto 0;
}
#done section {
    text-align: center;
}
#done section a {
    background: green;
    color: #fff;
    display: inline-block;
    opacity: .85;
    padding: .3rem .5rem;
    text-decoration: none;
    transition: .3s;
}
#done section a ~ a {
    background: #f00;
    margin-top: 2rem;
}
#done section a:hover {
    opacity: 1;
}
.dl_msg {
    flex: 1 1 auto;
    height: 30px;
    margin: 0 0 0 10px;
}
.dl_msg > span {
    background: url('l-icon.gif') 50%;
    background-size: 400%;
    display: inline-block;
    height: 35px;
    margin-left: 8px; 
    vertical-align: bottom;
    width: 35px;
}
.progress {
    display: flex;
    margin-top: 10px;
}
progress {
    -webkit-appearance: none;
    position: relative;
    background: #777;
    display: block;
    height: 35px;
    width: unset;
}
progress:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    line-height: 35px;
    text-align: center;
}
progress[value]:not([value='']):before { content: 'Fetching content...'; }
progress[max][value*="100"]:before {
    content: "Sending file..."
}
progress[value]::-webkit-progress-bar {
  background: #bbb;
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25);
}
progress[value]::-webkit-progress-value {
    background: #f00;
}
#ytd_main>:first-child>:first-child{margin-bottom:1em}