@media (min-width: 100px) and (max-width: 110px){section { border-color: hsl(10, 100%, 50%); }} 
@media (min-width: 110px) and (max-width: 120px){section { border-color: hsl(20, 100%, 50%); }} 
@media (min-width: 120px) and (max-width: 130px){section { border-color: hsl(30, 100%, 50%); }} 
@media (min-width: 130px) and (max-width: 140px){section { border-color: hsl(40, 100%, 50%); }} 
@media (min-width: 140px) and (max-width: 150px){section { border-color: hsl(50, 100%, 50%); }} 
@media (min-width: 150px) and (max-width: 160px){section { border-color: hsl(60, 100%, 50%); }} 
@media (min-width: 160px) and (max-width: 170px){section { border-color: hsl(70, 100%, 50%); }} 
@media (min-width: 170px) and (max-width: 180px){section { border-color: hsl(80, 100%, 50%); }} 
@media (min-width: 180px) and (max-width: 190px){section { border-color: hsl(90, 100%, 50%); }} 
@media (min-width: 190px) and (max-width: 200px){section { border-color: hsl(100, 100%, 50%); }} 
@media (min-width: 200px) and (max-width: 210px){section { border-color: hsl(110, 100%, 50%); }} 
@media (min-width: 210px) and (max-width: 220px){section { border-color: hsl(120, 100%, 50%); }} 
@media (min-width: 220px) and (max-width: 230px){section { border-color: hsl(130, 100%, 50%); }} 
@media (min-width: 230px) and (max-width: 240px){section { border-color: hsl(140, 100%, 50%); }} 
@media (min-width: 240px) and (max-width: 250px){section { border-color: hsl(150, 100%, 50%); }} 
@media (min-width: 250px) and (max-width: 260px){section { border-color: hsl(160, 100%, 50%); }} 
@media (min-width: 260px) and (max-width: 270px){section { border-color: hsl(170, 100%, 50%); }} 
@media (min-width: 270px) and (max-width: 280px){section { border-color: hsl(180, 100%, 50%); }} 
@media (min-width: 280px) and (max-width: 290px){section { border-color: hsl(190, 100%, 50%); }} 
@media (min-width: 290px) and (max-width: 300px){section { border-color: hsl(200, 100%, 50%); }} 
@media (min-width: 300px) and (max-width: 310px){section { border-color: hsl(210, 100%, 50%); }} 
@media (min-width: 310px) and (max-width: 320px){section { border-color: hsl(220, 100%, 50%); }} 
@media (min-width: 320px) and (max-width: 330px){section { border-color: hsl(230, 100%, 50%); }} 
@media (min-width: 330px) and (max-width: 340px){section { border-color: hsl(240, 100%, 50%); }} 
@media (min-width: 340px) and (max-width: 350px){section { border-color: hsl(250, 100%, 50%); }} 
@media (min-width: 350px) and (max-width: 360px){section { border-color: hsl(4, 100%, 50%); }} 
@media (min-width: 360px) and (max-width: 370px){section { border-color: hsl(14, 100%, 50%); }} 
@media (min-width: 370px) and (max-width: 380px){section { border-color: hsl(24, 100%, 50%); }} 
@media (min-width: 380px) and (max-width: 390px){section { border-color: hsl(34, 100%, 50%); }} 
@media (min-width: 390px) and (max-width: 400px){section { border-color: hsl(44, 100%, 50%); }} 
@media (min-width: 400px) and (max-width: 410px){section { border-color: hsl(54, 100%, 50%); }} 
@media (min-width: 410px) and (max-width: 420px){section { border-color: hsl(64, 100%, 50%); }} 
@media (min-width: 420px) and (max-width: 430px){section { border-color: hsl(74, 100%, 50%); }} 
@media (min-width: 430px) and (max-width: 440px){section { border-color: hsl(84, 100%, 50%); }} 
@media (min-width: 440px) and (max-width: 450px){section { border-color: hsl(94, 100%, 50%); }} 
@media (min-width: 450px) and (max-width: 460px){section { border-color: hsl(104, 100%, 50%); }} 
@media (min-width: 460px) and (max-width: 470px){section { border-color: hsl(114, 100%, 50%); }} 
@media (min-width: 470px) and (max-width: 480px){section { border-color: hsl(124, 100%, 50%); }} 
@media (min-width: 480px) and (max-width: 490px){section { border-color: hsl(134, 100%, 50%); }} 
@media (min-width: 490px) and (max-width: 500px){section { border-color: hsl(144, 100%, 50%); }} 
@media (min-width: 500px) and (max-width: 510px){section { border-color: hsl(154, 100%, 50%); }} 
@media (min-width: 510px) and (max-width: 520px){section { border-color: hsl(164, 100%, 50%); }} 
@media (min-width: 520px) and (max-width: 530px){section { border-color: hsl(174, 100%, 50%); }} 
@media (min-width: 530px) and (max-width: 540px){section { border-color: hsl(184, 100%, 50%); }} 
@media (min-width: 540px) and (max-width: 550px){section { border-color: hsl(194, 100%, 50%); }} 
@media (min-width: 550px) and (max-width: 560px){section { border-color: hsl(204, 100%, 50%); }} 
@media (min-width: 560px) and (max-width: 570px){section { border-color: hsl(214, 100%, 50%); }} 
@media (min-width: 570px) and (max-width: 580px){section { border-color: hsl(224, 100%, 50%); }} 
@media (min-width: 580px) and (max-width: 590px){section { border-color: hsl(234, 100%, 50%); }} 
@media (min-width: 590px) and (max-width: 600px){section { border-color: hsl(244, 100%, 50%); }} 
@media (min-width: 600px) and (max-width: 610px){section { border-color: hsl(254, 100%, 50%); }} 
@media (min-width: 610px) and (max-width: 620px){section { border-color: hsl(8, 100%, 50%); }} 
@media (min-width: 620px) and (max-width: 630px){section { border-color: hsl(18, 100%, 50%); }} 
@media (min-width: 630px) and (max-width: 640px){section { border-color: hsl(28, 100%, 50%); }} 
@media (min-width: 640px) and (max-width: 650px){section { border-color: hsl(38, 100%, 50%); }} 
@media (min-width: 650px) and (max-width: 660px){section { border-color: hsl(48, 100%, 50%); }} 
@media (min-width: 660px) and (max-width: 670px){section { border-color: hsl(58, 100%, 50%); }} 
@media (min-width: 670px) and (max-width: 680px){section { border-color: hsl(68, 100%, 50%); }} 
@media (min-width: 680px) and (max-width: 690px){section { border-color: hsl(78, 100%, 50%); }} 
@media (min-width: 690px) and (max-width: 700px){section { border-color: hsl(88, 100%, 50%); }} 
@media (min-width: 700px) and (max-width: 710px){section { border-color: hsl(98, 100%, 50%); }} 
@media (min-width: 710px) and (max-width: 720px){section { border-color: hsl(108, 100%, 50%); }} 
@media (min-width: 720px) and (max-width: 730px){section { border-color: hsl(118, 100%, 50%); }} 
@media (min-width: 730px) and (max-width: 740px){section { border-color: hsl(128, 100%, 50%); }} 
@media (min-width: 740px) and (max-width: 750px){section { border-color: hsl(138, 100%, 50%); }} 
@media (min-width: 750px) and (max-width: 760px){section { border-color: hsl(148, 100%, 50%); }} 
@media (min-width: 760px) and (max-width: 770px){section { border-color: hsl(158, 100%, 50%); }} 
@media (min-width: 770px) and (max-width: 780px){section { border-color: hsl(168, 100%, 50%); }} 
@media (min-width: 780px) and (max-width: 790px){section { border-color: hsl(178, 100%, 50%); }} 
@media (min-width: 790px) and (max-width: 800px){section { border-color: hsl(188, 100%, 50%); }} 
@media (min-width: 800px) and (max-width: 810px){section { border-color: hsl(198, 100%, 50%); }} 
@media (min-width: 810px) and (max-width: 820px){section { border-color: hsl(208, 100%, 50%); }} 
@media (min-width: 820px) and (max-width: 830px){section { border-color: hsl(218, 100%, 50%); }} 
@media (min-width: 830px) and (max-width: 840px){section { border-color: hsl(228, 100%, 50%); }} 
@media (min-width: 840px) and (max-width: 850px){section { border-color: hsl(238, 100%, 50%); }} 
@media (min-width: 850px) and (max-width: 860px){section { border-color: hsl(248, 100%, 50%); }} 
@media (min-width: 860px) and (max-width: 870px){section { border-color: hsl(2, 100%, 50%); }} 
@media (min-width: 870px) and (max-width: 880px){section { border-color: hsl(12, 100%, 50%); }} 
@media (min-width: 880px) and (max-width: 890px){section { border-color: hsl(22, 100%, 50%); }} 
@media (min-width: 890px) and (max-width: 900px){section { border-color: hsl(32, 100%, 50%); }} 
@media (min-width: 900px) and (max-width: 910px){section { border-color: hsl(42, 100%, 50%); }} 
@media (min-width: 910px) and (max-width: 920px){section { border-color: hsl(52, 100%, 50%); }} 
@media (min-width: 920px) and (max-width: 930px){section { border-color: hsl(62, 100%, 50%); }} 
@media (min-width: 930px) and (max-width: 940px){section { border-color: hsl(72, 100%, 50%); }} 
@media (min-width: 940px) and (max-width: 950px){section { border-color: hsl(82, 100%, 50%); }} 
@media (min-width: 950px) and (max-width: 960px){section { border-color: hsl(92, 100%, 50%); }} 
@media (min-width: 960px) and (max-width: 970px){section { border-color: hsl(102, 100%, 50%); }} 
@media (min-width: 970px) and (max-width: 980px){section { border-color: hsl(112, 100%, 50%); }} 
@media (min-width: 980px) and (max-width: 990px){section { border-color: hsl(122, 100%, 50%); }} 
@media (min-width: 990px) and (max-width: 1000px){section { border-color: hsl(132, 100%, 50%); }} 
@media (min-width: 1000px) and (max-width: 1010px){section { border-color: hsl(142, 100%, 50%); }} 
@media (min-width: 1010px) and (max-width: 1020px){section { border-color: hsl(152, 100%, 50%); }} 
@media (min-width: 1020px) and (max-width: 1030px){section { border-color: hsl(162, 100%, 50%); }} 
@media (min-width: 1030px) and (max-width: 1040px){section { border-color: hsl(172, 100%, 50%); }} 
@media (min-width: 1040px) and (max-width: 1050px){section { border-color: hsl(182, 100%, 50%); }} 
@media (min-width: 1050px) and (max-width: 1060px){section { border-color: hsl(192, 100%, 50%); }} 
@media (min-width: 1060px) and (max-width: 1070px){section { border-color: hsl(202, 100%, 50%); }} 
@media (min-width: 1070px) and (max-width: 1080px){section { border-color: hsl(212, 100%, 50%); }} 
@media (min-width: 1080px) and (max-width: 1090px){section { border-color: hsl(222, 100%, 50%); }} 
@media (min-width: 1090px) and (max-width: 1100px){section { border-color: hsl(232, 100%, 50%); }} 
@media (min-width: 1100px) and (max-width: 1110px){section { border-color: hsl(242, 100%, 50%); }} 
@media (min-width: 1110px) and (max-width: 1120px){section { border-color: hsl(252, 100%, 50%); }} 
@media (min-width: 1120px) and (max-width: 1130px){section { border-color: hsl(6, 100%, 50%); }} 
@media (min-width: 1130px) and (max-width: 1140px){section { border-color: hsl(16, 100%, 50%); }} 
@media (min-width: 1140px) and (max-width: 1150px){section { border-color: hsl(26, 100%, 50%); }} 
@media (min-width: 1150px) and (max-width: 1160px){section { border-color: hsl(36, 100%, 50%); }} 
@media (min-width: 1160px) and (max-width: 1170px){section { border-color: hsl(46, 100%, 50%); }} 
@media (min-width: 1170px) and (max-width: 1180px){section { border-color: hsl(56, 100%, 50%); }} 
@media (min-width: 1180px) and (max-width: 1190px){section { border-color: hsl(66, 100%, 50%); }} 
@media (min-width: 1190px) and (max-width: 1200px){section { border-color: hsl(76, 100%, 50%); }} 
@media (min-width: 1200px) and (max-width: 1210px){section { border-color: hsl(86, 100%, 50%); }} 
@media (min-width: 1210px) and (max-width: 1220px){section { border-color: hsl(96, 100%, 50%); }} 
@media (min-width: 1220px) and (max-width: 1230px){section { border-color: hsl(106, 100%, 50%); }} 
@media (min-width: 1230px) and (max-width: 1240px){section { border-color: hsl(116, 100%, 50%); }} 
@media (min-width: 1240px) and (max-width: 1250px){section { border-color: hsl(126, 100%, 50%); }} 
@media (min-width: 1250px) and (max-width: 1260px){section { border-color: hsl(136, 100%, 50%); }} 
@media (min-width: 1260px) and (max-width: 1270px){section { border-color: hsl(146, 100%, 50%); }} 
@media (min-width: 1270px) and (max-width: 1280px){section { border-color: hsl(156, 100%, 50%); }} 
@media (min-width: 1280px) and (max-width: 1290px){section { border-color: hsl(166, 100%, 50%); }} 
@media (min-width: 1290px) and (max-width: 1300px){section { border-color: hsl(176, 100%, 50%); }} 
@media (min-width: 1300px) and (max-width: 1310px){section { border-color: hsl(186, 100%, 50%); }} 
@media (min-width: 1310px) and (max-width: 1320px){section { border-color: hsl(196, 100%, 50%); }} 
@media (min-width: 1320px) and (max-width: 1330px){section { border-color: hsl(206, 100%, 50%); }} 
@media (min-width: 1330px) and (max-width: 1340px){section { border-color: hsl(216, 100%, 50%); }} 
@media (min-width: 1340px) and (max-width: 1350px){section { border-color: hsl(226, 100%, 50%); }} 
@media (min-width: 1350px) and (max-width: 1360px){section { border-color: hsl(236, 100%, 50%); }} 
@media (min-width: 1360px) and (max-width: 1370px){section { border-color: hsl(246, 100%, 50%); }} 
@media (min-width: 1370px) and (max-width: 1380px){section { border-color: hsl(0, 100%, 50%); }} 
@media (min-width: 1380px) and (max-width: 1390px){section { border-color: hsl(10, 100%, 50%); }} 
@media (min-width: 1390px) and (max-width: 1400px){section { border-color: hsl(20, 100%, 50%); }} 
@media (min-width: 1400px) and (max-width: 1410px){section { border-color: hsl(30, 100%, 50%); }} 
@media (min-width: 1410px) and (max-width: 1420px){section { border-color: hsl(40, 100%, 50%); }} 
@media (min-width: 1420px) and (max-width: 1430px){section { border-color: hsl(50, 100%, 50%); }} 
@media (min-width: 1430px) and (max-width: 1440px){section { border-color: hsl(60, 100%, 50%); }} 
@media (min-width: 1440px) and (max-width: 1450px){section { border-color: hsl(70, 100%, 50%); }} 
@media (min-width: 1450px) and (max-width: 1460px){section { border-color: hsl(80, 100%, 50%); }} 
@media (min-width: 1460px) and (max-width: 1470px){section { border-color: hsl(90, 100%, 50%); }} 
@media (min-width: 1470px) and (max-width: 1480px){section { border-color: hsl(100, 100%, 50%); }} 
@media (min-width: 1480px) and (max-width: 1490px){section { border-color: hsl(110, 100%, 50%); }} 
@media (min-width: 1490px) and (max-width: 1500px){section { border-color: hsl(120, 100%, 50%); }} 
@media (min-width: 1500px) and (max-width: 1510px){section { border-color: hsl(130, 100%, 50%); }} 
@media (min-width: 1510px) and (max-width: 1520px){section { border-color: hsl(140, 100%, 50%); }} 
@media (min-width: 1520px) and (max-width: 1530px){section { border-color: hsl(150, 100%, 50%); }} 
@media (min-width: 1530px) and (max-width: 1540px){section { border-color: hsl(160, 100%, 50%); }} 
@media (min-width: 1540px) and (max-width: 1550px){section { border-color: hsl(170, 100%, 50%); }} 
@media (min-width: 1550px) and (max-width: 1560px){section { border-color: hsl(180, 100%, 50%); }} 
@media (min-width: 1560px) and (max-width: 1570px){section { border-color: hsl(190, 100%, 50%); }} 
@media (min-width: 1570px) and (max-width: 1580px){section { border-color: hsl(200, 100%, 50%); }} 
@media (min-width: 1580px) and (max-width: 1590px){section { border-color: hsl(210, 100%, 50%); }} 
@media (min-width: 1590px) and (max-width: 1600px){section { border-color: hsl(220, 100%, 50%); }} 
@media (min-width: 1600px) and (max-width: 1610px){section { border-color: hsl(230, 100%, 50%); }} 
@media (min-width: 1610px) and (max-width: 1620px){section { border-color: hsl(240, 100%, 50%); }} 
@media (min-width: 1620px) and (max-width: 1630px){section { border-color: hsl(250, 100%, 50%); }} 
@media (min-width: 1630px) and (max-width: 1640px){section { border-color: hsl(4, 100%, 50%); }} 
@media (min-width: 1640px) and (max-width: 1650px){section { border-color: hsl(14, 100%, 50%); }} 
@media (min-width: 1650px) and (max-width: 1660px){section { border-color: hsl(24, 100%, 50%); }} 
@media (min-width: 1660px) and (max-width: 1670px){section { border-color: hsl(34, 100%, 50%); }} 
@media (min-width: 1670px) and (max-width: 1680px){section { border-color: hsl(44, 100%, 50%); }} 
@media (min-width: 1680px) and (max-width: 1690px){section { border-color: hsl(54, 100%, 50%); }} 
@media (min-width: 1690px) and (max-width: 1700px){section { border-color: hsl(64, 100%, 50%); }} 
@media (min-width: 1700px) and (max-width: 1710px){section { border-color: hsl(74, 100%, 50%); }} 
@media (min-width: 1710px) and (max-width: 1720px){section { border-color: hsl(84, 100%, 50%); }} 
@media (min-width: 1720px) and (max-width: 1730px){section { border-color: hsl(94, 100%, 50%); }} 
@media (min-width: 1730px) and (max-width: 1740px){section { border-color: hsl(104, 100%, 50%); }} 
@media (min-width: 1740px) and (max-width: 1750px){section { border-color: hsl(114, 100%, 50%); }} 
@media (min-width: 1750px) and (max-width: 1760px){section { border-color: hsl(124, 100%, 50%); }} 
@media (min-width: 1760px) and (max-width: 1770px){section { border-color: hsl(134, 100%, 50%); }} 
@media (min-width: 1770px) and (max-width: 1780px){section { border-color: hsl(144, 100%, 50%); }} 
@media (min-width: 1780px) and (max-width: 1790px){section { border-color: hsl(154, 100%, 50%); }} 
@media (min-width: 1790px) and (max-width: 1800px){section { border-color: hsl(164, 100%, 50%); }} 
@media (min-width: 1800px) and (max-width: 1810px){section { border-color: hsl(174, 100%, 50%); }} 
@media (min-width: 1810px) and (max-width: 1820px){section { border-color: hsl(184, 100%, 50%); }} 
@media (min-width: 1820px) and (max-width: 1830px){section { border-color: hsl(194, 100%, 50%); }} 
@media (min-width: 1830px) and (max-width: 1840px){section { border-color: hsl(204, 100%, 50%); }} 
@media (min-width: 1840px) and (max-width: 1850px){section { border-color: hsl(214, 100%, 50%); }} 
@media (min-width: 1850px) and (max-width: 1860px){section { border-color: hsl(224, 100%, 50%); }} 
@media (min-width: 1860px) and (max-width: 1870px){section { border-color: hsl(234, 100%, 50%); }} 
@media (min-width: 1870px) and (max-width: 1880px){section { border-color: hsl(244, 100%, 50%); }} 
@media (min-width: 1880px) and (max-width: 1890px){section { border-color: hsl(254, 100%, 50%); }} 
@media (min-width: 1890px) and (max-width: 1900px){section { border-color: hsl(8, 100%, 50%); }} 
@media (min-width: 1900px) and (max-width: 1910px){section { border-color: hsl(18, 100%, 50%); }} 
@media (min-width: 1910px) and (max-width: 1920px){section { border-color: hsl(28, 100%, 50%); }} 
@media (min-width: 1920px) and (max-width: 1930px){section { border-color: hsl(38, 100%, 50%); }} 
@media (min-width: 1930px) and (max-width: 1940px){section { border-color: hsl(48, 100%, 50%); }} 
@media (min-width: 1940px) and (max-width: 1950px){section { border-color: hsl(58, 100%, 50%); }} 
@media (min-width: 1950px) and (max-width: 1960px){section { border-color: hsl(68, 100%, 50%); }} 
@media (min-width: 1960px) and (max-width: 1970px){section { border-color: hsl(78, 100%, 50%); }} 
@media (min-width: 1970px) and (max-width: 1980px){section { border-color: hsl(88, 100%, 50%); }} 
@media (min-width: 1980px) and (max-width: 1990px){section { border-color: hsl(98, 100%, 50%); }} 
@media (min-width: 1990px) and (max-width: 2000px){section { border-color: hsl(108, 100%, 50%); }} 
@media (min-width: 2000px) and (max-width: 2010px){section { border-color: hsl(118, 100%, 50%); }}