body{margin:0;padding:0;font-family:sans-serif}
header{display:flex;justify-content:space-between}
footer{width:100%;text-align:center;font-size:.8em;position:fixed;bottom:0}
footer p,header p{margin:0;padding:0}
footer.dlpage{position:static}
.dlpage{margin-top:2em}

h2,h1{margin-top:0}

.logo{height:60px;width:auto}

.wrap{width:500px;max-width:calc(90% - 2em);margin:0 auto;padding:1em}

.center{text-align:center}
.qrcode{padding:2em 0}
.backlink{margin-top:2em}
.dlimg img{width:100%;height:auto;}
.dlimg+div .console{margin-top:.5em}
.console{margin-top:2em;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center}
.console a{text-decoration:none}
.wrap.console{justify-content:center}
.wrap.console div{padding:.25em}

.footlogo img{z-index:999;width:40vw;height:auto;max-width:200px}

#filename{margin:0 auto}

#preview{border:1px dotted #888;width:400px;max-width:90%;max-height:280px;height:calc(90vw / 1.48);display:flex;justify-content:center;align-items:center;margin:0 auto}
#preview img{max-height:100%;max-width:100%}

.upload-label,.bottun{display:inline-block;cursor:pointer;margin:1em 0;padding:.7em 1em;line-height:1.4;background:#6495ed;color:#fff;font-size:.95em;font-weight:bold;border-radius:2.5em;transition:.2s}
.upload-label:hover,.bottun:hover{box-shadow:0 8px 10px -2px rgba(0, 0, 0, .2)}
.upload-label input{display:none}

.pause{animation: flash .7s 0s ease-in-out infinite alternate}

@keyframes flash{
  0%   {opacity:1}
  100% {opacity:.5}
}

.myicon{border-radius:50%;margin:5px}

.notes{margin:2em auto}
.linelogin{display:inline-block;background-color:#06C755;color:#fff;padding:1em 2em;border-radius:20px;margin:3em auto;text-decoration:none;font-weight:bold;transition:.5s}
.linelogin:hover{opacity:.9}