body{background:#000;color:#ccc;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;height:100vh;overscroll-behavior:none}button#doot{align-self:center;grid-column:2;grid-row:2;justify-self:center;background:rgba(0,0,0,0);border:0;cursor:pointer;display:block;max-width:600px;min-width:80vw}@media(min-width: 768px){button#doot{min-width:600px}}.open~button#doot{z-index:0}button#doot img{display:block;width:100%}span.play{opacity:0;pointer-events:none;transition-property:opacity;transition-duration:200ms}img[src*=".png"]+span.play{opacity:1}span.play:after{background:url("./play.svg") no-repeat center;bottom:0;content:"";display:block;left:0;margin:0 auto;max-width:120px;opacity:.4;position:absolute;right:0;top:0;transition:opacity 200ms}button:active span.play:after,button:focus span.play:after,button:hover span.play:after,button:focus-within span.play:after{opacity:1}@keyframes flash{0%{opacity:1}70%{opacity:1}100%{opacity:0}}.doots{align-self:flex-end;font-size:1.8em;font-family:sans-serif;font-weight:300;grid-column:2;grid-row:3;margin-bottom:2em;position:relative;text-align:center}.doots[data-tooltip]:before{animation-iteration-count:1;animation:flash 1000ms;animation-fill-mode:forwards;content:attr(data-tooltip);display:block;position:absolute;bottom:100%;opacity:1}/*# sourceMappingURL=style.css.map */