body{font-family:sans-serif;color:#000;text-align:center;background:#fff;margin:0}

noscript{color:red}
h1{font-size:150%;letter-spacing:1em;transition:letter-spacing 1s}
h1,h2{margin:0.5rem 0 0 0}
h1{position:relative}
p{margin:.25rem 0 1rem 0}
a{text-decoration:none}
a:hover{text-decoration:underline}

.fstube{height:400px;width:360px;margin:1vh auto;display:table}
.sm{font-size:60%}
.lg{font-size:150%}

#data{display:none}
#notvid{cursor:pointer}
#vid{display:none;width:360px;height:380px;border:0}

#slide{height:150vw}
#slide img{width:100%}

#amzn{width:160px;height:95vh;border:0;margin:0;visibility:hidden}

#vid:focus-within body{background:#aaa}
#yt{width:100%;height:95vh;border:1px solid #000}

#lcol,#mcol,#rcol{width:100%}
#lcol a{display:block;white-space:nowrap;margin:2vw .3vw;padding:3px 1px;border-radius:1em;background-color:#def;border:1px solid #66a;transition:color 1s,background-color .5s,border-color .1s}
#lcol a:hover{background-color:#cdf;border:1px solid #004;color:#024}
#lcol div{display:none}
#lcol,#mcol{border:1px solid #888}
#rcol{text-align:center}
#qr{image-rendering:crisp-edges;image-rendering:pixelated;display:table;margin:2vh auto}
#qr-out{background:#fff}

#nav-menu{position:absolute;left:0;top:0;background-color:rgba(255,255,255,.5);font-size:125%}
.drop,#nav-menu{border:1px solid #888;border-radius:1em;padding:0 2px}
.drop{background:#ff0;position:fixed;top:0;left:-128px;transition:left .1s,font-size .2s;margin:auto;border:1px solid #888}
.menu1{display:inline-block;font-size:80%}
.menu1 a{display:block;white-space:nowrap;margin:0 1vw;border-radius:1em}
.menu1:hover .drop{left:0;font-size:300%}
.menu1 a:hover{background-color:#8f8}
#qr-area{visibility:hidden}

#hdr{width:100%;height:34.6vw}

@media(max-width:800px){
 body{font-size:90%}
}

@media(min-height:500px){
 #lcol{background-color:#efe}
 #lcol,.menu1 a{line-height:150%}
}

@media(min-width:740px){
 .row{display:flex;justify-content:flex-start}
 #logo,#lcol,#mcol,#rcol{width:auto}
 #lcol{flex:15%;order:1}
 #mcol{flex:70%;order:2;padding:0 1rem}
 #rcol{flex:15%;order:3}
 #qr{width:75px;height:75px;background:#fff url('qr-code.png') no-repeat;background-size:cover}
 #qr-area{visibility:visible}
 #slide{height:30vw;height:max(30vw,400px)}
}

@media(min-width:1200px){
 #qr{width:125px;height:125px}
 #qr-out{padding:1vh}
}