Skip to content

Instantly share code, notes, and snippets.

@Davr1

Davr1/cssbrowserinfo.svg

Last active April 23, 2022 19:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Davr1/c27496be510b46da4ad2f24d7d4f5742 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Davr1/c27496be510b46da4ad2f24d7d4f5742 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
cssbrowserinfo.svg
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<meta http-equiv="refresh" content="0; url=https://youtu.be/dQw4w9WgXcQ" xmlns="http://www.w3.org/1999/xhtml" />
<style>
@media (prefers-color-scheme: dark) {
div#stuff {
background-color: black;
color: white;
}
}
#stuff {
background-color: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: black;
font-weight: bold;
white-space: nowrap;
text-rendering: optimizeLegibility;
}
.title {
font-family: sans-serif;
}
.value {
font-family: monospace;
word-spacing: -0.5ch;
}
#size {
font-size: 12vmin;
}
#width::before {
content: "0";
}
#height::before {
content: "0";
}
#browser {
font-size: 8vmin;
}
#browsername::before {
content: "Unknown";
}
#browsername::after {
width: 1.1em;
height: 1.1em;
display: inline-block;
background: currentColor;
vertical-align: text-top;
margin-left: 0.25em;
}
</style>
<style>
@supports (-webkit-appearance:none) and (font-variant-caps:normal) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)) {
#browsername::before {
content: "Chromium"
}
}
@supports (-moz-appearance:none) {
#browsername::before {
content: "Firefox"
}
}
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
#browsername::before {
content: "Safari"
}
}
}
@supports (-ms-ime-align:auto) {
#browsername::before {
content: "MS Edge"
}
}
@media (pointer:coarse), (any-pointer:coarse) {
#browsername::after {
content: '';
-webkit-mask: center/cover no-repeat url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9,11.24V7.5C9,6.12,10.12,5,11.5,5S14,6.12,14,7.5v3.74c1.21-0.81,2-2.18,2-3.74C16,5.01,13.99,3,11.5,3S7,5.01,7,7.5 C7,9.06,7.79,10.43,9,11.24z M18.84,15.87l-4.54-2.26c-0.17-0.07-0.35-0.11-0.54-0.11H13v-6C13,6.67,12.33,6,11.5,6 S10,6.67,10,7.5v10.74c-3.6-0.76-3.54-0.75-3.67-0.75c-0.31,0-0.59,0.13-0.79,0.33l-0.79,0.8l4.94,4.94 C9.96,23.83,10.34,24,10.75,24h6.79c0.75,0,1.33-0.55,1.44-1.28l0.75-5.27c0.01-0.07,0.02-0.14,0.02-0.2 C19.75,16.63,19.37,16.09,18.84,15.87z' /%3E%3C/svg%3E");
}
}
@media (pointer:fine), (any-pointer:fine) {
#browsername::after {
content: '';
-webkit-mask: center/cover no-repeat url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z' /%3E%3C/svg%3E");
}
}
@media (pointer:none) {
#browsername::after {
content: '';
-webkit-mask: center/cover no-repeat url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M13.5,13 c0,0.83-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5c0-0.83,0.67-1.5,1.5-1.5S13.5,12.17,13.5,13z M12,9c-2.73,0-5.06,1.66-6,4 c0.94,2.34,3.27,4,6,4s5.06-1.66,6-4C17.06,10.66,14.73,9,12,9z M12,15.5c-1.38,0-2.5-1.12-2.5-2.5c0-1.38,1.12-2.5,2.5-2.5 c1.38,0,2.5,1.12,2.5,2.5C14.5,14.38,13.38,15.5,12,15.5z' /%3E%3C/svg%3E");
}
}
</style>
<style>
@media (min-width: 10px) and (max-width: 20px) { #width::before { content: "10"; } }
@media (min-width: 20px) and (max-width: 30px) { #width::before { content: "20"; } }
@media (min-width: 30px) and (max-width: 40px) { #width::before { content: "30"; } }
@media (min-width: 40px) and (max-width: 50px) { #width::before { content: "40"; } }
@media (min-width: 50px) and (max-width: 60px) { #width::before { content: "50"; } }
@media (min-width: 60px) and (max-width: 70px) { #width::before { content: "60"; } }
@media (min-width: 70px) and (max-width: 80px) { #width::before { content: "70"; } }
@media (min-width: 80px) and (max-width: 90px) { #width::before { content: "80"; } }
@media (min-width: 90px) and (max-width: 100px) { #width::before { content: "90"; } }
@media (min-width: 100px) and (max-width: 110px) { #width::before { content: "100"; } }
@media (min-width: 110px) and (max-width: 120px) { #width::before { content: "110"; } }
@media (min-width: 120px) and (max-width: 130px) { #width::before { content: "120"; } }
@media (min-width: 130px) and (max-width: 140px) { #width::before { content: "130"; } }
@media (min-width: 140px) and (max-width: 150px) { #width::before { content: "140"; } }
@media (min-width: 150px) and (max-width: 160px) { #width::before { content: "150"; } }
@media (min-width: 160px) and (max-width: 170px) { #width::before { content: "160"; } }
@media (min-width: 170px) and (max-width: 180px) { #width::before { content: "170"; } }
@media (min-width: 180px) and (max-width: 190px) { #width::before { content: "180"; } }
@media (min-width: 190px) and (max-width: 200px) { #width::before { content: "190"; } }
@media (min-width: 200px) and (max-width: 210px) { #width::before { content: "200"; } }
@media (min-width: 210px) and (max-width: 220px) { #width::before { content: "210"; } }
@media (min-width: 220px) and (max-width: 230px) { #width::before { content: "220"; } }
@media (min-width: 230px) and (max-width: 240px) { #width::before { content: "230"; } }
@media (min-width: 240px) and (max-width: 250px) { #width::before { content: "240"; } }
@media (min-width: 250px) and (max-width: 260px) { #width::before { content: "250"; } }
@media (min-width: 260px) and (max-width: 270px) { #width::before { content: "260"; } }
@media (min-width: 270px) and (max-width: 280px) { #width::before { content: "270"; } }
@media (min-width: 280px) and (max-width: 290px) { #width::before { content: "280"; } }
@media (min-width: 290px) and (max-width: 300px) { #width::before { content: "290"; } }
@media (min-width: 300px) and (max-width: 310px) { #width::before { content: "300"; } }
@media (min-width: 310px) and (max-width: 320px) { #width::before { content: "310"; } }
@media (min-width: 320px) and (max-width: 330px) { #width::before { content: "320"; } }
@media (min-width: 330px) and (max-width: 340px) { #width::before { content: "330"; } }
@media (min-width: 340px) and (max-width: 350px) { #width::before { content: "340"; } }
@media (min-width: 350px) and (max-width: 360px) { #width::before { content: "350"; } }
@media (min-width: 360px) and (max-width: 370px) { #width::before { content: "360"; } }
@media (min-width: 370px) and (max-width: 380px) { #width::before { content: "370"; } }
@media (min-width: 380px) and (max-width: 390px) { #width::before { content: "380"; } }
@media (min-width: 390px) and (max-width: 400px) { #width::before { content: "390"; } }
@media (min-width: 400px) and (max-width: 410px) { #width::before { content: "400"; } }
@media (min-width: 410px) and (max-width: 420px) { #width::before { content: "410"; } }
@media (min-width: 420px) and (max-width: 430px) { #width::before { content: "420"; } }
@media (min-width: 430px) and (max-width: 440px) { #width::before { content: "430"; } }
@media (min-width: 440px) and (max-width: 450px) { #width::before { content: "440"; } }
@media (min-width: 450px) and (max-width: 460px) { #width::before { content: "450"; } }
@media (min-width: 460px) and (max-width: 470px) { #width::before { content: "460"; } }
@media (min-width: 470px) and (max-width: 480px) { #width::before { content: "470"; } }
@media (min-width: 480px) and (max-width: 490px) { #width::before { content: "480"; } }
@media (min-width: 490px) and (max-width: 500px) { #width::before { content: "490"; } }
@media (min-width: 500px) and (max-width: 510px) { #width::before { content: "500"; } }
@media (min-width: 510px) and (max-width: 520px) { #width::before { content: "510"; } }
@media (min-width: 520px) and (max-width: 530px) { #width::before { content: "520"; } }
@media (min-width: 530px) and (max-width: 540px) { #width::before { content: "530"; } }
@media (min-width: 540px) and (max-width: 550px) { #width::before { content: "540"; } }
@media (min-width: 550px) and (max-width: 560px) { #width::before { content: "550"; } }
@media (min-width: 560px) and (max-width: 570px) { #width::before { content: "560"; } }
@media (min-width: 570px) and (max-width: 580px) { #width::before { content: "570"; } }
@media (min-width: 580px) and (max-width: 590px) { #width::before { content: "580"; } }
@media (min-width: 590px) and (max-width: 600px) { #width::before { content: "590"; } }
@media (min-width: 600px) and (max-width: 610px) { #width::before { content: "600"; } }
@media (min-width: 610px) and (max-width: 620px) { #width::before { content: "610"; } }
@media (min-width: 620px) and (max-width: 630px) { #width::before { content: "620"; } }
@media (min-width: 630px) and (max-width: 640px) { #width::before { content: "630"; } }
@media (min-width: 640px) and (max-width: 650px) { #width::before { content: "640"; } }
@media (min-width: 650px) and (max-width: 660px) { #width::before { content: "650"; } }
@media (min-width: 660px) and (max-width: 670px) { #width::before { content: "660"; } }
@media (min-width: 670px) and (max-width: 680px) { #width::before { content: "670"; } }
@media (min-width: 680px) and (max-width: 690px) { #width::before { content: "680"; } }
@media (min-width: 690px) and (max-width: 700px) { #width::before { content: "690"; } }
@media (min-width: 700px) and (max-width: 710px) { #width::before { content: "700"; } }
@media (min-width: 710px) and (max-width: 720px) { #width::before { content: "710"; } }
@media (min-width: 720px) and (max-width: 730px) { #width::before { content: "720"; } }
@media (min-width: 730px) and (max-width: 740px) { #width::before { content: "730"; } }
@media (min-width: 740px) and (max-width: 750px) { #width::before { content: "740"; } }
@media (min-width: 750px) and (max-width: 760px) { #width::before { content: "750"; } }
@media (min-width: 760px) and (max-width: 770px) { #width::before { content: "760"; } }
@media (min-width: 770px) and (max-width: 780px) { #width::before { content: "770"; } }
@media (min-width: 780px) and (max-width: 790px) { #width::before { content: "780"; } }
@media (min-width: 790px) and (max-width: 800px) { #width::before { content: "790"; } }
@media (min-width: 800px) and (max-width: 810px) { #width::before { content: "800"; } }
@media (min-width: 810px) and (max-width: 820px) { #width::before { content: "810"; } }
@media (min-width: 820px) and (max-width: 830px) { #width::before { content: "820"; } }
@media (min-width: 830px) and (max-width: 840px) { #width::before { content: "830"; } }
@media (min-width: 840px) and (max-width: 850px) { #width::before { content: "840"; } }
@media (min-width: 850px) and (max-width: 860px) { #width::before { content: "850"; } }
@media (min-width: 860px) and (max-width: 870px) { #width::before { content: "860"; } }
@media (min-width: 870px) and (max-width: 880px) { #width::before { content: "870"; } }
@media (min-width: 880px) and (max-width: 890px) { #width::before { content: "880"; } }
@media (min-width: 890px) and (max-width: 900px) { #width::before { content: "890"; } }
@media (min-width: 900px) and (max-width: 910px) { #width::before { content: "900"; } }
@media (min-width: 910px) and (max-width: 920px) { #width::before { content: "910"; } }
@media (min-width: 920px) and (max-width: 930px) { #width::before { content: "920"; } }
@media (min-width: 930px) and (max-width: 940px) { #width::before { content: "930"; } }
@media (min-width: 940px) and (max-width: 950px) { #width::before { content: "940"; } }
@media (min-width: 950px) and (max-width: 960px) { #width::before { content: "950"; } }
@media (min-width: 960px) and (max-width: 970px) { #width::before { content: "960"; } }
@media (min-width: 970px) and (max-width: 980px) { #width::before { content: "970"; } }
@media (min-width: 980px) and (max-width: 990px) { #width::before { content: "980"; } }
@media (min-width: 990px) and (max-width: 1000px) { #width::before { content: "990"; } }
@media (min-width: 1000px) and (max-width: 1010px) { #width::before { content: "1000"; } }
@media (min-width: 1010px) and (max-width: 1020px) { #width::before { content: "1010"; } }
@media (min-width: 1020px) and (max-width: 1030px) { #width::before { content: "1020"; } }
@media (min-width: 1030px) and (max-width: 1040px) { #width::before { content: "1030"; } }
@media (min-width: 1040px) and (max-width: 1050px) { #width::before { content: "1040"; } }
@media (min-width: 1050px) and (max-width: 1060px) { #width::before { content: "1050"; } }
@media (min-width: 1060px) and (max-width: 1070px) { #width::before { content: "1060"; } }
@media (min-width: 1070px) and (max-width: 1080px) { #width::before { content: "1070"; } }
@media (min-width: 1080px) and (max-width: 1090px) { #width::before { content: "1080"; } }
@media (min-width: 1090px) and (max-width: 1100px) { #width::before { content: "1090"; } }
@media (min-width: 1100px) and (max-width: 1110px) { #width::before { content: "1100"; } }
@media (min-width: 1110px) and (max-width: 1120px) { #width::before { content: "1110"; } }
@media (min-width: 1120px) and (max-width: 1130px) { #width::before { content: "1120"; } }
@media (min-width: 1130px) and (max-width: 1140px) { #width::before { content: "1130"; } }
@media (min-width: 1140px) and (max-width: 1150px) { #width::before { content: "1140"; } }
@media (min-width: 1150px) and (max-width: 1160px) { #width::before { content: "1150"; } }
@media (min-width: 1160px) and (max-width: 1170px) { #width::before { content: "1160"; } }
@media (min-width: 1170px) and (max-width: 1180px) { #width::before { content: "1170"; } }
@media (min-width: 1180px) and (max-width: 1190px) { #width::before { content: "1180"; } }
@media (min-width: 1190px) and (max-width: 1200px) { #width::before { content: "1190"; } }
@media (min-width: 1200px) and (max-width: 1210px) { #width::before { content: "1200"; } }
@media (min-width: 1210px) and (max-width: 1220px) { #width::before { content: "1210"; } }
@media (min-width: 1220px) and (max-width: 1230px) { #width::before { content: "1220"; } }
@media (min-width: 1230px) and (max-width: 1240px) { #width::before { content: "1230"; } }
@media (min-width: 1240px) and (max-width: 1250px) { #width::before { content: "1240"; } }
@media (min-width: 1250px) and (max-width: 1260px) { #width::before { content: "1250"; } }
@media (min-width: 1260px) and (max-width: 1270px) { #width::before { content: "1260"; } }
@media (min-width: 1270px) and (max-width: 1280px) { #width::before { content: "1270"; } }
@media (min-width: 1280px) and (max-width: 1290px) { #width::before { content: "1280"; } }
@media (min-width: 1290px) and (max-width: 1300px) { #width::before { content: "1290"; } }
@media (min-width: 1300px) and (max-width: 1310px) { #width::before { content: "1300"; } }
@media (min-width: 1310px) and (max-width: 1320px) { #width::before { content: "1310"; } }
@media (min-width: 1320px) and (max-width: 1330px) { #width::before { content: "1320"; } }
@media (min-width: 1330px) and (max-width: 1340px) { #width::before { content: "1330"; } }
@media (min-width: 1340px) and (max-width: 1350px) { #width::before { content: "1340"; } }
@media (min-width: 1350px) and (max-width: 1360px) { #width::before { content: "1350"; } }
@media (min-width: 1360px) and (max-width: 1370px) { #width::before { content: "1360"; } }
@media (min-width: 1370px) and (max-width: 1380px) { #width::before { content: "1370"; } }
@media (min-width: 1380px) and (max-width: 1390px) { #width::before { content: "1380"; } }
@media (min-width: 1390px) and (max-width: 1400px) { #width::before { content: "1390"; } }
@media (min-width: 1400px) and (max-width: 1410px) { #width::before { content: "1400"; } }
@media (min-width: 1410px) and (max-width: 1420px) { #width::before { content: "1410"; } }
@media (min-width: 1420px) and (max-width: 1430px) { #width::before { content: "1420"; } }
@media (min-width: 1430px) and (max-width: 1440px) { #width::before { content: "1430"; } }
@media (min-width: 1440px) and (max-width: 1450px) { #width::before { content: "1440"; } }
@media (min-width: 1450px) and (max-width: 1460px) { #width::before { content: "1450"; } }
@media (min-width: 1460px) and (max-width: 1470px) { #width::before { content: "1460"; } }
@media (min-width: 1470px) and (max-width: 1480px) { #width::before { content: "1470"; } }
@media (min-width: 1480px) and (max-width: 1490px) { #width::before { content: "1480"; } }
@media (min-width: 1490px) and (max-width: 1500px) { #width::before { content: "1490"; } }
@media (min-width: 1500px) and (max-width: 1510px) { #width::before { content: "1500"; } }
@media (min-width: 1510px) and (max-width: 1520px) { #width::before { content: "1510"; } }
@media (min-width: 1520px) and (max-width: 1530px) { #width::before { content: "1520"; } }
@media (min-width: 1530px) and (max-width: 1540px) { #width::before { content: "1530"; } }
@media (min-width: 1540px) and (max-width: 1550px) { #width::before { content: "1540"; } }
@media (min-width: 1550px) and (max-width: 1560px) { #width::before { content: "1550"; } }
@media (min-width: 1560px) and (max-width: 1570px) { #width::before { content: "1560"; } }
@media (min-width: 1570px) and (max-width: 1580px) { #width::before { content: "1570"; } }
@media (min-width: 1580px) and (max-width: 1590px) { #width::before { content: "1580"; } }
@media (min-width: 1590px) and (max-width: 1600px) { #width::before { content: "1590"; } }
@media (min-width: 1600px) and (max-width: 1610px) { #width::before { content: "1600"; } }
@media (min-width: 1610px) and (max-width: 1620px) { #width::before { content: "1610"; } }
@media (min-width: 1620px) and (max-width: 1630px) { #width::before { content: "1620"; } }
@media (min-width: 1630px) and (max-width: 1640px) { #width::before { content: "1630"; } }
@media (min-width: 1640px) and (max-width: 1650px) { #width::before { content: "1640"; } }
@media (min-width: 1650px) and (max-width: 1660px) { #width::before { content: "1650"; } }
@media (min-width: 1660px) and (max-width: 1670px) { #width::before { content: "1660"; } }
@media (min-width: 1670px) and (max-width: 1680px) { #width::before { content: "1670"; } }
@media (min-width: 1680px) and (max-width: 1690px) { #width::before { content: "1680"; } }
@media (min-width: 1690px) and (max-width: 1700px) { #width::before { content: "1690"; } }
@media (min-width: 1700px) and (max-width: 1710px) { #width::before { content: "1700"; } }
@media (min-width: 1710px) and (max-width: 1720px) { #width::before { content: "1710"; } }
@media (min-width: 1720px) and (max-width: 1730px) { #width::before { content: "1720"; } }
@media (min-width: 1730px) and (max-width: 1740px) { #width::before { content: "1730"; } }
@media (min-width: 1740px) and (max-width: 1750px) { #width::before { content: "1740"; } }
@media (min-width: 1750px) and (max-width: 1760px) { #width::before { content: "1750"; } }
@media (min-width: 1760px) and (max-width: 1770px) { #width::before { content: "1760"; } }
@media (min-width: 1770px) and (max-width: 1780px) { #width::before { content: "1770"; } }
@media (min-width: 1780px) and (max-width: 1790px) { #width::before { content: "1780"; } }
@media (min-width: 1790px) and (max-width: 1800px) { #width::before { content: "1790"; } }
@media (min-width: 1800px) and (max-width: 1810px) { #width::before { content: "1800"; } }
@media (min-width: 1810px) and (max-width: 1820px) { #width::before { content: "1810"; } }
@media (min-width: 1820px) and (max-width: 1830px) { #width::before { content: "1820"; } }
@media (min-width: 1830px) and (max-width: 1840px) { #width::before { content: "1830"; } }
@media (min-width: 1840px) and (max-width: 1850px) { #width::before { content: "1840"; } }
@media (min-width: 1850px) and (max-width: 1860px) { #width::before { content: "1850"; } }
@media (min-width: 1860px) and (max-width: 1870px) { #width::before { content: "1860"; } }
@media (min-width: 1870px) and (max-width: 1880px) { #width::before { content: "1870"; } }
@media (min-width: 1880px) and (max-width: 1890px) { #width::before { content: "1880"; } }
@media (min-width: 1890px) and (max-width: 1900px) { #width::before { content: "1890"; } }
@media (min-width: 1900px) and (max-width: 1910px) { #width::before { content: "1900"; } }
@media (min-width: 1910px) and (max-width: 1920px) { #width::before { content: "1910"; } }
@media (min-width: 1920px) and (max-width: 1930px) { #width::before { content: "1920"; } }
@media (min-width: 1930px) and (max-width: 1940px) { #width::before { content: "1930"; } }
@media (min-width: 1940px) and (max-width: 1950px) { #width::before { content: "1940"; } }
@media (min-width: 1950px) and (max-width: 1960px) { #width::before { content: "1950"; } }
@media (min-width: 1960px) and (max-width: 1970px) { #width::before { content: "1960"; } }
@media (min-width: 1970px) and (max-width: 1980px) { #width::before { content: "1970"; } }
@media (min-width: 1980px) and (max-width: 1990px) { #width::before { content: "1980"; } }
@media (min-width: 1990px) and (max-width: 2000px) { #width::before { content: "1990"; } }
@media (min-width: 2000px) and (max-width: 2010px) { #width::before { content: "2000"; } }
@media (min-width: 2010px) and (max-width: 2020px) { #width::before { content: "2010"; } }
@media (min-width: 2020px) and (max-width: 2030px) { #width::before { content: "2020"; } }
@media (min-width: 2030px) and (max-width: 2040px) { #width::before { content: "2030"; } }
@media (min-width: 2040px) and (max-width: 2050px) { #width::before { content: "2040"; } }
@media (min-width: 2050px) and (max-width: 2060px) { #width::before { content: "2050"; } }
@media (min-width: 2060px) and (max-width: 2070px) { #width::before { content: "2060"; } }
@media (min-width: 2070px) and (max-width: 2080px) { #width::before { content: "2070"; } }
@media (min-width: 2080px) and (max-width: 2090px) { #width::before { content: "2080"; } }
@media (min-width: 2090px) and (max-width: 2100px) { #width::before { content: "2090"; } }
@media (min-width: 2100px) and (max-width: 2110px) { #width::before { content: "2100"; } }
@media (min-width: 2110px) and (max-width: 2120px) { #width::before { content: "2110"; } }
@media (min-width: 2120px) and (max-width: 2130px) { #width::before { content: "2120"; } }
@media (min-width: 2130px) and (max-width: 2140px) { #width::before { content: "2130"; } }
@media (min-width: 2140px) and (max-width: 2150px) { #width::before { content: "2140"; } }
@media (min-width: 2150px) and (max-width: 2160px) { #width::before { content: "2150"; } }
@media (min-width: 2160px) and (max-width: 2170px) { #width::before { content: "2160"; } }
@media (min-width: 2170px) and (max-width: 2180px) { #width::before { content: "2170"; } }
@media (min-width: 2180px) and (max-width: 2190px) { #width::before { content: "2180"; } }
@media (min-width: 2190px) and (max-width: 2200px) { #width::before { content: "2190"; } }
@media (min-width: 2200px) and (max-width: 2210px) { #width::before { content: "2200"; } }
@media (min-width: 2210px) and (max-width: 2220px) { #width::before { content: "2210"; } }
@media (min-width: 2220px) and (max-width: 2230px) { #width::before { content: "2220"; } }
@media (min-width: 2230px) and (max-width: 2240px) { #width::before { content: "2230"; } }
@media (min-width: 2240px) and (max-width: 2250px) { #width::before { content: "2240"; } }
@media (min-width: 2250px) and (max-width: 2260px) { #width::before { content: "2250"; } }
@media (min-width: 2260px) and (max-width: 2270px) { #width::before { content: "2260"; } }
@media (min-width: 2270px) and (max-width: 2280px) { #width::before { content: "2270"; } }
@media (min-width: 2280px) and (max-width: 2290px) { #width::before { content: "2280"; } }
@media (min-width: 2290px) and (max-width: 2300px) { #width::before { content: "2290"; } }
@media (min-width: 2300px) and (max-width: 2310px) { #width::before { content: "2300"; } }
@media (min-width: 2310px) and (max-width: 2320px) { #width::before { content: "2310"; } }
@media (min-width: 2320px) and (max-width: 2330px) { #width::before { content: "2320"; } }
@media (min-width: 2330px) and (max-width: 2340px) { #width::before { content: "2330"; } }
@media (min-width: 2340px) and (max-width: 2350px) { #width::before { content: "2340"; } }
@media (min-width: 2350px) and (max-width: 2360px) { #width::before { content: "2350"; } }
@media (min-width: 2360px) and (max-width: 2370px) { #width::before { content: "2360"; } }
@media (min-width: 2370px) and (max-width: 2380px) { #width::before { content: "2370"; } }
@media (min-width: 2380px) and (max-width: 2390px) { #width::before { content: "2380"; } }
@media (min-width: 2390px) and (max-width: 2400px) { #width::before { content: "2390"; } }
@media (min-width: 2400px) and (max-width: 2410px) { #width::before { content: "2400"; } }
@media (min-width: 2410px) and (max-width: 2420px) { #width::before { content: "2410"; } }
@media (min-width: 2420px) and (max-width: 2430px) { #width::before { content: "2420"; } }
@media (min-width: 2430px) and (max-width: 2440px) { #width::before { content: "2430"; } }
@media (min-width: 2440px) and (max-width: 2450px) { #width::before { content: "2440"; } }
@media (min-width: 2450px) and (max-width: 2460px) { #width::before { content: "2450"; } }
@media (min-width: 2460px) and (max-width: 2470px) { #width::before { content: "2460"; } }
@media (min-width: 2470px) and (max-width: 2480px) { #width::before { content: "2470"; } }
@media (min-width: 2480px) and (max-width: 2490px) { #width::before { content: "2480"; } }
@media (min-width: 2490px) and (max-width: 2500px) { #width::before { content: "2490"; } }
@media (min-width: 2500px) and (max-width: 2510px) { #width::before { content: "2500"; } }
@media (min-width: 2510px) and (max-width: 2520px) { #width::before { content: "2510"; } }
@media (min-width: 2520px) and (max-width: 2530px) { #width::before { content: "2520"; } }
@media (min-width: 2530px) and (max-width: 2540px) { #width::before { content: "2530"; } }
@media (min-width: 2540px) and (max-width: 2550px) { #width::before { content: "2540"; } }
@media (min-width: 2550px) and (max-width: 2560px) { #width::before { content: "2550"; } }
@media (min-width: 2560px) and (max-width: 2570px) { #width::before { content: "2560"; } }
@media (min-width: 2570px) and (max-width: 2580px) { #width::before { content: "2570"; } }
@media (min-width: 2580px) and (max-width: 2590px) { #width::before { content: "2580"; } }
@media (min-width: 2590px) and (max-width: 2600px) { #width::before { content: "2590"; } }
@media (min-width: 2600px) and (max-width: 2610px) { #width::before { content: "2600"; } }
@media (min-width: 2610px) and (max-width: 2620px) { #width::before { content: "2610"; } }
@media (min-width: 2620px) and (max-width: 2630px) { #width::before { content: "2620"; } }
@media (min-width: 2630px) and (max-width: 2640px) { #width::before { content: "2630"; } }
@media (min-width: 2640px) and (max-width: 2650px) { #width::before { content: "2640"; } }
@media (min-width: 2650px) and (max-width: 2660px) { #width::before { content: "2650"; } }
@media (min-width: 2660px) and (max-width: 2670px) { #width::before { content: "2660"; } }
@media (min-width: 2670px) and (max-width: 2680px) { #width::before { content: "2670"; } }
@media (min-width: 2680px) and (max-width: 2690px) { #width::before { content: "2680"; } }
@media (min-width: 2690px) and (max-width: 2700px) { #width::before { content: "2690"; } }
@media (min-width: 2700px) and (max-width: 2710px) { #width::before { content: "2700"; } }
@media (min-width: 2710px) and (max-width: 2720px) { #width::before { content: "2710"; } }
@media (min-width: 2720px) and (max-width: 2730px) { #width::before { content: "2720"; } }
@media (min-width: 2730px) and (max-width: 2740px) { #width::before { content: "2730"; } }
@media (min-width: 2740px) and (max-width: 2750px) { #width::before { content: "2740"; } }
@media (min-width: 2750px) and (max-width: 2760px) { #width::before { content: "2750"; } }
@media (min-width: 2760px) and (max-width: 2770px) { #width::before { content: "2760"; } }
@media (min-width: 2770px) and (max-width: 2780px) { #width::before { content: "2770"; } }
@media (min-width: 2780px) and (max-width: 2790px) { #width::before { content: "2780"; } }
@media (min-width: 2790px) and (max-width: 2800px) { #width::before { content: "2790"; } }
@media (min-width: 2800px) and (max-width: 2810px) { #width::before { content: "2800"; } }
@media (min-width: 2810px) and (max-width: 2820px) { #width::before { content: "2810"; } }
@media (min-width: 2820px) and (max-width: 2830px) { #width::before { content: "2820"; } }
@media (min-width: 2830px) and (max-width: 2840px) { #width::before { content: "2830"; } }
@media (min-width: 2840px) and (max-width: 2850px) { #width::before { content: "2840"; } }
@media (min-width: 2850px) and (max-width: 2860px) { #width::before { content: "2850"; } }
@media (min-width: 2860px) and (max-width: 2870px) { #width::before { content: "2860"; } }
@media (min-width: 2870px) and (max-width: 2880px) { #width::before { content: "2870"; } }
@media (min-width: 2880px) and (max-width: 2890px) { #width::before { content: "2880"; } }
@media (min-width: 2890px) and (max-width: 2900px) { #width::before { content: "2890"; } }
@media (min-width: 2900px) and (max-width: 2910px) { #width::before { content: "2900"; } }
@media (min-width: 2910px) and (max-width: 2920px) { #width::before { content: "2910"; } }
@media (min-width: 2920px) and (max-width: 2930px) { #width::before { content: "2920"; } }
@media (min-width: 2930px) and (max-width: 2940px) { #width::before { content: "2930"; } }
@media (min-width: 2940px) and (max-width: 2950px) { #width::before { content: "2940"; } }
@media (min-width: 2950px) and (max-width: 2960px) { #width::before { content: "2950"; } }
@media (min-width: 2960px) and (max-width: 2970px) { #width::before { content: "2960"; } }
@media (min-width: 2970px) and (max-width: 2980px) { #width::before { content: "2970"; } }
@media (min-width: 2980px) and (max-width: 2990px) { #width::before { content: "2980"; } }
@media (min-width: 2990px) and (max-width: 3000px) { #width::before { content: "2990"; } }
@media (min-width: 3000px) and (max-width: 3010px) { #width::before { content: "3000"; } }
@media (min-width: 3010px) and (max-width: 3020px) { #width::before { content: "3010"; } }
@media (min-width: 3020px) and (max-width: 3030px) { #width::before { content: "3020"; } }
@media (min-width: 3030px) and (max-width: 3040px) { #width::before { content: "3030"; } }
@media (min-width: 3040px) and (max-width: 3050px) { #width::before { content: "3040"; } }
@media (min-width: 3050px) and (max-width: 3060px) { #width::before { content: "3050"; } }
@media (min-width: 3060px) and (max-width: 3070px) { #width::before { content: "3060"; } }
@media (min-width: 3070px) and (max-width: 3080px) { #width::before { content: "3070"; } }
@media (min-width: 3080px) and (max-width: 3090px) { #width::before { content: "3080"; } }
@media (min-width: 3090px) and (max-width: 3100px) { #width::before { content: "3090"; } }
@media (min-width: 3100px) and (max-width: 3110px) { #width::before { content: "3100"; } }
@media (min-width: 3110px) and (max-width: 3120px) { #width::before { content: "3110"; } }
@media (min-width: 3120px) and (max-width: 3130px) { #width::before { content: "3120"; } }
@media (min-width: 3130px) and (max-width: 3140px) { #width::before { content: "3130"; } }
@media (min-width: 3140px) and (max-width: 3150px) { #width::before { content: "3140"; } }
@media (min-width: 3150px) and (max-width: 3160px) { #width::before { content: "3150"; } }
@media (min-width: 3160px) and (max-width: 3170px) { #width::before { content: "3160"; } }
@media (min-width: 3170px) and (max-width: 3180px) { #width::before { content: "3170"; } }
@media (min-width: 3180px) and (max-width: 3190px) { #width::before { content: "3180"; } }
@media (min-width: 3190px) and (max-width: 3200px) { #width::before { content: "3190"; } }
@media (min-width: 3200px) and (max-width: 3210px) { #width::before { content: "3200"; } }
@media (min-width: 3210px) and (max-width: 3220px) { #width::before { content: "3210"; } }
@media (min-width: 3220px) and (max-width: 3230px) { #width::before { content: "3220"; } }
@media (min-width: 3230px) and (max-width: 3240px) { #width::before { content: "3230"; } }
@media (min-width: 3240px) and (max-width: 3250px) { #width::before { content: "3240"; } }
@media (min-width: 3250px) and (max-width: 3260px) { #width::before { content: "3250"; } }
@media (min-width: 3260px) and (max-width: 3270px) { #width::before { content: "3260"; } }
@media (min-width: 3270px) and (max-width: 3280px) { #width::before { content: "3270"; } }
@media (min-width: 3280px) and (max-width: 3290px) { #width::before { content: "3280"; } }
@media (min-width: 3290px) and (max-width: 3300px) { #width::before { content: "3290"; } }
@media (min-width: 3300px) and (max-width: 3310px) { #width::before { content: "3300"; } }
@media (min-width: 3310px) and (max-width: 3320px) { #width::before { content: "3310"; } }
@media (min-width: 3320px) and (max-width: 3330px) { #width::before { content: "3320"; } }
@media (min-width: 3330px) and (max-width: 3340px) { #width::before { content: "3330"; } }
@media (min-width: 3340px) and (max-width: 3350px) { #width::before { content: "3340"; } }
@media (min-width: 3350px) and (max-width: 3360px) { #width::before { content: "3350"; } }
@media (min-width: 3360px) and (max-width: 3370px) { #width::before { content: "3360"; } }
@media (min-width: 3370px) and (max-width: 3380px) { #width::before { content: "3370"; } }
@media (min-width: 3380px) and (max-width: 3390px) { #width::before { content: "3380"; } }
@media (min-width: 3390px) and (max-width: 3400px) { #width::before { content: "3390"; } }
@media (min-width: 3400px) and (max-width: 3410px) { #width::before { content: "3400"; } }
@media (min-width: 3410px) and (max-width: 3420px) { #width::before { content: "3410"; } }
@media (min-width: 3420px) and (max-width: 3430px) { #width::before { content: "3420"; } }
@media (min-width: 3430px) and (max-width: 3440px) { #width::before { content: "3430"; } }
@media (min-width: 3440px) and (max-width: 3450px) { #width::before { content: "3440"; } }
@media (min-width: 3450px) and (max-width: 3460px) { #width::before { content: "3450"; } }
@media (min-width: 3460px) and (max-width: 3470px) { #width::before { content: "3460"; } }
@media (min-width: 3470px) and (max-width: 3480px) { #width::before { content: "3470"; } }
@media (min-width: 3480px) and (max-width: 3490px) { #width::before { content: "3480"; } }
@media (min-width: 3490px) and (max-width: 3500px) { #width::before { content: "3490"; } }
@media (min-width: 3500px) and (max-width: 3510px) { #width::before { content: "3500"; } }
@media (min-width: 3510px) and (max-width: 3520px) { #width::before { content: "3510"; } }
@media (min-width: 3520px) and (max-width: 3530px) { #width::before { content: "3520"; } }
@media (min-width: 3530px) and (max-width: 3540px) { #width::before { content: "3530"; } }
@media (min-width: 3540px) and (max-width: 3550px) { #width::before { content: "3540"; } }
@media (min-width: 3550px) and (max-width: 3560px) { #width::before { content: "3550"; } }
@media (min-width: 3560px) and (max-width: 3570px) { #width::before { content: "3560"; } }
@media (min-width: 3570px) and (max-width: 3580px) { #width::before { content: "3570"; } }
@media (min-width: 3580px) and (max-width: 3590px) { #width::before { content: "3580"; } }
@media (min-width: 3590px) and (max-width: 3600px) { #width::before { content: "3590"; } }
@media (min-width: 3600px) and (max-width: 3610px) { #width::before { content: "3600"; } }
@media (min-width: 3610px) and (max-width: 3620px) { #width::before { content: "3610"; } }
@media (min-width: 3620px) and (max-width: 3630px) { #width::before { content: "3620"; } }
@media (min-width: 3630px) and (max-width: 3640px) { #width::before { content: "3630"; } }
@media (min-width: 3640px) and (max-width: 3650px) { #width::before { content: "3640"; } }
@media (min-width: 3650px) and (max-width: 3660px) { #width::before { content: "3650"; } }
@media (min-width: 3660px) and (max-width: 3670px) { #width::before { content: "3660"; } }
@media (min-width: 3670px) and (max-width: 3680px) { #width::before { content: "3670"; } }
@media (min-width: 3680px) and (max-width: 3690px) { #width::before { content: "3680"; } }
@media (min-width: 3690px) and (max-width: 3700px) { #width::before { content: "3690"; } }
@media (min-width: 3700px) and (max-width: 3710px) { #width::before { content: "3700"; } }
@media (min-width: 3710px) and (max-width: 3720px) { #width::before { content: "3710"; } }
@media (min-width: 3720px) and (max-width: 3730px) { #width::before { content: "3720"; } }
@media (min-width: 3730px) and (max-width: 3740px) { #width::before { content: "3730"; } }
@media (min-width: 3740px) and (max-width: 3750px) { #width::before { content: "3740"; } }
@media (min-width: 3750px) and (max-width: 3760px) { #width::before { content: "3750"; } }
@media (min-width: 3760px) and (max-width: 3770px) { #width::before { content: "3760"; } }
@media (min-width: 3770px) and (max-width: 3780px) { #width::before { content: "3770"; } }
@media (min-width: 3780px) and (max-width: 3790px) { #width::before { content: "3780"; } }
@media (min-width: 3790px) and (max-width: 3800px) { #width::before { content: "3790"; } }
@media (min-width: 3800px) and (max-width: 3810px) { #width::before { content: "3800"; } }
@media (min-width: 3810px) and (max-width: 3820px) { #width::before { content: "3810"; } }
@media (min-width: 3820px) and (max-width: 3830px) { #width::before { content: "3820"; } }
@media (min-width: 3830px) and (max-width: 3840px) { #width::before { content: "3830"; } }
@media (min-width: 3840px) { #width::before { content: "3840"; } }
</style>
<style>
@media (min-height: 10px) and (max-height: 20px) { #height::before { content: "10"; } }
@media (min-height: 20px) and (max-height: 30px) { #height::before { content: "20"; } }
@media (min-height: 30px) and (max-height: 40px) { #height::before { content: "30"; } }
@media (min-height: 40px) and (max-height: 50px) { #height::before { content: "40"; } }
@media (min-height: 50px) and (max-height: 60px) { #height::before { content: "50"; } }
@media (min-height: 60px) and (max-height: 70px) { #height::before { content: "60"; } }
@media (min-height: 70px) and (max-height: 80px) { #height::before { content: "70"; } }
@media (min-height: 80px) and (max-height: 90px) { #height::before { content: "80"; } }
@media (min-height: 90px) and (max-height: 100px) { #height::before { content: "90"; } }
@media (min-height: 100px) and (max-height: 110px) { #height::before { content: "100"; } }
@media (min-height: 110px) and (max-height: 120px) { #height::before { content: "110"; } }
@media (min-height: 120px) and (max-height: 130px) { #height::before { content: "120"; } }
@media (min-height: 130px) and (max-height: 140px) { #height::before { content: "130"; } }
@media (min-height: 140px) and (max-height: 150px) { #height::before { content: "140"; } }
@media (min-height: 150px) and (max-height: 160px) { #height::before { content: "150"; } }
@media (min-height: 160px) and (max-height: 170px) { #height::before { content: "160"; } }
@media (min-height: 170px) and (max-height: 180px) { #height::before { content: "170"; } }
@media (min-height: 180px) and (max-height: 190px) { #height::before { content: "180"; } }
@media (min-height: 190px) and (max-height: 200px) { #height::before { content: "190"; } }
@media (min-height: 200px) and (max-height: 210px) { #height::before { content: "200"; } }
@media (min-height: 210px) and (max-height: 220px) { #height::before { content: "210"; } }
@media (min-height: 220px) and (max-height: 230px) { #height::before { content: "220"; } }
@media (min-height: 230px) and (max-height: 240px) { #height::before { content: "230"; } }
@media (min-height: 240px) and (max-height: 250px) { #height::before { content: "240"; } }
@media (min-height: 250px) and (max-height: 260px) { #height::before { content: "250"; } }
@media (min-height: 260px) and (max-height: 270px) { #height::before { content: "260"; } }
@media (min-height: 270px) and (max-height: 280px) { #height::before { content: "270"; } }
@media (min-height: 280px) and (max-height: 290px) { #height::before { content: "280"; } }
@media (min-height: 290px) and (max-height: 300px) { #height::before { content: "290"; } }
@media (min-height: 300px) and (max-height: 310px) { #height::before { content: "300"; } }
@media (min-height: 310px) and (max-height: 320px) { #height::before { content: "310"; } }
@media (min-height: 320px) and (max-height: 330px) { #height::before { content: "320"; } }
@media (min-height: 330px) and (max-height: 340px) { #height::before { content: "330"; } }
@media (min-height: 340px) and (max-height: 350px) { #height::before { content: "340"; } }
@media (min-height: 350px) and (max-height: 360px) { #height::before { content: "350"; } }
@media (min-height: 360px) and (max-height: 370px) { #height::before { content: "360"; } }
@media (min-height: 370px) and (max-height: 380px) { #height::before { content: "370"; } }
@media (min-height: 380px) and (max-height: 390px) { #height::before { content: "380"; } }
@media (min-height: 390px) and (max-height: 400px) { #height::before { content: "390"; } }
@media (min-height: 400px) and (max-height: 410px) { #height::before { content: "400"; } }
@media (min-height: 410px) and (max-height: 420px) { #height::before { content: "410"; } }
@media (min-height: 420px) and (max-height: 430px) { #height::before { content: "420"; } }
@media (min-height: 430px) and (max-height: 440px) { #height::before { content: "430"; } }
@media (min-height: 440px) and (max-height: 450px) { #height::before { content: "440"; } }
@media (min-height: 450px) and (max-height: 460px) { #height::before { content: "450"; } }
@media (min-height: 460px) and (max-height: 470px) { #height::before { content: "460"; } }
@media (min-height: 470px) and (max-height: 480px) { #height::before { content: "470"; } }
@media (min-height: 480px) and (max-height: 490px) { #height::before { content: "480"; } }
@media (min-height: 490px) and (max-height: 500px) { #height::before { content: "490"; } }
@media (min-height: 500px) and (max-height: 510px) { #height::before { content: "500"; } }
@media (min-height: 510px) and (max-height: 520px) { #height::before { content: "510"; } }
@media (min-height: 520px) and (max-height: 530px) { #height::before { content: "520"; } }
@media (min-height: 530px) and (max-height: 540px) { #height::before { content: "530"; } }
@media (min-height: 540px) and (max-height: 550px) { #height::before { content: "540"; } }
@media (min-height: 550px) and (max-height: 560px) { #height::before { content: "550"; } }
@media (min-height: 560px) and (max-height: 570px) { #height::before { content: "560"; } }
@media (min-height: 570px) and (max-height: 580px) { #height::before { content: "570"; } }
@media (min-height: 580px) and (max-height: 590px) { #height::before { content: "580"; } }
@media (min-height: 590px) and (max-height: 600px) { #height::before { content: "590"; } }
@media (min-height: 600px) and (max-height: 610px) { #height::before { content: "600"; } }
@media (min-height: 610px) and (max-height: 620px) { #height::before { content: "610"; } }
@media (min-height: 620px) and (max-height: 630px) { #height::before { content: "620"; } }
@media (min-height: 630px) and (max-height: 640px) { #height::before { content: "630"; } }
@media (min-height: 640px) and (max-height: 650px) { #height::before { content: "640"; } }
@media (min-height: 650px) and (max-height: 660px) { #height::before { content: "650"; } }
@media (min-height: 660px) and (max-height: 670px) { #height::before { content: "660"; } }
@media (min-height: 670px) and (max-height: 680px) { #height::before { content: "670"; } }
@media (min-height: 680px) and (max-height: 690px) { #height::before { content: "680"; } }
@media (min-height: 690px) and (max-height: 700px) { #height::before { content: "690"; } }
@media (min-height: 700px) and (max-height: 710px) { #height::before { content: "700"; } }
@media (min-height: 710px) and (max-height: 720px) { #height::before { content: "710"; } }
@media (min-height: 720px) and (max-height: 730px) { #height::before { content: "720"; } }
@media (min-height: 730px) and (max-height: 740px) { #height::before { content: "730"; } }
@media (min-height: 740px) and (max-height: 750px) { #height::before { content: "740"; } }
@media (min-height: 750px) and (max-height: 760px) { #height::before { content: "750"; } }
@media (min-height: 760px) and (max-height: 770px) { #height::before { content: "760"; } }
@media (min-height: 770px) and (max-height: 780px) { #height::before { content: "770"; } }
@media (min-height: 780px) and (max-height: 790px) { #height::before { content: "780"; } }
@media (min-height: 790px) and (max-height: 800px) { #height::before { content: "790"; } }
@media (min-height: 800px) and (max-height: 810px) { #height::before { content: "800"; } }
@media (min-height: 810px) and (max-height: 820px) { #height::before { content: "810"; } }
@media (min-height: 820px) and (max-height: 830px) { #height::before { content: "820"; } }
@media (min-height: 830px) and (max-height: 840px) { #height::before { content: "830"; } }
@media (min-height: 840px) and (max-height: 850px) { #height::before { content: "840"; } }
@media (min-height: 850px) and (max-height: 860px) { #height::before { content: "850"; } }
@media (min-height: 860px) and (max-height: 870px) { #height::before { content: "860"; } }
@media (min-height: 870px) and (max-height: 880px) { #height::before { content: "870"; } }
@media (min-height: 880px) and (max-height: 890px) { #height::before { content: "880"; } }
@media (min-height: 890px) and (max-height: 900px) { #height::before { content: "890"; } }
@media (min-height: 900px) and (max-height: 910px) { #height::before { content: "900"; } }
@media (min-height: 910px) and (max-height: 920px) { #height::before { content: "910"; } }
@media (min-height: 920px) and (max-height: 930px) { #height::before { content: "920"; } }
@media (min-height: 930px) and (max-height: 940px) { #height::before { content: "930"; } }
@media (min-height: 940px) and (max-height: 950px) { #height::before { content: "940"; } }
@media (min-height: 950px) and (max-height: 960px) { #height::before { content: "950"; } }
@media (min-height: 960px) and (max-height: 970px) { #height::before { content: "960"; } }
@media (min-height: 970px) and (max-height: 980px) { #height::before { content: "970"; } }
@media (min-height: 980px) and (max-height: 990px) { #height::before { content: "980"; } }
@media (min-height: 990px) and (max-height: 1000px) { #height::before { content: "990"; } }
@media (min-height: 1000px) and (max-height: 1010px) { #height::before { content: "1000"; } }
@media (min-height: 1010px) and (max-height: 1020px) { #height::before { content: "1010"; } }
@media (min-height: 1020px) and (max-height: 1030px) { #height::before { content: "1020"; } }
@media (min-height: 1030px) and (max-height: 1040px) { #height::before { content: "1030"; } }
@media (min-height: 1040px) and (max-height: 1050px) { #height::before { content: "1040"; } }
@media (min-height: 1050px) and (max-height: 1060px) { #height::before { content: "1050"; } }
@media (min-height: 1060px) and (max-height: 1070px) { #height::before { content: "1060"; } }
@media (min-height: 1070px) and (max-height: 1080px) { #height::before { content: "1070"; } }
@media (min-height: 1080px) and (max-height: 1090px) { #height::before { content: "1080"; } }
@media (min-height: 1090px) and (max-height: 1100px) { #height::before { content: "1090"; } }
@media (min-height: 1100px) and (max-height: 1110px) { #height::before { content: "1100"; } }
@media (min-height: 1110px) and (max-height: 1120px) { #height::before { content: "1110"; } }
@media (min-height: 1120px) and (max-height: 1130px) { #height::before { content: "1120"; } }
@media (min-height: 1130px) and (max-height: 1140px) { #height::before { content: "1130"; } }
@media (min-height: 1140px) and (max-height: 1150px) { #height::before { content: "1140"; } }
@media (min-height: 1150px) and (max-height: 1160px) { #height::before { content: "1150"; } }
@media (min-height: 1160px) and (max-height: 1170px) { #height::before { content: "1160"; } }
@media (min-height: 1170px) and (max-height: 1180px) { #height::before { content: "1170"; } }
@media (min-height: 1180px) and (max-height: 1190px) { #height::before { content: "1180"; } }
@media (min-height: 1190px) and (max-height: 1200px) { #height::before { content: "1190"; } }
@media (min-height: 1200px) and (max-height: 1210px) { #height::before { content: "1200"; } }
@media (min-height: 1210px) and (max-height: 1220px) { #height::before { content: "1210"; } }
@media (min-height: 1220px) and (max-height: 1230px) { #height::before { content: "1220"; } }
@media (min-height: 1230px) and (max-height: 1240px) { #height::before { content: "1230"; } }
@media (min-height: 1240px) and (max-height: 1250px) { #height::before { content: "1240"; } }
@media (min-height: 1250px) and (max-height: 1260px) { #height::before { content: "1250"; } }
@media (min-height: 1260px) and (max-height: 1270px) { #height::before { content: "1260"; } }
@media (min-height: 1270px) and (max-height: 1280px) { #height::before { content: "1270"; } }
@media (min-height: 1280px) and (max-height: 1290px) { #height::before { content: "1280"; } }
@media (min-height: 1290px) and (max-height: 1300px) { #height::before { content: "1290"; } }
@media (min-height: 1300px) and (max-height: 1310px) { #height::before { content: "1300"; } }
@media (min-height: 1310px) and (max-height: 1320px) { #height::before { content: "1310"; } }
@media (min-height: 1320px) and (max-height: 1330px) { #height::before { content: "1320"; } }
@media (min-height: 1330px) and (max-height: 1340px) { #height::before { content: "1330"; } }
@media (min-height: 1340px) and (max-height: 1350px) { #height::before { content: "1340"; } }
@media (min-height: 1350px) and (max-height: 1360px) { #height::before { content: "1350"; } }
@media (min-height: 1360px) and (max-height: 1370px) { #height::before { content: "1360"; } }
@media (min-height: 1370px) and (max-height: 1380px) { #height::before { content: "1370"; } }
@media (min-height: 1380px) and (max-height: 1390px) { #height::before { content: "1380"; } }
@media (min-height: 1390px) and (max-height: 1400px) { #height::before { content: "1390"; } }
@media (min-height: 1400px) and (max-height: 1410px) { #height::before { content: "1400"; } }
@media (min-height: 1410px) and (max-height: 1420px) { #height::before { content: "1410"; } }
@media (min-height: 1420px) and (max-height: 1430px) { #height::before { content: "1420"; } }
@media (min-height: 1430px) and (max-height: 1440px) { #height::before { content: "1430"; } }
@media (min-height: 1440px) and (max-height: 1450px) { #height::before { content: "1440"; } }
@media (min-height: 1450px) and (max-height: 1460px) { #height::before { content: "1450"; } }
@media (min-height: 1460px) and (max-height: 1470px) { #height::before { content: "1460"; } }
@media (min-height: 1470px) and (max-height: 1480px) { #height::before { content: "1470"; } }
@media (min-height: 1480px) and (max-height: 1490px) { #height::before { content: "1480"; } }
@media (min-height: 1490px) and (max-height: 1500px) { #height::before { content: "1490"; } }
@media (min-height: 1500px) and (max-height: 1510px) { #height::before { content: "1500"; } }
@media (min-height: 1510px) and (max-height: 1520px) { #height::before { content: "1510"; } }
@media (min-height: 1520px) and (max-height: 1530px) { #height::before { content: "1520"; } }
@media (min-height: 1530px) and (max-height: 1540px) { #height::before { content: "1530"; } }
@media (min-height: 1540px) and (max-height: 1550px) { #height::before { content: "1540"; } }
@media (min-height: 1550px) and (max-height: 1560px) { #height::before { content: "1550"; } }
@media (min-height: 1560px) and (max-height: 1570px) { #height::before { content: "1560"; } }
@media (min-height: 1570px) and (max-height: 1580px) { #height::before { content: "1570"; } }
@media (min-height: 1580px) and (max-height: 1590px) { #height::before { content: "1580"; } }
@media (min-height: 1590px) and (max-height: 1600px) { #height::before { content: "1590"; } }
@media (min-height: 1600px) and (max-height: 1610px) { #height::before { content: "1600"; } }
@media (min-height: 1610px) and (max-height: 1620px) { #height::before { content: "1610"; } }
@media (min-height: 1620px) and (max-height: 1630px) { #height::before { content: "1620"; } }
@media (min-height: 1630px) and (max-height: 1640px) { #height::before { content: "1630"; } }
@media (min-height: 1640px) and (max-height: 1650px) { #height::before { content: "1640"; } }
@media (min-height: 1650px) and (max-height: 1660px) { #height::before { content: "1650"; } }
@media (min-height: 1660px) and (max-height: 1670px) { #height::before { content: "1660"; } }
@media (min-height: 1670px) and (max-height: 1680px) { #height::before { content: "1670"; } }
@media (min-height: 1680px) and (max-height: 1690px) { #height::before { content: "1680"; } }
@media (min-height: 1690px) and (max-height: 1700px) { #height::before { content: "1690"; } }
@media (min-height: 1700px) and (max-height: 1710px) { #height::before { content: "1700"; } }
@media (min-height: 1710px) and (max-height: 1720px) { #height::before { content: "1710"; } }
@media (min-height: 1720px) and (max-height: 1730px) { #height::before { content: "1720"; } }
@media (min-height: 1730px) and (max-height: 1740px) { #height::before { content: "1730"; } }
@media (min-height: 1740px) and (max-height: 1750px) { #height::before { content: "1740"; } }
@media (min-height: 1750px) and (max-height: 1760px) { #height::before { content: "1750"; } }
@media (min-height: 1760px) and (max-height: 1770px) { #height::before { content: "1760"; } }
@media (min-height: 1770px) and (max-height: 1780px) { #height::before { content: "1770"; } }
@media (min-height: 1780px) and (max-height: 1790px) { #height::before { content: "1780"; } }
@media (min-height: 1790px) and (max-height: 1800px) { #height::before { content: "1790"; } }
@media (min-height: 1800px) and (max-height: 1810px) { #height::before { content: "1800"; } }
@media (min-height: 1810px) and (max-height: 1820px) { #height::before { content: "1810"; } }
@media (min-height: 1820px) and (max-height: 1830px) { #height::before { content: "1820"; } }
@media (min-height: 1830px) and (max-height: 1840px) { #height::before { content: "1830"; } }
@media (min-height: 1840px) and (max-height: 1850px) { #height::before { content: "1840"; } }
@media (min-height: 1850px) and (max-height: 1860px) { #height::before { content: "1850"; } }
@media (min-height: 1860px) and (max-height: 1870px) { #height::before { content: "1860"; } }
@media (min-height: 1870px) and (max-height: 1880px) { #height::before { content: "1870"; } }
@media (min-height: 1880px) and (max-height: 1890px) { #height::before { content: "1880"; } }
@media (min-height: 1890px) and (max-height: 1900px) { #height::before { content: "1890"; } }
@media (min-height: 1900px) and (max-height: 1910px) { #height::before { content: "1900"; } }
@media (min-height: 1910px) and (max-height: 1920px) { #height::before { content: "1910"; } }
@media (min-height: 1920px) and (max-height: 1930px) { #height::before { content: "1920"; } }
@media (min-height: 1930px) and (max-height: 1940px) { #height::before { content: "1930"; } }
@media (min-height: 1940px) and (max-height: 1950px) { #height::before { content: "1940"; } }
@media (min-height: 1950px) and (max-height: 1960px) { #height::before { content: "1950"; } }
@media (min-height: 1960px) and (max-height: 1970px) { #height::before { content: "1960"; } }
@media (min-height: 1970px) and (max-height: 1980px) { #height::before { content: "1970"; } }
@media (min-height: 1980px) and (max-height: 1990px) { #height::before { content: "1980"; } }
@media (min-height: 1990px) and (max-height: 2000px) { #height::before { content: "1990"; } }
@media (min-height: 2000px) and (max-height: 2010px) { #height::before { content: "2000"; } }
@media (min-height: 2010px) and (max-height: 2020px) { #height::before { content: "2010"; } }
@media (min-height: 2020px) and (max-height: 2030px) { #height::before { content: "2020"; } }
@media (min-height: 2030px) and (max-height: 2040px) { #height::before { content: "2030"; } }
@media (min-height: 2040px) and (max-height: 2050px) { #height::before { content: "2040"; } }
@media (min-height: 2050px) and (max-height: 2060px) { #height::before { content: "2050"; } }
@media (min-height: 2060px) and (max-height: 2070px) { #height::before { content: "2060"; } }
@media (min-height: 2070px) and (max-height: 2080px) { #height::before { content: "2070"; } }
@media (min-height: 2080px) and (max-height: 2090px) { #height::before { content: "2080"; } }
@media (min-height: 2090px) and (max-height: 2100px) { #height::before { content: "2090"; } }
@media (min-height: 2100px) and (max-height: 2110px) { #height::before { content: "2100"; } }
@media (min-height: 2110px) and (max-height: 2120px) { #height::before { content: "2110"; } }
@media (min-height: 2120px) and (max-height: 2130px) { #height::before { content: "2120"; } }
@media (min-height: 2130px) and (max-height: 2140px) { #height::before { content: "2130"; } }
@media (min-height: 2140px) and (max-height: 2150px) { #height::before { content: "2140"; } }
@media (min-height: 2150px) and (max-height: 2160px) { #height::before { content: "2150"; } }
@media (min-height: 2160px) { #height::before { content: "2160"; } }
</style>
<div id="stuff" xmlns="http://www.w3.org/1999/xhtml">
<div class="row" id="size">
<span class="title">Size:</span> <span class="value"><span id="width"></span> x <span id="height"></span></span>
</div>
<div class="row" id="browser">
<span class="title">Browser:</span> <span class="value"><span id="browsername"></span></span>
</div>
</div>
</foreignObject>
</svg>
@Davr1
Copy link
Author

Davr1 commented Apr 23, 2022 •
edited
Loading

working preview (redirects you if directly opened :trollface:) https://raw.githack.com/gist/Davr1/c27496be510b46da4ad2f24d7d4f5742/raw/cssbrowserinfo.svg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment