Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                   <div class="hearts">
<i style="left:-145px; top:-94px; transform:rotate(18deg); color:#0000CD; scale:0.83;">♥</i>
<i style="left:-101px; top:-40px; transform:rotate(-19deg); color:rgb(186, 85, 211); scale:0.70;">♥</i>
<i style="left:-107px; top:42px; transform:rotate(-58deg); color:rgb(255, 160, 122); scale:0.64;">♥</i>
<i style="left:-16px; top:-104px; transform:rotate(122deg); color:MediumOrchid; scale:0.98;">♥</i>
<i style="left:59px; top:10px; transform:rotate(-145deg); color:#CD5C5C; scale:1.05;">♥</i>
<i style="left:131px; top:-27px; transform:rotate(-169deg); color:#FAFAD2; scale:1.15;">♥</i>
<i style="left:-47px; top:-65px; transform:rotate(59deg); color:#4682B4; scale:0.65;">♥</i>
<i style="left:107px; top:-19px; transform:rotate(-164deg); color:#F8F8FF; scale:0.80;">♥</i>
<i style="left:-104px; top:-67px; transform:rotate(6deg); color:rgb(220, 20, 60); scale:1.01;">♥</i>
<i style="left:-48px; top:-77px; transform:rotate(76deg); color:rgb(255, 99, 71); scale:0.77;">♥</i>
<i style="left:-55px; top:-149px; transform:rotate(82deg); color:#DAA520; scale:0.32;">♥</i>
<i style="left:123px; top:-52px; transform:rotate(-177deg); color:#FFFFF0; scale:0.53;">♥</i>
<i style="left:35px; top:-2px; transform:rotate(-144deg); color:LightGoldenRodYellow; scale:0.37;">♥</i>
<i style="left:-36px; top:-69px; transform:rotate(131deg); color:Gray; scale:0.31;">♥</i>
<i style="left:-13px; top:-54px; transform:rotate(-169deg); color:rgb(123, 104, 238); scale:1.17;">♥</i>
<i style="left:-36px; top:-37px; transform:rotate(-109deg); color:Magenta; scale:0.67;">♥</i>
<i style="left:-44px; top:-58px; transform:rotate(-90deg); color:#CD853F; scale:0.78;">♥</i>
<i style="left:81px; top:6px; transform:rotate(-151deg); color:rgb(240, 255, 255); scale:0.65;">♥</i>
<i style="left:-122px; top:-186px; transform:rotate(58deg); color:#D2B48C; scale:0.89;">♥</i>
<i style="left:-55px; top:-27px; transform:rotate(-71deg); color:#BA55D3; scale:0.94;">♥</i>
<i style="left:31px; top:58px; transform:rotate(-122deg); color:#0000FF; scale:0.79;">♥</i>
<i style="left:51px; top:5px; transform:rotate(-145deg); color:rgb(240, 255, 240); scale:0.81;">♥</i>
<i style="left:-24px; top:-78px; transform:rotate(138deg); color:rgb(230, 230, 250); scale:0.57;">♥</i>
<i style="left:-103px; top:-213px; transform:rotate(68deg); color:rgb(154, 205, 50); scale:0.59;">♥</i>
<i style="left:59px; top:68px; transform:rotate(-128deg); color:#B22222; scale:1.17;">♥</i>
<i style="left:15px; top:-145px; transform:rotate(125deg); color:Chocolate; scale:0.91;">♥</i>
<i style="left:-178px; top:-71px; transform:rotate(4deg); color:rgb(160, 82, 45); scale:0.62;">♥</i>
<i style="left:-64px; top:-50px; transform:rotate(-26deg); color:#66CDAA; scale:0.51;">♥</i>
<i style="left:-23px; top:-25px; transform:rotate(-120deg); color:Fuchsia; scale:1.14;">♥</i>
<i style="left:-42px; top:-12px; transform:rotate(-92deg); color:rgb(255, 0, 255); scale:1.00;">♥</i>
<i style="left:116px; top:37px; transform:rotate(-148deg); color:Orchid; scale:1.19;">♥</i>
<i style="left:136px; top:-107px; transform:rotate(165deg); color:#ADFF2F; scale:0.62;">♥</i>
<i style="left:93px; top:51px; transform:rotate(-140deg); color:#FF1493; scale:0.35;">♥</i>
<i style="left:29px; top:-117px; transform:rotate(142deg); color:rgb(255, 99, 71); scale:1.18;">♥</i>
<i style="left:-122px; top:120px; transform:rotate(-66deg); color:#6B8E23; scale:0.24;">♥</i>
<i style="left:-39px; top:-26px; transform:rotate(-98deg); color:Olive; scale:0.87;">♥</i>
<i style="left:-13px; top:-53px; transform:rotate(-167deg); color:#7FFF00; scale:0.97;">♥</i>
<i style="left:-207px; top:-121px; transform:rotate(20deg); color:#4682B4; scale:0.80;">♥</i>
<i style="left:-105px; top:-84px; transform:rotate(21deg); color:#E0FFFF; scale:0.89;">♥</i>
<i style="left:-173px; top:-44px; transform:rotate(-7deg); color:AntiqueWhite; scale:0.86;">♥</i>
<i style="left:-58px; top:-160px; transform:rotate(82deg); color:#6B8E23; scale:1.15;">♥</i>
<i style="left:-183px; top:62px; transform:rotate(-41deg); color:#FDF5E6; scale:0.25;">♥</i>
<i style="left:-114px; top:-140px; transform:rotate(48deg); color:PowderBlue; scale:0.74;">♥</i>
<i style="left:-17px; top:-62px; transform:rotate(175deg); color:#FFA500; scale:0.87;">♥</i>
<i style="left:36px; top:68px; transform:rotate(-122deg); color:rgb(255, 228, 225); scale:0.73;">♥</i>
<i style="left:-57px; top:-71px; transform:rotate(40deg); color:#808080; scale:0.25;">♥</i>
<i style="left:-71px; top:-112px; transform:rotate(62deg); color:#00BFFF; scale:0.37;">♥</i>
<i style="left:-63px; top:-85px; transform:rotate(52deg); color:Gainsboro; scale:0.35;">♥</i>
<i style="left:-236px; top:-29px; transform:rotate(-9deg); color:#6A5ACD; scale:1.08;">♥</i>
<i style="left:4px; top:-140px; transform:rotate(121deg); color:rgb(184, 134, 11); scale:0.21;">♥</i>
<i style="left:-21px; top:-37px; transform:rotate(-135deg); color:rgb(192, 192, 192); scale:1.02;">♥</i>
<i style="left:2px; top:-45px; transform:rotate(-162deg); color:BlueViolet; scale:0.91;">♥</i>
<i style="left:19px; top:-140px; transform:rotate(128deg); color:Cyan; scale:1.05;">♥</i>
<i style="left:-17px; top:-61px; transform:rotate(177deg); color:rgb(85, 107, 47); scale:0.59;">♥</i>
<i style="left:-71px; top:-13px; transform:rotate(-60deg); color:#696969; scale:0.24;">♥</i>
<i style="left:-31px; top:-21px; transform:rotate(-108deg); color:#2F4F4F; scale:1.11;">♥</i>
<i style="left:-173px; top:-178px; transform:rotate(42deg); color:GoldenRod; scale:0.90;">♥</i>
<i style="left:-113px; top:-78px; transform:rotate(14deg); color:#FFFAF0; scale:0.54;">♥</i>
<i style="left:-44px; top:-61px; transform:rotate(90deg); color:Beige; scale:0.63;">♥</i>
<i style="left:-48px; top:-66px; transform:rotate(56deg); color:White; scale:0.93;">♥</i>
<i style="left:30px; top:-111px; transform:rotate(145deg); color:rgb(128, 0, 128); scale:0.93;">♥</i>
<i style="left:-32px; top:-57px; transform:rotate(-165deg); color:rgb(75, 0, 130); scale:0.74;">♥</i>
<i style="left:7px; top:-164px; transform:rotate(116deg); color:#9932CC; scale:0.99;">♥</i>
<i style="left:-25px; top:-66px; transform:rotate(162deg); color:LightCoral; scale:0.34;">♥</i>
<i style="left:-101px; top:-71px; transform:rotate(10deg); color:Aqua; scale:1.17;">♥</i>
<i style="left:72px; top:-124px; transform:rotate(151deg); color:rgb(199, 21, 133); scale:1.11;">♥</i>
<i style="left:-110px; top:-38px; transform:rotate(-18deg); color:rgb(0, 128, 128); scale:0.88;">♥</i>
<i style="left:42px; top:79px; transform:rotate(-121deg); color:#FF00FF; scale:0.92;">♥</i>
<i style="left:-8px; top:-40px; transform:rotate(-150deg); color:rgb(218, 165, 32); scale:0.94;">♥</i>
<i style="left:56px; top:-128px; transform:rotate(146deg); color:Cornsilk; scale:0.52;">♥</i>
<i style="left:-47px; top:59px; transform:rotate(-88deg); color:rgb(189, 183, 107); scale:0.44;">♥</i>
<i style="left:20px; top:-242px; transform:rotate(109deg); color:Linen; scale:1.03;">♥</i>
<i style="left:-22px; top:-56px; transform:rotate(-169deg); color:Maroon; scale:0.89;">♥</i>
<i style="left:-51px; top:-62px; transform:rotate(15deg); color:Aqua; scale:0.71;">♥</i>
<i style="left:82px; top:2px; transform:rotate(-153deg); color:rgb(255, 250, 250); scale:0.82;">♥</i>
<i style="left:-36px; top:-37px; transform:rotate(-109deg); color:LightCoral; scale:0.39;">♥</i>
<i style="left:-120px; top:-103px; transform:rotate(29deg); color:rgb(95, 158, 160); scale:0.37;">♥</i>
<i style="left:-34px; top:-50px; transform:rotate(-135deg); color:FireBrick; scale:0.35;">♥</i>
<i style="left:121px; top:18px; transform:rotate(-154deg); color:#4169E1; scale:0.64;">♥</i>
<i style="left:-56px; top:-109px; transform:rotate(76deg); color:#FAF0E6; scale:0.20;">♥</i>
<i style="left:-54px; top:54px; transform:rotate(-85deg); color:rgb(147, 112, 219); scale:0.29;">♥</i>
<i style="left:-44px; top:-55px; transform:rotate(-90deg); color:rgb(102, 51, 153); scale:0.43;">♥</i>
<i style="left:-69px; top:101px; transform:rotate(-81deg); color:rgb(176, 196, 222); scale:0.78;">♥</i>
<i style="left:-198px; top:31px; transform:rotate(-30deg); color:MediumAquaMarine; scale:0.73;">♥</i>
<i style="left:-187px; top:-131px; transform:rotate(26deg); color:rgb(70, 130, 180); scale:0.73;">♥</i>
<i style="left:-44px; top:-59px; transform:rotate(-90deg); color:#E0FFFF; scale:0.90;">♥</i>
<i style="left:-39px; top:86px; transform:rotate(-91deg); color:Lime; scale:0.59;">♥</i>
<i style="left:-138px; top:-60px; transform:rotate(0deg); color:rgb(154, 205, 50); scale:0.71;">♥</i>
<i style="left:27px; top:62px; transform:rotate(-120deg); color:rgb(211, 211, 211); scale:0.39;">♥</i>
<i style="left:-11px; top:4px; transform:rotate(-116deg); color:Orchid; scale:0.59;">♥</i>
<i style="left:-33px; top:-82px; transform:rotate(116deg); color:rgb(250, 250, 210); scale:0.73;">♥</i>
<i style="left:-115px; top:-45px; transform:rotate(-11deg); color:#F5DEB3; scale:0.41;">♥</i>
<i style="left:-41px; top:-136px; transform:rotate(92deg); color:rgb(255, 0, 255); scale:0.30;">♥</i>
<i style="left:102px; top:-178px; transform:rotate(141deg); color:rgb(25, 25, 112); scale:0.82;">♥</i>
<i style="left:-67px; top:-33px; transform:rotate(-49deg); color:Blue; scale:0.48;">♥</i>
<i style="left:-36px; top:-104px; transform:rotate(100deg); color:rgb(0, 0, 255); scale:0.33;">♥</i>
<i style="left:-16px; top:82px; transform:rotate(-101deg); color:FloralWhite; scale:1.08;">♥</i>
<i style="left:-125px; top:66px; transform:rotate(-57deg); color:DarkCyan; scale:1.15;">♥</i>
<i style="left:113px; top:-108px; transform:rotate(163deg); color:#F8F8FF; scale:1.19;">♥</i>
<i style="left:-63px; top:-225px; transform:rotate(83deg); color:#A52A2A; scale:0.46;">♥</i>
<i style="left:-77px; top:-58px; transform:rotate(-3deg); color:#DB7093; scale:0.86;">♥</i>
<i style="left:-131px; top:-60px; transform:rotate(0deg); color:PaleVioletRed; scale:0.60;">♥</i>
<i style="left:-89px; top:98px; transform:rotate(-74deg); color:Sienna; scale:0.88;">♥</i>
<i style="left:2px; top:-22px; transform:rotate(-140deg); color:PaleTurquoise; scale:0.54;">♥</i>
<i style="left:-111px; top:71px; transform:rotate(-63deg); color:#F0FFF0; scale:0.29;">♥</i>
<i style="left:-49px; top:-72px; transform:rotate(67deg); color:#FFFFF0; scale:0.96;">♥</i>
<i style="left:-64px; top:-172px; transform:rotate(79deg); color:PowderBlue; scale:0.57;">♥</i>
<i style="left:37px; top:26px; transform:rotate(-133deg); color:CornflowerBlue; scale:1.10;">♥</i>
<i style="left:44px; top:-65px; transform:rotate(176deg); color:rgb(224, 255, 255); scale:0.73;">♥</i>
<i style="left:-43px; top:-55px; transform:rotate(-101deg); color:OldLace; scale:0.59;">♥</i>
<i style="left:-28px; top:6px; transform:rotate(-103deg); color:rgb(219, 112, 147); scale:0.87;">♥</i>
<i style="left:-207px; top:-92px; transform:rotate(11deg); color:#B8860B; scale:1.18;">♥</i>
<i style="left:82px; top:-8px; transform:rotate(-157deg); color:rgb(250, 250, 210); scale:0.88;">♥</i>
<i style="left:89px; top:76px; transform:rotate(-134deg); color:#778899; scale:0.59;">♥</i>
<i style="left:8px; top:-40px; transform:rotate(-159deg); color:DarkOliveGreen; scale:0.27;">♥</i>
<i style="left:-43px; top:-216px; transform:rotate(90deg); color:#00FF00; scale:0.92;">♥</i>
<i style="left:117px; top:16px; transform:rotate(-154deg); color:rgb(245, 222, 179); scale:0.25;">♥</i>
<i style="left:-99px; top:-120px; transform:rotate(47deg); color:rgb(224, 255, 255); scale:0.53;">♥</i>
<i style="left:54px; top:46px; transform:rotate(-132deg); color:rgb(224, 255, 255); scale:0.57;">♥</i>
<i style="left:-93px; top:35px; transform:rotate(-62deg); color:rgb(255, 0, 255); scale:0.54;">♥</i>
<i style="left:121px; top:-74px; transform:rotate(175deg); color:DarkCyan; scale:1.04;">♥</i>
<i style="left:-83px; top:-226px; transform:rotate(76deg); color:#F08080; scale:0.45;">♥</i>
<i style="left:-165px; top:-169px; transform:rotate(42deg); color:rgb(255, 160, 122); scale:0.45;">♥</i>
<i style="left:119px; top:-124px; transform:rotate(158deg); color:#6495ED; scale:1.07;">♥</i>
<i style="left:145px; top:-12px; transform:rotate(-165deg); color:YellowGreen; scale:0.75;">♥</i>
<i style="left:82px; top:-90px; transform:rotate(166deg); color:rgb(211, 211, 211); scale:0.66;">♥</i>
<i style="left:-64px; top:-85px; transform:rotate(51deg); color:GreenYellow; scale:0.37;">♥</i>
<i style="left:15px; top:-83px; transform:rotate(159deg); color:Turquoise; scale:0.48;">♥</i>
<i style="left:-44px; top:-47px; transform:rotate(-90deg); color:rgb(255, 240, 245); scale:0.53;">♥</i>
<i style="left:42px; top:23px; transform:rotate(-136deg); color:DimGray; scale:0.21;">♥</i>
<i style="left:-122px; top:-209px; transform:rotate(62deg); color:#ADD8E6; scale:0.53;">♥</i>
<i style="left:79px; top:-26px; transform:rotate(-164deg); color:rgb(220, 220, 220); scale:1.06;">♥</i>
<i style="left:-57px; top:-6px; transform:rotate(-76deg); color:FireBrick; scale:0.93;">♥</i>
<i style="left:49px; top:-56px; transform:rotate(-177deg); color:#F08080; scale:0.25;">♥</i>
<i style="left:-136px; top:-76px; transform:rotate(9deg); color:#FFE4C4; scale:1.14;">♥</i>
<i style="left:149px; top:-85px; transform:rotate(172deg); color:rgb(70, 130, 180); scale:0.87;">♥</i>
<i style="left:-101px; top:-161px; transform:rotate(60deg); color:rgb(47, 79, 79); scale:0.97;">♥</i>
<i style="left:-44px; top:-60px; transform:rotate(-180deg); color:Chocolate; scale:0.69;">♥</i>
<i style="left:-20px; top:-63px; transform:rotate(172deg); color:rgb(218, 165, 32); scale:0.46;">♥</i>
<i style="left:-84px; top:-208px; transform:rotate(74deg); color:rgb(255, 255, 240); scale:0.37;">♥</i>
<i style="left:-122px; top:-116px; transform:rotate(35deg); color:rgb(255, 69, 0); scale:0.44;">♥</i>
<i style="left:-194px; top:-184px; transform:rotate(39deg); color:#FF0000; scale:0.78;">♥</i>
<i style="left:-27px; top:-43px; transform:rotate(-135deg); color:#87CEEB; scale:0.67;">♥</i>
<i style="left:-80px; top:114px; transform:rotate(-78deg); color:#556B2F; scale:0.83;">♥</i>
<i style="left:-33px; top:-223px; transform:rotate(93deg); color:DarkOrchid; scale:0.71;">♥</i>
<i style="left:85px; top:-27px; transform:rotate(-165deg); color:Gainsboro; scale:0.42;">♥</i>
<i style="left:100px; top:-35px; transform:rotate(-170deg); color:MediumVioletRed; scale:0.96;">♥</i>
<i style="left:-54px; top:-42px; transform:rotate(-60deg); color:DarkTurquoise; scale:0.60;">♥</i>
<i style="left:-5px; top:-42px; transform:rotate(-155deg); color:MediumSeaGreen; scale:1.07;">♥</i>
<i style="left:-200px; top:-49px; transform:rotate(-4deg); color:#B8860B; scale:0.78;">♥</i>
<i style="left:-182px; top:-179px; transform:rotate(40deg); color:rgb(245, 255, 250); scale:0.64;">♥</i>
<i style="left:-158px; top:-179px; transform:rotate(46deg); color:MediumSlateBlue; scale:1.17;">♥</i>
<i style="left:-110px; top:-129px; transform:rotate(46deg); color:#FFF8DC; scale:0.65;">♥</i>
<i style="left:-133px; top:-92px; transform:rotate(19deg); color:Indigo; scale:0.57;">♥</i>
<i style="left:-116px; top:-20px; transform:rotate(-29deg); color:#7FFF00; scale:1.07;">♥</i>
<i style="left:-43px; top:-61px; transform:rotate(135deg); color:rgb(148, 0, 211); scale:0.91;">♥</i>
<i style="left:-49px; top:-51px; transform:rotate(-60deg); color:rgb(75, 0, 130); scale:0.56;">♥</i>
<i style="left:-32px; top:-180px; transform:rotate(95deg); color:rgb(0, 191, 255); scale:0.66;">♥</i>
<i style="left:-126px; top:-102px; transform:rotate(27deg); color:AliceBlue; scale:1.09;">♥</i>
<i style="left:85px; top:-184px; transform:rotate(136deg); color:rgb(211, 211, 211); scale:0.81;">♥</i>
<i style="left:-154px; top:-145px; transform:rotate(37deg); color:RoyalBlue; scale:0.95;">♥</i>
<i style="left:-128px; top:-27px; transform:rotate(-21deg); color:#7FFF00; scale:0.29;">♥</i>
<i style="left:-69px; top:-72px; transform:rotate(25deg); color:#FF0000; scale:0.93;">♥</i>
<i style="left:8px; top:-214px; transform:rotate(108deg); color:GhostWhite; scale:1.13;">♥</i>
<i style="left:-71px; top:-47px; transform:rotate(-25deg); color:rgb(255, 182, 193); scale:1.07;">♥</i>
<i style="left:-137px; top:-90px; transform:rotate(17deg); color:Plum; scale:0.59;">♥</i>
<i style="left:-49px; top:-51px; transform:rotate(-60deg); color:rgb(255, 105, 180); scale:0.37;">♥</i>
<i style="left:18px; top:-19px; transform:rotate(-146deg); color:LightSeaGreen; scale:0.77;">♥</i>
<i style="left:-197px; top:-140px; transform:rotate(27deg); color:#9ACD32; scale:0.38;">♥</i>
<i style="left:-132px; top:10px; transform:rotate(-38deg); color:DarkKhaki; scale:0.36;">♥</i>
<i style="left:-129px; top:-216px; transform:rotate(61deg); color:MediumSlateBlue; scale:1.04;">♥</i>
<i style="left:-44px; top:-57px; transform:rotate(-90deg); color:rgb(250, 240, 230); scale:0.97;">♥</i>
<i style="left:-44px; top:-59px; transform:rotate(-90deg); color:SeaShell; scale:0.96;">♥</i>
<i style="left:-35px; top:-53px; transform:rotate(-142deg); color:rgb(255, 218, 185); scale:0.35;">♥</i>
<i style="left:-187px; top:25px; transform:rotate(-31deg); color:DeepSkyBlue; scale:0.25;">♥</i>
<i style="left:23px; top:-53px; transform:rotate(-174deg); color:#00FF7F; scale:0.32;">♥</i>
<i style="left:-199px; top:-102px; transform:rotate(15deg); color:rgb(255, 127, 80); scale:0.28;">♥</i>
<i style="left:75px; top:-205px; transform:rotate(129deg); color:rgb(165, 42, 42); scale:0.87;">♥</i>
<i style="left:-62px; top:-52px; transform:rotate(-23deg); color:rgb(245, 255, 250); scale:1.08;">♥</i>
<i style="left:70px; top:-2px; transform:rotate(-153deg); color:Sienna; scale:1.03;">♥</i>
<i style="left:-76px; top:-16px; transform:rotate(-53deg); color:rgb(205, 92, 92); scale:1.16;">♥</i>
<i style="left:-43px; top:-54px; transform:rotate(-99deg); color:#8B0000; scale:0.37;">♥</i>
<i style="left:82px; top:-121px; transform:rotate(154deg); color:Yellow; scale:0.29;">♥</i>
<i style="left:36px; top:-34px; transform:rotate(-162deg); color:PowderBlue; scale:1.06;">♥</i>
<i style="left:-100px; top:-122px; transform:rotate(47deg); color:rgb(218, 112, 214); scale:0.99;">♥</i>
<i style="left:49px; top:16px; transform:rotate(-140deg); color:#B8860B; scale:0.54;">♥</i>
<i style="left:-137px; top:-113px; transform:rotate(29deg); color:DodgerBlue; scale:0.72;">♥</i>
<i style="left:-79px; top:-55px; transform:rotate(-8deg); color:#800000; scale:0.36;">♥</i>
<i style="left:-70px; top:115px; transform:rotate(-81deg); color:rgb(153, 50, 204); scale:1.18;">♥</i>
<i style="left:-23px; top:-97px; transform:rotate(119deg); color:rgb(248, 248, 255); scale:0.28;">♥</i>
<i style="left:38px; top:-149px; transform:rotate(133deg); color:#00BFFF; scale:0.66;">♥</i>
<i style="left:-82px; top:-44px; transform:rotate(-22deg); color:DodgerBlue; scale:0.39;">♥</i>
<i style="left:-100px; top:-173px; transform:rotate(63deg); color:Magenta; scale:0.57;">♥</i>
<i style="left:-58px; top:28px; transform:rotate(-81deg); color:rgb(32, 178, 170); scale:1.18;">♥</i>
<i style="left:-175px; top:-130px; transform:rotate(28deg); color:#98FB98; scale:0.55;">♥</i>
<i style="left:-199px; top:-26px; transform:rotate(-12deg); color:rgb(102, 205, 170); scale:1.13;">♥</i>
<i style="left:-51px; top:-208px; transform:rotate(87deg); color:MediumSeaGreen; scale:0.41;">♥</i>
<i style="left:-4px; top:-56px; transform:rotate(-174deg); color:rgb(255, 228, 181); scale:1.18;">♥</i>
<i style="left:-174px; top:49px; transform:rotate(-40deg); color:#FFDEAD; scale:0.78;">♥</i>
<i style="left:-128px; top:-219px; transform:rotate(62deg); color:rgb(220, 220, 220); scale:1.05;">♥</i>
<i style="left:58px; top:9px; transform:rotate(-145deg); color:rgb(245, 245, 245); scale:0.24;">♥</i>
<i style="left:-68px; top:-181px; transform:rotate(78deg); color:#808080; scale:1.09;">♥</i>
<i style="left:-22px; top:-55px; transform:rotate(-167deg); color:Plum; scale:0.81;">♥</i>
<i style="left:-45px; top:-42px; transform:rotate(-86deg); color:#800000; scale:0.80;">♥</i>
<i style="left:9px; top:-107px; transform:rotate(138deg); color:rgb(153, 50, 204); scale:0.44;">♥</i>
<i style="left:-166px; top:-193px; transform:rotate(47deg); color:LightSteelBlue; scale:1.07;">♥</i>
<i style="left:-207px; top:32px; transform:rotate(-29deg); color:rgb(0, 0, 255); scale:0.49;">♥</i>
<i style="left:66px; top:-62px; transform:rotate(178deg); color:#87CEEB; scale:0.39;">♥</i>
<i style="left:27px; top:-80px; transform:rotate(164deg); color:rgb(139, 0, 139); scale:0.64;">♥</i>
<i style="left:-23px; top:85px; transform:rotate(-98deg); color:#CD5C5C; scale:0.62;">♥</i>
<i style="left:-23px; top:-46px; transform:rotate(-146deg); color:DarkSlateGray; scale:0.68;">♥</i>
<i style="left:-137px; top:-168px; transform:rotate(49deg); color:rgb(65, 105, 225); scale:0.66;">♥</i>
<i style="left:-23px; top:-59px; transform:rotate(-177deg); color:Orange; scale:0.92;">♥</i>
<i style="left:-108px; top:-177px; transform:rotate(61deg); color:rgb(240, 255, 240); scale:0.79;">♥</i>
<i style="left:21px; top:2px; transform:rotate(-136deg); color:#B22222; scale:0.70;">♥</i>
<i style="left:102px; top:-3px; transform:rotate(-158deg); color:rgb(255, 250, 250); scale:1.16;">♥</i>
<i style="left:-172px; top:-37px; transform:rotate(-10deg); color:HotPink; scale:1.17;">♥</i>
<i style="left:-18px; top:-99px; transform:rotate(123deg); color:PaleVioletRed; scale:0.45;">♥</i>
<i style="left:129px; top:-4px; transform:rotate(-162deg); color:#B22222; scale:1.09;">♥</i>
<i style="left:114px; top:-113px; transform:rotate(161deg); color:Salmon; scale:0.57;">♥</i>
<i style="left:103px; top:10px; transform:rotate(-154deg); color:#E0FFFF; scale:0.41;">♥</i>
<i style="left:-175px; top:-111px; transform:rotate(21deg); color:rgb(255, 255, 0); scale:0.51;">♥</i>
<i style="left:-18px; top:-55px; transform:rotate(-169deg); color:rgb(152, 251, 152); scale:0.77;">♥</i>
<i style="left:-4px; top:-36px; transform:rotate(-149deg); color:rgb(245, 255, 250); scale:0.40;">♥</i>
<i style="left:2px; top:-84px; transform:rotate(152deg); color:#778899; scale:0.25;">♥</i>
<i style="left:-98px; top:-151px; transform:rotate(59deg); color:DarkSlateGray; scale:0.23;">♥</i>
<i style="left:-158px; top:-153px; transform:rotate(39deg); color:#7FFFD4; scale:0.93;">♥</i>
<i style="left:74px; top:3px; transform:rotate(-151deg); color:#0000CD; scale:0.39;">♥</i>
<i style="left:26px; top:76px; transform:rotate(-117deg); color:rgb(32, 178, 170); scale:0.84;">♥</i>
<i style="left:-99px; top:-45px; transform:rotate(-15deg); color:Tomato; scale:0.77;">♥</i>
<i style="left:-149px; top:-4px; transform:rotate(-28deg); color:#7B68EE; scale:0.78;">♥</i>
<i style="left:-67px; top:-54px; transform:rotate(-14deg); color:DarkSlateBlue; scale:0.42;">♥</i>
<i style="left:-174px; top:1px; transform:rotate(-25deg); color:#E9967A; scale:0.75;">♥</i>
<i style="left:-49px; top:-52px; transform:rotate(-57deg); color:#40E0D0; scale:0.58;">♥</i>
<i style="left:-88px; top:-92px; transform:rotate(36deg); color:BurlyWood; scale:0.51;">♥</i>
<i style="left:-113px; top:-183px; transform:rotate(60deg); color:Khaki; scale:0.87;">♥</i>
<i style="left:-41px; top:-61px; transform:rotate(161deg); color:#AFEEEE; scale:1.16;">♥</i>
<i style="left:-17px; top:-52px; transform:rotate(-163deg); color:#FDF5E6; scale:0.26;">♥</i>
<i style="left:29px; top:-180px; transform:rotate(121deg); color:SeaGreen; scale:1.14;">♥</i>
<i style="left:89px; top:-156px; transform:rotate(144deg); color:rgb(123, 104, 238); scale:0.95;">♥</i>
<i style="left:-98px; top:-14px; transform:rotate(-40deg); color:SeaGreen; scale:1.17;">♥</i>
<i style="left:-156px; top:18px; transform:rotate(-35deg); color:DarkRed; scale:1.18;">♥</i>
<i style="left:-20px; top:-167px; transform:rotate(102deg); color:#DEB887; scale:0.79;">♥</i>
<i style="left:-33px; top:31px; transform:rotate(-96deg); color:IndianRed ; scale:1.20;">♥</i>
<i style="left:-42px; top:-51px; transform:rotate(-102deg); color:DarkOrange; scale:0.63;">♥</i>
<i style="left:-12px; top:-101px; transform:rotate(127deg); color:#FFEBCD; scale:0.55;">♥</i>
<i style="left:-18px; top:-43px; transform:rotate(-146deg); color:rgb(176, 224, 230); scale:0.57;">♥</i>
<i style="left:-25px; top:-57px; transform:rotate(-171deg); color:rgb(255, 239, 213); scale:0.99;">♥</i>
<i style="left:73px; top:-34px; transform:rotate(-167deg); color:#4B0082; scale:0.32;">♥</i>
<i style="left:-2px; top:-25px; transform:rotate(-140deg); color:BurlyWood; scale:0.90;">♥</i>
<i style="left:-180px; top:-107px; transform:rotate(19deg); color:Linen; scale:1.17;">♥</i>
<i style="left:-32px; top:-44px; transform:rotate(-126deg); color:DarkViolet; scale:0.32;">♥</i>
<i style="left:-47px; top:-238px; transform:rotate(89deg); color:rgb(253, 245, 230); scale:1.13;">♥</i>
<i style="left:-9px; top:94px; transform:rotate(-102deg); color:rgb(240, 255, 240); scale:1.00;">♥</i>
<i style="left:-59px; top:-97px; transform:rotate(67deg); color:Cyan; scale:1.08;">♥</i>
<i style="left:-87px; top:66px; transform:rotate(-71deg); color:rgb(211, 211, 211); scale:0.88;">♥</i>
<i style="left:-215px; top:1px; transform:rotate(-19deg); color:#F0F8FF; scale:1.09;">♥</i>
<i style="left:-169px; top:73px; transform:rotate(-46deg); color:rgb(0, 0, 205); scale:0.20;">♥</i>
<i style="left:-106px; top:-13px; transform:rotate(-37deg); color:#DAA520; scale:0.69;">♥</i>
<i style="left:140px; top:-125px; transform:rotate(160deg); color:SlateBlue; scale:1.19;">♥</i>
<i style="left:-144px; top:4px; transform:rotate(-33deg); color:#6B8E23; scale:1.20;">♥</i>
<i style="left:-44px; top:-103px; transform:rotate(90deg); color:#FF1493; scale:0.53;">♥</i>
<i style="left:-47px; top:-61px; transform:rotate(18deg); color:rgb(192, 192, 192); scale:1.09;">♥</i>
<i style="left:-33px; top:-15px; transform:rotate(-103deg); color:#6A5ACD; scale:0.24;">♥</i>
<i style="left:-55px; top:-63px; transform:rotate(15deg); color:#008080; scale:1.17;">♥</i>
<i style="left:2px; top:-34px; transform:rotate(-150deg); color:GoldenRod; scale:0.60;">♥</i>
<i style="left:-129px; top:-81px; transform:rotate(13deg); color:Tan; scale:0.79;">♥</i>
<i style="left:-123px; top:-144px; transform:rotate(46deg); color:#90EE90; scale:1.07;">♥</i>
<i style="left:-3px; top:28px; transform:rotate(-114deg); color:#40E0D0; scale:1.05;">♥</i>
<i style="left:35px; top:-148px; transform:rotate(132deg); color:#4B0082; scale:0.20;">♥</i>
<i style="left:-107px; top:-79px; transform:rotate(16deg); color:#FFFFFF; scale:0.33;">♥</i>
<i style="left:-36px; top:-85px; transform:rotate(107deg); color:Khaki; scale:0.30;">♥</i>
<i style="left:-108px; top:123px; transform:rotate(-70deg); color:IndianRed ; scale:1.13;">♥</i>
<i style="left:-77px; top:89px; transform:rotate(-77deg); color:#008080; scale:1.10;">♥</i>
<i style="left:-25px; top:-56px; transform:rotate(-168deg); color:rgb(60, 179, 113); scale:1.02;">♥</i>
<i style="left:-90px; top:-207px; transform:rotate(72deg); color:#6B8E23; scale:0.93;">♥</i>
<i style="left:-216px; top:-113px; transform:rotate(17deg); color:Aqua; scale:0.57;">♥</i>
<i style="left:-28px; top:-64px; transform:rotate(165deg); color:#FFDEAD; scale:0.35;">♥</i>
<i style="left:-4px; top:-149px; transform:rotate(114deg); color:#FFFFF0; scale:0.55;">♥</i>
<i style="left:-94px; top:-35px; transform:rotate(-26deg); color:#FFE4E1; scale:0.38;">♥</i>
<i style="left:-46px; top:-56px; transform:rotate(-63deg); color:#FFFFFF; scale:0.26;">♥</i>
<i style="left:-33px; top:-61px; transform:rotate(174deg); color:rgb(240, 248, 255); scale:0.52;">♥</i>
<i style="left:-36px; top:-99px; transform:rotate(101deg); color:Tomato; scale:0.43;">♥</i>
<i style="left:-107px; top:-96px; transform:rotate(29deg); color:#FFF5EE; scale:0.80;">♥</i>
<i style="left:-29px; top:-46px; transform:rotate(-136deg); color:SteelBlue; scale:0.66;">♥</i>
<i style="left:52px; top:6px; transform:rotate(-145deg); color:GoldenRod; scale:0.24;">♥</i>
<i style="left:-55px; top:42px; transform:rotate(-83deg); color:rgb(255, 255, 240); scale:0.99;">♥</i>
<i style="left:37px; top:54px; transform:rotate(-125deg); color:Aqua; scale:0.30;">♥</i>
<i style="left:-45px; top:42px; transform:rotate(-89deg); color:#9400D3; scale:1.12;">♥</i>
<i style="left:75px; top:-101px; transform:rotate(161deg); color:#663399; scale:1.02;">♥</i>
<i style="left:-23px; top:-43px; transform:rotate(-141deg); color:rgb(218, 112, 214); scale:0.80;">♥</i>
<i style="left:-96px; top:-107px; transform:rotate(42deg); color:rgb(255, 215, 0); scale:0.87;">♥</i>
<i style="left:-67px; top:-67px; transform:rotate(16deg); color:SeaGreen; scale:0.52;">♥</i>
<i style="left:104px; top:31px; transform:rotate(-148deg); color:#2E8B57; scale:0.82;">♥</i>
<i style="left:137px; top:-27px; transform:rotate(-169deg); color:Sienna; scale:1.02;">♥</i>
<i style="left:-166px; top:-128px; transform:rotate(29deg); color:rgb(72, 61, 139); scale:0.61;">♥</i>
<i style="left:-98px; top:-24px; transform:rotate(-33deg); color:LightSteelBlue; scale:0.73;">♥</i>
<i style="left:-55px; top:-85px; transform:rotate(66deg); color:MediumSpringGreen; scale:1.07;">♥</i>
<i style="left:12px; top:-43px; transform:rotate(-163deg); color:Chartreuse; scale:0.21;">♥</i>
<i style="left:-57px; top:-30px; transform:rotate(-66deg); color:rgb(0, 191, 255); scale:0.69;">♥</i>
<i style="left:84px; top:42px; transform:rotate(-141deg); color:#FFEBCD; scale:0.61;">♥</i>
<i style="left:-43px; top:-51px; transform:rotate(-96deg); color:Silver; scale:0.88;">♥</i>
<i style="left:5px; top:7px; transform:rotate(-126deg); color:DimGray; scale:0.88;">♥</i>
<i style="left:-44px; top:-69px; transform:rotate(90deg); color:Fuchsia; scale:1.08;">♥</i>
<i style="left:27px; top:-103px; transform:rotate(149deg); color:#006400; scale:0.50;">♥</i>
<i style="left:-76px; top:-235px; transform:rotate(79deg); color:OldLace; scale:0.30;">♥</i>
<i style="left:-25px; top:-59px; transform:rotate(-176deg); color:rgb(64, 224, 208); scale:0.66;">♥</i>
<i style="left:-56px; top:-152px; transform:rotate(82deg); color:rgb(250, 235, 215); scale:0.63;">♥</i>
<i style="left:113px; top:21px; transform:rotate(-152deg); color:rgb(0, 255, 255); scale:0.33;">♥</i>
<i style="left:-122px; top:-99px; transform:rotate(26deg); color:DarkRed; scale:1.15;">♥</i>
<i style="left:-170px; top:12px; transform:rotate(-30deg); color:LightCyan; scale:1.10;">♥</i>
<i style="left:-57px; top:-11px; transform:rotate(-75deg); color:#D2B48C; scale:0.62;">♥</i>
<i style="left:-55px; top:-58px; transform:rotate(-10deg); color:rgb(175, 238, 238); scale:1.04;">♥</i>
<i style="left:-34px; top:-60px; transform:rotate(-180deg); color:rgb(139, 0, 139); scale:0.59;">♥</i>
<i style="left:109px; top:65px; transform:rotate(-140deg); color:rgb(255, 222, 173); scale:1.04;">♥</i>
<i style="left:56px; top:-214px; transform:rotate(123deg); color:#8B4513; scale:0.92;">♥</i>
<i style="left:-102px; top:103px; transform:rotate(-70deg); color:rgb(192, 192, 192); scale:0.32;">♥</i>
<i style="left:-57px; top:89px; transform:rotate(-85deg); color:rgb(100, 149, 237); scale:0.69;">♥</i>
<i style="left:-108px; top:-104px; transform:rotate(34deg); color:rgb(255, 250, 250); scale:0.68;">♥</i>
<i style="left:-30px; top:-42px; transform:rotate(-127deg); color:rgb(105, 105, 105); scale:0.44;">♥</i>
<i style="left:-154px; top:-11px; transform:rotate(-24deg); color:rgb(244, 164, 96); scale:0.86;">♥</i>
<i style="left:-23px; top:42px; transform:rotate(-101deg); color:Azure; scale:0.30;">♥</i>
<i style="left:-43px; top:-85px; transform:rotate(92deg); color:PaleGreen; scale:0.23;">♥</i>
<i style="left:-19px; top:70px; transform:rotate(-100deg); color:SkyBlue; scale:0.54;">♥</i>
<i style="left:-27px; top:68px; transform:rotate(-97deg); color:LightSteelBlue; scale:0.32;">♥</i>
<i style="left:8px; top:-20px; transform:rotate(-142deg); color:rgb(173, 255, 47); scale:0.41;">♥</i>
<i style="left:37px; top:75px; transform:rotate(-121deg); color:#008000; scale:0.90;">♥</i>
<i style="left:-67px; top:-14px; transform:rotate(-63deg); color:rgb(169, 169, 169); scale:0.23;">♥</i>
<i style="left:-87px; top:40px; transform:rotate(-66deg); color:MistyRose; scale:0.67;">♥</i>
<i style="left:64px; top:58px; transform:rotate(-132deg); color:rgb(152, 251, 152); scale:0.41;">♥</i>
<i style="left:92px; top:-62px; transform:rotate(179deg); color:#DAA520; scale:1.17;">♥</i>
<i style="left:-136px; top:50px; transform:rotate(-50deg); color:GreenYellow; scale:0.89;">♥</i>
<i style="left:28px; top:60px; transform:rotate(-121deg); color:Orange; scale:0.26;">♥</i>
<i style="left:-187px; top:73px; transform:rotate(-43deg); color:AntiqueWhite; scale:1.00;">♥</i>
<i style="left:-27px; top:-53px; transform:rotate(-157deg); color:rgb(119, 136, 153); scale:0.68;">♥</i>
<i style="left:-52px; top:-81px; transform:rotate(69deg); color:rgb(173, 255, 47); scale:0.48;">♥</i>
<i style="left:-40px; top:-48px; transform:rotate(-108deg); color:#000000; scale:0.40;">♥</i>
<i style="left:-26px; top:40px; transform:rotate(-100deg); color:rgb(0, 139, 139); scale:0.37;">♥</i>
<i style="left:18px; top:-60px; transform:rotate(-180deg); color:rgb(128, 128, 128); scale:0.40;">♥</i>
<i style="left:49px; top:-38px; transform:rotate(-166deg); color:#66CDAA; scale:0.37;">♥</i>
<i style="left:-22px; top:-50px; transform:rotate(-155deg); color:Beige; scale:0.85;">♥</i>
<i style="left:-51px; top:-152px; transform:rotate(85deg); color:#ADFF2F; scale:0.24;">♥</i>
<i style="left:-18px; top:-236px; transform:rotate(98deg); color:rgb(248, 248, 255); scale:0.76;">♥</i>
<i style="left:12px; top:-71px; transform:rotate(169deg); color:rgb(0, 0, 205); scale:0.58;">♥</i>
<i style="left:-22px; top:-32px; transform:rotate(-128deg); color:rgb(245, 255, 250); scale:0.56;">♥</i>
<i style="left:84px; top:-81px; transform:rotate(170deg); color:#FA8072; scale:0.64;">♥</i>
<i style="left:-53px; top:-13px; transform:rotate(-79deg); color:#CD5C5C; scale:0.87;">♥</i>
<i style="left:-196px; top:-164px; transform:rotate(34deg); color:#1E90FF; scale:0.83;">♥</i>
<i style="left:-71px; top:122px; transform:rotate(-81deg); color:AntiqueWhite; scale:0.88;">♥</i>
<i style="left:-59px; top:-85px; transform:rotate(59deg); color:LightCoral; scale:0.80;">♥</i>
<i style="left:-27px; top:-59px; transform:rotate(-176deg); color:#708090; scale:1.02;">♥</i>
<i style="left:-130px; top:-78px; transform:rotate(11deg); color:rgb(224, 255, 255); scale:0.31;">♥</i>
<i style="left:-15px; top:-78px; transform:rotate(148deg); color:MintCream; scale:0.89;">♥</i>
<i style="left:-123px; top:-175px; transform:rotate(55deg); color:SlateGray; scale:0.54;">♥</i>
<i style="left:142px; top:-113px; transform:rotate(164deg); color:PowderBlue; scale:1.17;">♥</i>
<i style="left:-26px; top:37px; transform:rotate(-100deg); color:ForestGreen; scale:0.30;">♥</i>
<i style="left:-89px; top:-52px; transform:rotate(-10deg); color:Aqua; scale:0.69;">♥</i>
<i style="left:-137px; top:-32px; transform:rotate(-16deg); color:rgb(107, 142, 35); scale:0.91;">♥</i>
<i style="left:22px; top:-197px; transform:rotate(116deg); color:rgb(65, 105, 225); scale:0.97;">♥</i>
<i style="left:-4px; top:118px; transform:rotate(-102deg); color:rgb(0, 0, 139); scale:1.10;">♥</i>
<i style="left:-48px; top:-94px; transform:rotate(83deg); color:#000080; scale:0.22;">♥</i>
<i style="left:-101px; top:-145px; transform:rotate(56deg); color:DarkKhaki; scale:0.83;">♥</i>
<i style="left:-59px; top:-66px; transform:rotate(21deg); color:Yellow; scale:1.19;">♥</i>
<i style="left:43px; top:55px; transform:rotate(-127deg); color:rgb(255, 127, 80); scale:0.21;">♥</i>
<i style="left:96px; top:-127px; transform:rotate(154deg); color:rgb(240, 230, 140); scale:1.13;">♥</i>
<i style="left:-162px; top:-10px; transform:rotate(-22deg); color:#A0522D; scale:0.96;">♥</i>
<i style="left:18px; top:-57px; transform:rotate(-177deg); color:rgb(0, 139, 139); scale:0.66;">♥</i>
<i style="left:-118px; top:95px; transform:rotate(-64deg); color:rgb(107, 142, 35); scale:0.97;">♥</i>
<i style="left:-85px; top:-104px; transform:rotate(47deg); color:#EEE8AA; scale:0.98;">♥</i>
<i style="left:-62px; top:-33px; transform:rotate(-56deg); color:CadetBlue; scale:0.53;">♥</i>
<i style="left:46px; top:-17px; transform:rotate(-154deg); color:#FFFFFF; scale:0.53;">♥</i>
<i style="left:-35px; top:-160px; transform:rotate(95deg); color:rgb(127, 255, 0); scale:0.68;">♥</i>
<i style="left:-221px; top:-129px; transform:rotate(21deg); color:rgb(255, 69, 0); scale:0.74;">♥</i>
<i style="left:-9px; top:-40px; transform:rotate(-150deg); color:CadetBlue; scale:1.00;">♥</i>
<i style="left:-38px; top:-73px; transform:rotate(114deg); color:rgb(255, 250, 240); scale:0.25;">♥</i>
<i style="left:-56px; top:-13px; transform:rotate(-75deg); color:rgb(102, 51, 153); scale:0.65;">♥</i>
<i style="left:-33px; top:-52px; transform:rotate(-143deg); color:#F0FFFF; scale:0.54;">♥</i>
<i style="left:1px; top:7px; transform:rotate(-123deg); color:#D2691E; scale:0.29;">♥</i>
<i style="left:-141px; top:-6px; transform:rotate(-29deg); color:rgb(147, 112, 219); scale:0.69;">♥</i>
<i style="left:-51px; top:-87px; transform:rotate(75deg); color:#FFE4C4; scale:0.26;">♥</i>
<i style="left:-121px; top:50px; transform:rotate(-55deg); color:rgb(250, 128, 114); scale:0.36;">♥</i>
<i style="left:-94px; top:-100px; transform:rotate(38deg); color:rgb(255, 99, 71); scale:0.24;">♥</i>
<i style="left:-78px; top:-184px; transform:rotate(74deg); color:Peru; scale:1.00;">♥</i>
<i style="left:-82px; top:-78px; transform:rotate(25deg); color:rgb(0, 0, 128); scale:1.01;">♥</i>
<i style="left:-56px; top:-40px; transform:rotate(-59deg); color:rgb(124, 252, 0); scale:0.93;">♥</i>
<i style="left:-235px; top:-25px; transform:rotate(-10deg); color:rgb(189, 183, 107); scale:1.10;">♥</i>
<i style="left:-190px; top:9px; transform:rotate(-25deg); color:rgb(102, 51, 153); scale:0.82;">♥</i>
<i style="left:-36px; top:73px; transform:rotate(-93deg); color:#7CFC00; scale:0.81;">♥</i>
<i style="left:10px; top:-112px; transform:rotate(136deg); color:SteelBlue; scale:0.91;">♥</i>
<i style="left:137px; top:14px; transform:rotate(-157deg); color:Lavender; scale:0.89;">♥</i>
<i style="left:-177px; top:-77px; transform:rotate(7deg); color:rgb(128, 0, 128); scale:1.04;">♥</i>
<i style="left:-3px; top:-58px; transform:rotate(-177deg); color:CadetBlue; scale:1.03;">♥</i>
<i style="left:-29px; top:13px; transform:rotate(-101deg); color:Khaki; scale:0.77;">♥</i>
<i style="left:-173px; top:-101px; transform:rotate(17deg); color:rgb(152, 251, 152); scale:0.32;">♥</i>
<i style="left:-41px; top:-51px; transform:rotate(-108deg); color:rgb(211, 211, 211); scale:1.12;">♥</i>
<i style="left:-84px; top:-62px; transform:rotate(2deg); color:#8B4513; scale:0.76;">♥</i>
<i style="left:-26px; top:-61px; transform:rotate(176deg); color:rgb(105, 105, 105); scale:0.74;">♥</i>
<i style="left:-24px; top:-59px; transform:rotate(-177deg); color:#FFDAB9; scale:0.82;">♥</i>
<i style="left:64px; top:-222px; transform:rotate(123deg); color:rgb(169, 169, 169); scale:0.82;">♥</i>
<i style="left:-160px; top:-28px; transform:rotate(-15deg); color:GreenYellow; scale:1.03;">♥</i>
<i style="left:-39px; top:-6px; transform:rotate(-95deg); color:LightYellow; scale:0.96;">♥</i>
<i style="left:-55px; top:81px; transform:rotate(-85deg); color:BlueViolet; scale:0.35;">♥</i>
<i style="left:-111px; top:-41px; transform:rotate(-15deg); color:#40E0D0; scale:0.86;">♥</i>
<i style="left:43px; top:-182px; transform:rotate(125deg); color:rgb(173, 216, 230); scale:1.01;">♥</i>
<i style="left:-131px; top:19px; transform:rotate(-42deg); color:rgb(205, 92, 92); scale:0.84;">♥</i>
<i style="left:141px; top:-123px; transform:rotate(161deg); color:rgb(255, 0, 255); scale:1.18;">♥</i>
<i style="left:-73px; top:-60px; transform:rotate(0deg); color:#808080; scale:1.15;">♥</i>
<i style="left:47px; top:108px; transform:rotate(-118deg); color:Orchid; scale:0.71;">♥</i>
<i style="left:-60px; top:-12px; transform:rotate(-71deg); color:rgb(135, 206, 235); scale:1.04;">♥</i>
<i style="left:-88px; top:-105px; transform:rotate(45deg); color:rgb(0, 255, 255); scale:0.88;">♥</i>
<i style="left:-45px; top:-62px; transform:rotate(63deg); color:#ADD8E6; scale:0.29;">♥</i>
<i style="left:-5px; top:-47px; transform:rotate(-161deg); color:rgb(250, 235, 215); scale:0.51;">♥</i>
<i style="left:-68px; top:-21px; transform:rotate(-58deg); color:#808080; scale:0.29;">♥</i>
<i style="left:59px; top:28px; transform:rotate(-139deg); color:Gold; scale:0.86;">♥</i>
<i style="left:-41px; top:-60px; transform:rotate(-180deg); color:#9ACD32; scale:0.80;">♥</i>
<i style="left:40px; top:42px; transform:rotate(-129deg); color:#DCDCDC; scale:0.41;">♥</i>
<i style="left:-100px; top:-12px; transform:rotate(-40deg); color:Tan; scale:0.92;">♥</i>
<i style="left:-49px; top:-80px; transform:rotate(75deg); color:rgb(250, 235, 215); scale:0.85;">♥</i>
<i style="left:-17px; top:5px; transform:rotate(-112deg); color:MediumVioletRed; scale:0.27;">♥</i>
<i style="left:-104px; top:-207px; transform:rotate(67deg); color:#F0F8FF; scale:0.72;">♥</i>
<i style="left:44px; top:-73px; transform:rotate(171deg); color:Crimson; scale:1.18;">♥</i>
<i style="left:-18px; top:-112px; transform:rotate(116deg); color:#D3D3D3; scale:0.44;">♥</i>
<i style="left:-77px; top:-67px; transform:rotate(11deg); color:rgb(255, 228, 181); scale:1.01;">♥</i>
<i style="left:72px; top:-153px; transform:rotate(141deg); color:LightCyan; scale:0.68;">♥</i>
<i style="left:-20px; top:-45px; transform:rotate(-147deg); color:#DAA520; scale:0.98;">♥</i>
<i style="left:20px; top:49px; transform:rotate(-120deg); color:SkyBlue; scale:1.10;">♥</i>
<i style="left:133px; top:-67px; transform:rotate(177deg); color:Lime; scale:0.62;">♥</i>
<i style="left:-166px; top:-10px; transform:rotate(-22deg); color:rgb(0, 255, 0); scale:0.73;">♥</i>
<i style="left:-56px; top:-55px; transform:rotate(-22deg); color:#FFC0CB; scale:1.09;">♥</i>
<i style="left:-113px; top:-136px; transform:rotate(47deg); color:Bisque; scale:0.96;">♥</i>
<i style="left:34px; top:48px; transform:rotate(-125deg); color:rgb(245, 255, 250); scale:1.07;">♥</i>
<i style="left:-79px; top:-62px; transform:rotate(3deg); color:#E9967A; scale:0.86;">♥</i>
<i style="left:9px; top:-127px; transform:rotate(128deg); color:rgb(34, 139, 34); scale:0.73;">♥</i>
<i style="left:98px; top:-139px; transform:rotate(151deg); color:rgb(152, 251, 152); scale:1.16;">♥</i>
<i style="left:45px; top:-21px; transform:rotate(-156deg); color:#6495ED; scale:0.49;">♥</i>
<i style="left:48px; top:-97px; transform:rotate(158deg); color:#7B68EE; scale:0.84;">♥</i>
<i style="left:-163px; top:-180px; transform:rotate(45deg); color:Tomato; scale:0.70;">♥</i>
<i style="left:-227px; top:-46px; transform:rotate(-4deg); color:SpringGreen; scale:0.65;">♥</i>
<i style="left:83px; top:39px; transform:rotate(-142deg); color:rgb(216, 191, 216); scale:0.41;">♥</i>
<i style="left:-64px; top:-53px; transform:rotate(-19deg); color:LemonChiffon; scale:0.37;">♥</i>
<i style="left:11px; top:-122px; transform:rotate(132deg); color:FloralWhite; scale:0.69;">♥</i>
<i style="left:-68px; top:-104px; transform:rotate(61deg); color:rgb(255, 20, 147); scale:0.60;">♥</i>
<i style="left:-4px; top:-67px; transform:rotate(170deg); color:rgb(60, 179, 113); scale:0.78;">♥</i>
<i style="left:-71px; top:79px; transform:rotate(-79deg); color:#F0E68C; scale:1.12;">♥</i>
<i style="left:54px; top:-57px; transform:rotate(-178deg); color:MediumPurple; scale:0.81;">♥</i>
<i style="left:-22px; top:-48px; transform:rotate(-151deg); color:#E6E6FA; scale:0.71;">♥</i>
<i style="left:-211px; top:9px; transform:rotate(-22deg); color:#20B2AA; scale:0.51;">♥</i>
<i style="left:20px; top:-84px; transform:rotate(159deg); color:rgb(192, 192, 192); scale:0.76;">♥</i>
<i style="left:-195px; top:-59px; transform:rotate(0deg); color:rgb(135, 206, 250); scale:0.61;">♥</i>
<i style="left:-16px; top:-211px; transform:rotate(100deg); color:Turquoise; scale:0.57;">♥</i>
<i style="left:-129px; top:0px; transform:rotate(-35deg); color:SaddleBrown; scale:1.20;">♥</i>
<i style="left:-200px; top:-48px; transform:rotate(-4deg); color:#FA8072; scale:0.91;">♥</i>
<i style="left:103px; top:35px; transform:rotate(-147deg); color:rgb(0, 250, 154); scale:0.39;">♥</i>
<i style="left:-148px; top:23px; transform:rotate(-38deg); color:#E9967A; scale:0.50;">♥</i>
<i style="left:-4px; top:53px; transform:rotate(-109deg); color:rgb(148, 0, 211); scale:0.24;">♥</i>
<i style="left:-43px; top:60px; transform:rotate(-90deg); color:rgb(0, 0, 0); scale:0.71;">♥</i>
<i style="left:-52px; top:62px; transform:rotate(-86deg); color:GoldenRod; scale:0.46;">♥</i>
<i style="left:-43px; top:-145px; transform:rotate(90deg); color:Pink; scale:1.05;">♥</i>
<i style="left:-67px; top:15px; transform:rotate(-73deg); color:rgb(0, 255, 255); scale:0.79;">♥</i>
<i style="left:-225px; top:-88px; transform:rotate(8deg); color:rgb(165, 42, 42); scale:0.30;">♥</i>
<i style="left:-159px; top:-154px; transform:rotate(39deg); color:rgb(245, 255, 250); scale:0.69;">♥</i>
<i style="left:2px; top:-136px; transform:rotate(121deg); color:rgb(30, 144, 255); scale:0.51;">♥</i>
<i style="left:46px; top:-55px; transform:rotate(-176deg); color:LightCoral; scale:0.85;">♥</i>
<i style="left:13px; top:-63px; transform:rotate(177deg); color:#0000FF; scale:0.48;">♥</i>
<i style="left:-201px; top:-65px; transform:rotate(1deg); color:#FA8072; scale:0.39;">♥</i>
<i style="left:-35px; top:-54px; transform:rotate(-146deg); color:DimGray; scale:0.27;">♥</i>
<i style="left:74px; top:2px; transform:rotate(-152deg); color:#98FB98; scale:1.13;">♥</i>
<i style="left:-54px; top:-53px; transform:rotate(-34deg); color:rgb(211, 211, 211); scale:0.43;">♥</i>
<i style="left:91px; top:15px; transform:rotate(-150deg); color:#DCDCDC; scale:0.97;">♥</i>
<i style="left:-21px; top:-27px; transform:rotate(-124deg); color:rgb(245, 255, 250); scale:0.62;">♥</i>
<i style="left:-2px; top:-168px; transform:rotate(111deg); color:LightSkyBlue; scale:0.71;">♥</i>
<i style="left:55px; top:5px; transform:rotate(-146deg); color:rgb(0, 0, 255); scale:0.24;">♥</i>
<i style="left:-48px; top:-79px; transform:rotate(78deg); color:#556B2F; scale:0.87;">♥</i>
<i style="left:3px; top:-150px; transform:rotate(118deg); color:#FAF0E6; scale:0.61;">♥</i>
<i style="left:-101px; top:31px; transform:rotate(-58deg); color:#87CEEB; scale:0.28;">♥</i>
<i style="left:-133px; top:-19px; transform:rotate(-24deg); color:#F5FFFA; scale:1.18;">♥</i>
<i style="left:-8px; top:-3px; transform:rotate(-122deg); color:DarkMagenta; scale:0.82;">♥</i>
<i style="left:23px; top:-34px; transform:rotate(-159deg); color:#FFFFFF; scale:0.56;">♥</i>
<i style="left:-66px; top:-142px; transform:rotate(74deg); color:OliveDrab; scale:0.94;">♥</i>
<i style="left:-46px; top:-21px; transform:rotate(-87deg); color:#F5F5F5; scale:1.11;">♥</i>
<i style="left:-7px; top:36px; transform:rotate(-110deg); color:LightGreen; scale:0.85;">♥</i>
<i style="left:-7px; top:20px; transform:rotate(-114deg); color:DarkGray; scale:1.06;">♥</i>
<i style="left:-15px; top:-154px; transform:rotate(107deg); color:rgb(240, 128, 128); scale:0.73;">♥</i>
<i style="left:-42px; top:-49px; transform:rotate(-100deg); color:LightCyan; scale:0.41;">♥</i>
<i style="left:-6px; top:11px; transform:rotate(-117deg); color:DeepPink; scale:1.07;">♥</i>
<i style="left:-99px; top:-14px; transform:rotate(-39deg); color:LightSlateGray; scale:0.93;">♥</i>
<i style="left:-44px; top:-204px; transform:rotate(90deg); color:#F8F8FF; scale:0.93;">♥</i>
<i style="left:106px; top:-188px; transform:rotate(139deg); color:rgb(169, 169, 169); scale:0.47;">♥</i>
<i style="left:-160px; top:-158px; transform:rotate(40deg); color:Pink; scale:0.61;">♥</i>
<i style="left:-26px; top:-15px; transform:rotate(-111deg); color:rgb(244, 164, 96); scale:0.79;">♥</i>
<i style="left:17px; top:-27px; transform:rotate(-151deg); color:SlateBlue; scale:0.23;">♥</i>
<i style="left:-72px; top:-60px; transform:rotate(0deg); color:rgb(102, 205, 170); scale:0.62;">♥</i>
<i style="left:92px; top:-166px; transform:rotate(142deg); color:#FFEFD5; scale:1.02;">♥</i>
<i style="left:-3px; top:39px; transform:rotate(-112deg); color:rgb(0, 255, 255); scale:1.15;">♥</i>
<i style="left:-10px; top:31px; transform:rotate(-110deg); color:Peru; scale:0.52;">♥</i>
<i style="left:35px; top:-182px; transform:rotate(123deg); color:#00FF7F; scale:0.29;">♥</i>
<i style="left:-32px; top:-112px; transform:rotate(102deg); color:#483D8B; scale:0.71;">♥</i>
<i style="left:-52px; top:-48px; transform:rotate(-56deg); color:Blue; scale:0.68;">♥</i>
<i style="left:50px; top:13px; transform:rotate(-142deg); color:#FF7F50; scale:0.50;">♥</i>
<i style="left:24px; top:-62px; transform:rotate(178deg); color:rgb(0, 206, 209); scale:0.58;">♥</i>

</div>
!

CSS 

              
                        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #222;
            position: relative;
            height: 100vh;
        }
        .hearts {
            background-color: #222;
            position: relative;
            transform: translate(-50%, 100%);
            border: 2px solid #fff;
        }
        .hearts i {
            transform: rotate(0deg);
            -webkit-text-stroke: 2px black;
            font-size: 5vmax;
            position: absolute;
            cursor: none;
            padding: 20px;
            text-align: center;
        }
!

JS 

              
                /* 
  Find all the brown hearts according to this lookup table and report how many there are. 
  For example:
  
{ "amount":12,
    "distribution": {
        "Peru":2,"Chocolate":1,
        "Sienna":2,"Brown":4,
        "BurlyWood":2,
        "SaddleBrown":2
    }
} 
*/
let browndata = [
    {name: "Brown", rgb: '165, 42, 42', hex: 'A52A2A'},
    {name: "BurlyWood", rgb: '222, 184, 135', hex: 'DEB887'},
    {name: "Chocolate", rgb: '210, 105, 30', hex: 'D2691E'},
    {name: "Peru", rgb: '205, 133, 63', hex: 'CD853F'},
    {name: "SaddleBrown", rgb: '139, 69, 19', hex: '8B4513'},
    {name: "RosyBrown", rgb: '188, 143, 143', hex: 'BC8F8F'},
    {name: "Sienna", rgb: '160, 82, 45', hex: 'A0522D' }
];

// your solution here
!
999px

Console