body { font-family: "sans-serif"; } figcaption { text-align: center; font-size: 8px; color: #808080; } figure { display: inline-block; } p { margin: 30px 0px 30px 0px; } div.status { color: #FF0000; } textarea { /* height: 30vh; padding: 1em; font-size: 1.5em; text-align: left; border: 1px solid #000; */ box-sizing: border-box; resize: none; width: 100%; height: 540px; } .qrwindow { position: fixed; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; background-color: #FFFFFF; opacity: 1; z-index: 10; border-width: 3px; border-style: solid; border-color: #FFFFFF; padding: 10pt; box-sizing: border-box; } .qrcode { width: 374px; height: 374px; image-rendering: optimizeSpeed; /* */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */ image-rendering: pixelated; /* Chrome as of 2019 */ image-rendering: optimize-contrast; /* CSS3 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } .mobile { width: 300px; border-width: 80px 15px 80px 15px; border-style: solid; border-radius: 30px; border-color: #000000; } .logo { display: block; margin: 0 auto; } .screenshot { width: 400px; border: 2px solid; border-color: #8888AA; } img.banner { vertical-align: -5px; } .button { color:#FFFFFF; background-color:#50B050; text-decoration: none; padding: 15px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; } @media only screen and (min-width: 1px) and (max-width: 630px) { .qrwindow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } } @media only screen and (min-width: 631px) and (max-width: 950px) { } @media only screen and (min-width: 951px) { div.page { max-width: 950px; width: 100%; margin: 0 auto; } }