@media screen and (min-width: 1190px) and (max-width: 1199px) {
	body {
		background-color: #FF0000;
	}
	#box-1200 {
		display: block !important;
	}
}

@media screen and (min-width: 1180px) and (max-width: 1189px) {
	body {
		background-color: #FF1400;
	}
	#box-1190 {
		display: block !important;
	}
}

@media screen and (min-width: 1170px) and (max-width: 1179px) {
	body {
		background-color: #FF2800;
	}
	#box-1180 {
		display: block !important;
	}
}

@media screen and (min-width: 1160px) and (max-width: 1169px) {
	body {
		background-color: #FF3C00;
	}
	#box-1170 {
		display: block !important;
	}
}

@media screen and (min-width: 1150px) and (max-width: 1159px) {
	body {
		background-color: #FF5000;
	}
	#box-1160 {
		display: block !important;
	}
}

@media screen and (min-width: 1140px) and (max-width: 1149px) {
	body {
		background-color: #FF6400;
	}
	#box-1150 {
		display: block !important;
	}
}

@media screen and (min-width: 1130px) and (max-width: 1139px) {
	body {
		background-color: #FF7800;
	}
	#box-1140 {
		display: block !important;
	}
}

@media screen and (min-width: 1120px) and (max-width: 1129px) {
	body {
		background-color: #FF8C00;
	}
	#box-1130 {
		display: block !important;
	}
}

@media screen and (min-width: 1110px) and (max-width: 1119px) {
	body {
		background-color: #FFA000;
	}
	#box-1120 {
		display: block !important;
	}
}

@media screen and (min-width: 1100px) and (max-width: 1109px) {
	body {
		background-color: #FFB400;
	}
	#box-1110 {
		display: block !important;
	}
}

@media screen and (min-width: 1090px) and (max-width: 1099px) {
	body {
		background-color: #FFC800;
	}
	#box-1100 {
		display: block !important;
	}
}

@media screen and (min-width: 1080px) and (max-width: 1089px) {
	body {
		background-color: #FFDC00;
	}
	#box-1090 {
		display: block !important;
	}
}

@media screen and (min-width: 1070px) and (max-width: 1079px) {
	body {
		background-color: #FFF000;
	}
	#box-1080 {
		display: block !important;
	}
}

@media screen and (min-width: 1060px) and (max-width: 1069px) {
	body {
		background-color: #FFFF00;
	}
	#box-1070 {
		display: block !important;
	}
}

@media screen and (min-width: 1050px) and (max-width: 1059px) {
	body {
		background-color: #EBFF00;
	}
	#box-1060 {
		display: block !important;
	}
}

@media screen and (min-width: 1040px) and (max-width: 1049px) {
	body {
		background-color: #D7FF00;
	}
	#box-1050 {
		display: block !important;
	}
}

@media screen and (min-width: 1030px) and (max-width: 1039px) {
	body {
		background-color: #C3FF00;
	}
	#box-1040 {
		display: block !important;
	}
}

@media screen and (min-width: 1020px) and (max-width: 1029px) {
	body {
		background-color: #AFFF00;
	}
	#box-1030 {
		display: block !important;
	}
}

@media screen and (min-width: 1010px) and (max-width: 1019px) {
	body {
		background-color: #9BFF00;
	}
	#box-1020 {
		display: block !important;
	}
}

@media screen and (min-width: 1000px) and (max-width: 1009px) {
	body {
		background-color: #87FF00;
	}
	#box-1010 {
		display: block !important;
	}
}

@media screen and (min-width: 990px) and (max-width: 999px) {
	body {
		background-color: #73FF00;
	}
	#box-1000 {
		display: block !important;
	}
}

@media screen and (min-width: 980px) and (max-width: 989px) {
	body {
		background-color: #5FFF00;
	}
	#box-990 {
		display: block !important;
	}
}

@media screen and (min-width: 970px) and (max-width: 979px) {
	body {
		background-color: #4BFF00;
	}
	#box-980 {
		display: block !important;
	}
}

@media screen and (min-width: 960px) and (max-width: 969px) {
	body {
		background-color: #37FF00;
	}
	#box-970 {
		display: block !important;
	}
}

@media screen and (min-width: 950px) and (max-width: 959px) {
	body {
		background-color: #23FF00;
	}
	#box-960 {
		display: block !important;
	}
}

@media screen and (min-width: 940px) and (max-width: 949px) {
	body {
		background-color: #0FFF00;
	}
	#box-950 {
		display: block !important;
	}
}

@media screen and (min-width: 930px) and (max-width: 939px) {
	body {
		background-color: #00FF00;
	}
	#box-940 {
		display: block !important;
	}
}

