/* youtube.css */

* { border: 0; margin: 0; outline: 0; padding: 0; }
body { margin: 0; max-width: 100vw; min-height: 100vh; align-items: center; display: flex; flex-flow: column nowrap; }
body > * { flex: 0 0 auto; width: 100%; }
body > main { display: flex; flex-flow: column nowrap; justify-content: flex-start; flex: 1 0 auto; }
ul.tight {
    display: block;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    list-style-position: inside;
    list-style-type: none;
    max-width: 20em;
    padding: .5em;
    width: 100%;
}
@media screen and (min-width: 800px) { ul.tight { max-width: 40em; } }
ul.tight.hidden { display: none; }
ul.tight * { font-size: 1rem; margin: 0; padding: 0; }
ul.tight a { background: transparent; box-shadow: none; color: currentColor; text-decoration: none; }
ul.tight a:hover { color: #ff9900ff; text-decoration: underline; }
ul.tight li { border-bottom: 1px solid #ffffff33; display: block; /* outline: 1px dotted yellow; */ padding-bottom: .5em; position: relative; }
ul.tight li.empty, ul.tight li.hidden { display: none; }
/* ul.tight li:hover p { display: block; } */
ul.tight p.show { display: block; }
ul.tight p { display: none; }
ul.tight h2 { font-weight: 600; padding: .5em; }
ul.tight h3 { font-size: .8rem; font-weight: 400; text-transform: uppercase; }
ul.tight h3:empty { display: none; } 
ul.tight h4 {
    font-size: 0.8rem; font-style: oblique; font-weight: 200;
    max-width: 8em; /* outline: 1px dotted orange; */ padding: 0 1.5em;
    position: absolute; right: 1em; text-align: right; top: 0;
}
@media screen and (min-width:800px) { ul.tight h4 { max-width: 12em; padding: 0; } }
ul.tight footer { display: flex; display: none; justify-content: space-between; width: 100%; }
ul.tight footer.show { display: flex; } 
ul.tight footer * { font-size: .7rem; margin: .125em; text-transform: lowercase; }
.b { background: transparent; border: 1px solid currentColor; color: #999999ff; font-size: .7rem; margin: 5px; padding: .25em; }
.b:hover { background-color: #ffffff33; color: #ccccccff; }
#controls { align-items: center; display: flex; justify-content: flex-end; /* outline: 1px dotted red; */ width: 80%; }

/* eof - youtube.css */