:root{--view-col:#fff;--view-bgr:rgba(255,255,255,.8);--view-320:rgba(44,62,80,.8);--view-480:rgba(231,76,60,.8);--view-768:rgba(245,171,53,.8);--view-1280:rgba(0,177,106,.8);--view-1920:rgba(52,152,219,.8)}.viewportsize{position:fixed;top:32px;display:block;left:2rem;max-width:256px;padding:4px 6px;border:1px solid rgba(34,49,63,.75);box-shadow:4px 4px 2px 0 rgba(0,0,0,0.15);font-family:'arial',sans-serif;z-index:99999}.viewscreen{color:var(--view-col,#fff)}.viewratio{color:var(--view-col,#fff)}@media(min-width:320px){.viewportsize{background:var(--view-320,#000);color:var(--view-col,#fff)}}@media(min-width:480px){.viewportsize{background:var(--view-480,red);color:var(--view-col,#fff)}}@media(min-width:768px){.viewportsize{background:var(--view-480,orange);color:var(--view-col,#fff)}}@media(min-width:1280px){.viewportsize{background:var(--view-1280,green);color:var(--view-col,#fff)}}@media(min-width:1920px){.viewportsize{background:var(--view-1920,blue);color:var(--view-col,#fff)}}