body{font-family:sans-serif;background-color:#f7f7f7}main{--page-padding: 32px;--edge-border-radius: 4px;position:absolute;top:0;left:var(--page-padding);right:var(--page-padding);bottom:var(--page-padding);display:grid;grid-template:"header" auto "download" 64px "." 16px "content" 1fr/1fr}@media screen and (max-width: 1200px){main{--page-padding: 16px}}@media screen and (max-width: 600px){main{--page-padding: 8px}}header{grid-area:header}header>img.wordmark{display:block;margin:32px auto;max-height:96px}section.download,section.error{max-width:400px;width:100%;margin:0 auto;padding:8px;box-sizing:border-box}section.error{grid-area:content;margin:16px auto;padding:0}section.error>div{background-color:pink;padding:16px;border-radius:var(--edge-border-radius)}section.error~section.file{display:none}section.download{grid-area:download;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border-radius:var(--edge-border-radius);background-color:#fff;border:1px solid #949598}section.download.loaded>.download-button{display:none}section.download:not(.loaded)>.save-button{display:none}section.download div.file-metadata{display:flex;flex-basis:0;flex-grow:1;overflow:hidden;align-items:center}section.download div.file-metadata>.file-name-and-size{display:flex;flex-direction:column;overflow:hidden}section.download div.file-metadata>.file-name-and-size>.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}section.download div.file-metadata>.file-name-and-size>.file-size{white-space:nowrap;font-size:.8em}section.download div.file-type-icon{clip-path:circle(50%);width:48px;min-width:48px;height:48px;margin-right:8px;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0}section.download div.file-type-icon img{width:32px;height:32px}section.download div.download-button{width:48px;height:48px;cursor:pointer}section.download div.download-button img{width:48px;height:48px;position:absolute}section.download div.download-button img.overlay{filter:invert(0.8)}section.download div.download-button img.bottom{filter:invert(0.3)}section.download a.save-button>img.save-icon{width:48px;height:48px;filter:invert(0.3)}section.file{grid-area:content;text-align:center;position:relative;display:flex;justify-content:space-around}section.file img,section.file video{position:absolute;max-width:100%;max-height:100%;width:auto;height:auto}section.file audio{position:absolute;max-width:400px;width:100%}