@media screen and (min-width: 920px) and (max-width: 929px) {
	body {
		background-color: #00FF14;
	}
	#box-930 {
		display: block !important;
	}
}

@media screen and (min-width: 910px) and (max-width: 919px) {
	body {
		background-color: #00FF28;
	}
	#box-920 {
		display: block !important;
	}
}

@media screen and (min-width: 900px) and (max-width: 909px) {
	body {
		background-color: #00FF3C;
	}
	#box-910 {
		display: block !important;
	}
}

@media screen and (min-width: 890px) and (max-width: 899px) {
	body {
		background-color: #00FF50;
	}
	#box-900 {
		display: block !important;
	}
}

@media screen and (min-width: 880px) and (max-width: 889px) {
	body {
		background-color: #00FF64;
	}
	#box-890 {
		display: block !important;
	}
}

@media screen and (min-width: 870px) and (max-width: 879px) {
	body {
		background-color: #00FF78;
	}
	#box-880 {
		display: block !important;
	}
}

@media screen and (min-width: 860px) and (max-width: 869px) {
	body {
		background-color: #00FF8C;
	}
	#box-870 {
		display: block !important;
	}
}

@media screen and (min-width: 850px) and (max-width: 859px) {
	body {
		background-color: #00FFA0;
	}
	#box-860 {
		display: block !important;
	}
}

@media screen and (min-width: 840px) and (max-width: 849px) {
	body {
		background-color: #00FFB4;
	}
	#box-850 {
		display: block !important;
	}
}

@media screen and (min-width: 830px) and (max-width: 839px) {
	body {
		background-color: #00FFC8;
	}
	#box-840 {
		display: block !important;
	}
}

@media screen and (min-width: 820px) and (max-width: 829px) {
	body {
		background-color: #00FFDC;
	}
	#box-830 {
		display: block !important;
	}
}

@media screen and (min-width: 810px) and (max-width: 819px) {
	body {
		background-color: #00FFF0;
	}
	#box-820 {
		display: block !important;
	}
}

@media screen and (min-width: 800px) and (max-width: 809px) {
	body {
		background-color: #00FFFF;
	}
	#box-810 {
		display: block !important;
	}
}

@media screen and (min-width: 790px) and (max-width: 799px) {
	body {
		background-color: #00F0FF;
	}
	#box-800 {
		display: block !important;
	}
}

@media screen and (min-width: 780px) and (max-width: 789px) {
	body {
		background-color: #00DCFF;
	}
	#box-790 {
		display: block !important;
	}
}

@media screen and (min-width: 770px) and (max-width: 779px) {
	body {
		background-color: #00C8FF;
	}
	#box-780 {
		display: block !important;
	}
}

@media screen and (min-width: 760px) and (max-width: 769px) {
	body {
		background-color: #00B4FF;
	}
	#box-770 {
		display: block !important;
	}
}

@media screen and (min-width: 750px) and (max-width: 759px) {
	body {
		background-color: #00A0FF;
	}
	#box-760 {
		display: block !important;
	}
}

@media screen and (min-width: 740px) and (max-width: 749px) {
	body {
		background-color: #008CFF;
	}
	#box-750 {
		display: block !important;
	}
}

@media screen and (min-width: 730px) and (max-width: 739px) {
	body {
		background-color: #0078FF;
	}
	#box-740 {
		display: block !important;
	}
}

@media screen and (min-width: 720px) and (max-width: 729px) {
	body {
		background-color: #0064FF;
	}
	#box-730 {
		display: block !important;
	}
}

@media screen and (min-width: 710px) and (max-width: 719px) {
	body {
		background-color: #0050FF;
	}
	#box-720 {
		display: block !important;
	}
}

@media screen and (min-width: 700px) and (max-width: 709px) {
	body {
		background-color: #003CFF;
	}
	#box-710 {
		display: block !important;
	}
}

@media screen and (min-width: 690px) and (max-width: 699px) {
	body {
		background-color: #0028FF;
	}
	#box-700 {
		display: block !important;
	}
}

@media screen and (min-width: 680px) and (max-width: 689px) {
	body {
		background-color: #0014FF;
	}
	#box-690 {
		display: block !important;
	}
}

@media screen and (min-width: 670px) and (max-width: 679px) {
	body {
		background-color: #0000FF;
	}
	#box-680 {
		display: block !important;
	}
}

@media screen and (min-width: 660px) and (max-width: 669px) {
	body {
		background-color: #0F00FF;
	}
	#box-670 {
		display: block !important;
	}
}

@media screen and (min-width: 650px) and (max-width: 659px) {
	body {
		background-color: #2300FF;
	}
	#box-660 {
		display: block !important;
	}
}

@media screen and (min-width: 640px) and (max-width: 649px) {
	body {
		background-color: #3700FF;
	}
	#box-650 {
		display: block !important;
	}
}

@media screen and (min-width: 630px) and (max-width: 639px) {
	body {
		background-color: #4B00FF;
	}
	#box-640 {
		display: block !important;
	}
}

@media screen and (min-width: 620px) and (max-width: 629px) {
	body {
		background-color: #5F00FF;
	}
	#box-630 {
		display: block !important;
	}
}

@media screen and (min-width: 610px) and (max-width: 619px) {
	body {
		background-color: #7300FF;
	}
	#box-620 {
		display: block !important;
	}
}

@media screen and (min-width: 600px) and (max-width: 609px) {
	body {
		background-color: #8700FF;
	}
	#box-610 {
		display: block !important;
	}
}

@media screen and (min-width: 590px) and (max-width: 599px) {
	body {
		background-color: #9B00FF;
	}
	#box-600 {
		display: block !important;
	}
}

@media screen and (min-width: 580px) and (max-width: 589px) {
	body {
		background-color: #AF00FF;
	}
	#box-590 {
		display: block !important;
	}
}

@media screen and (min-width: 570px) and (max-width: 579px) {
	body {
		background-color: #C300FF;
	}
	#box-580 {
		display: block !important;
	}
}

@media screen and (min-width: 560px) and (max-width: 569px) {
	body {
		background-color: #D700FF;
	}
	#box-570 {
		display: block !important;
	}
}

@media screen and (min-width: 550px) and (max-width: 559px) {
	body {
		background-color: #EB00FF;
	}
	#box-560 {
		display: block !important;
	}
}

@media screen and (min-width: 540px) and (max-width: 549px) {
	body {
		background-color: #FF00FF;
	}
	#box-550 {
		display: block !important;
	}
}

@media screen and (min-width: 530px) and (max-width: 539px) {
	body {
		background-color: #FF00F0;
	}
	#box-540 {
		display: block !important;
	}
}

@media screen and (min-width: 520px) and (max-width: 529px) {
	body {
		background-color: #FF00DC;
	}
	#box-530 {
		display: block !important;
	}
}

@media screen and (min-width: 510px) and (max-width: 519px) {
	body {
		background-color: #FF00C8;
	}
	#box-520 {
		display: block !important;
	}
}

@media screen and (min-width: 500px) and (max-width: 509px) {
	body {
		background-color: #FF00B4;
	}
	#box-510 {
		display: block !important;
	}
}

@media screen and (min-width: 490px) and (max-width: 499px) {
	body {
		background-color: #FF00A0;
	}
	#box-500 {
		display: block !important;
	}
}

@media screen and (min-width: 480px) and (max-width: 489px) {
	body {
		background-color: #FF008C;
	}
	#box-490 {
		display: block !important;
	}
}

@media screen and (min-width: 470px) and (max-width: 479px) {
	body {
		background-color: #FF0078;
	}
	#box-480 {
		display: block !important;
	}
}

@media screen and (min-width: 460px) and (max-width: 469px) {
	body {
		background-color: #FF0064;
	}
	#box-470 {
		display: block !important;
	}
}

@media screen and (min-width: 450px) and (max-width: 459px) {
	body {
		background-color: #FF0050;
	}
	#box-460 {
		display: block !important;
	}
}

@media screen and (min-width: 440px) and (max-width: 449px) {
	body {
		background-color: #FF003C;
	}
	#box-450 {
		display: block !important;
	}
}

@media screen and (min-width: 430px) and (max-width: 439px) {
	body {
		background-color: #FF0028;
	}
	#box-440 {
		display: block !important;
	}
}

@media screen and (min-width: 420px) and (max-width: 429px) {
	body {
		background-color: #FF0014;
	}
	#box-430 {
		display: block !important;
	}
}

@media screen and (min-width: 1200px) {
	body {
		background-color: #FF0000;
	}
	#box-large {
		display: block !important;
	}
}

@media screen and (max-width: 419px) {
	body {
		background-color: #FF0014;
	}
	#box-small {
		display: block !important;
	}
}

body {
	margin: 0;
}

.box:before {
	content: 'Width: ';
}

.box:after {
	content: ' px';
}

.box {
	display: none;
	font-size: 25pt;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-family: 'Consolas', monospace;
	position: absolute;
	height: 50px;
	width: 100%;
	top: 45%;
	margin-top: 25px;
}