Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

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.

+ 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.

Behavior

Save Automatically?

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 id="card">
  <div id="viewport">

    <!-- Stars -->
    
    <div id="starfield">
      <div id="shooting-star"></div>
      <div class="stars"></div>
      <div class="stars"></div>
      <div class="stars"></div>
      <div class="stars"></div>
      <div class="stars"></div>
    </div>

    <!-- Clouds -->

    <div id="clouds">
      <div class="cloud clouds-far"></div>
      <div class="cloud clouds-far"></div>
      <div class="cloud clouds-middle"></div>
      <div class="cloud clouds-middle"></div>
      <div class="cloud clouds-close"></div>
      <div class="cloud clouds-close"></div>
    </div>

    <!-- Moon -->

    <div id="moon">
      <div class="moon-element"></div>
      <div class="moon-element"></div>
      <div class="moon-element"></div>
      <div class="moon-element"></div>
    </div>

    <!-- Landscape -->

    <svg id="landscape" viewBox="0 0 1300 554" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g fill-rule="nonzero">
          <path d="M1300,459.522675 L816.459275,392.117597 C699.391229,382.511503 557.892531,382.635253 440.893933,392.450175 L-7.85250606e-16,460.391702 L-3.41060513e-13,553.475765 L1300,550.835566 L1300,459.522675 Z"></path>
          <path d="M334.119062,413.142422 C317.103437,410.164688 323.376016,394.579922 325.804609,382.668984 C335.936641,348.475313 315.177578,363.7275 297.055938,372.931406 C297.241562,366.032344 302.47,360.069141 301.85125,353.046328 C307.102891,349.666406 304.736172,343.076719 300.443594,339.975234 C324.512969,348.243281 323.128516,342.666797 337.297891,325.527422 C341.598203,323.856797 349.850781,323.439141 348.659687,316.625156 C347.646484,316.779844 347.252031,317.584219 347.112812,318.504609 C347.050937,317.653828 347.027734,316.393125 346.130547,316.478203 C343.562734,316.710234 344.042266,313.863984 345.736094,313.222031 C347.878516,310.901719 341.226953,310.321641 339.711016,311.675156 C342.077734,309.873047 343.848906,307.475391 342.681016,304.342969 C340.507656,306.578203 335.286953,308.047734 338.125469,311.907188 C332.982109,311.7525 332.518047,318.496875 335.805156,321.142031 C331.489375,327.329531 324.675391,330.833203 319.895547,336.556641 C317.776328,336.958828 315.185312,334.847344 312.934609,334.445156 C304.890859,333.223125 297.64375,325.829063 289.460781,328.744922 C286.939375,319.587422 298.602813,328.226719 296.669219,319.131094 C297.651484,318.636094 297.504531,317.762109 296.669219,317.228438 C297.512266,316.246172 297.311172,315.581016 296.367578,314.861719 C298.687891,310.708359 296.7775,312.858516 294.410781,309.718359 C295.269297,309.432188 296.568672,308.859844 296.181953,307.746094 C296.181953,308.627813 294.67375,309.664219 294.085938,309.068672 C294.859375,307.189219 293.830703,306.075469 292.778828,304.528594 C288.911641,295.796484 276.451563,296.655 271.965625,304.636875 C257.355391,296.9025 253.828516,315.859453 265.198047,322.975078 C266.102969,326.672109 260.255781,323.678906 263.651172,323.199375 C259.304453,320.198438 261.717578,329.804531 266.621172,326.293125 C266.317109,327.12707 265.474894,327.638185 264.594766,327.522891 C266.70625,328.95375 269.529297,326.641172 269.513828,324.328594 C270.118766,325.667473 269.832397,327.240963 268.794531,328.280859 C273.179922,327.917344 272.89375,321.582891 270.093906,319.324453 C271.370078,319.595156 272.607578,321.459141 272.661719,322.882266 C275.361016,318.071484 268.423281,314.374453 265.476484,311.528203 C263.078828,308.890781 266.683047,304.567266 269.629844,306.555 C270.225391,312.7425 272.870547,323.199375 280.945234,322.750781 C282.902031,325.202578 281.881094,328.505156 280.736406,331.088438 C279.560781,333.006563 275.894688,333.153516 273.968828,334.259531 C264.695312,338.296875 261.531953,343.246875 255.653828,349.790156 C245.158281,361.948594 268.531563,362.451328 274.87375,367.633359 C273.280469,373.820859 270.643047,369.953672 274.432891,379.180781 C267.526094,396.382031 285.655469,400.620469 297.179688,407.759297 C290.118203,408.285234 281.710938,415.253906 275.175391,411.959063 C273.798672,409.282969 270.673984,406.405781 268.353672,409.870781 C266.567031,413.003203 264.587031,415.594219 260.959609,416.653828 C259.049219,417.195234 258.445937,419.453672 256.597422,419.91 C255.777578,420.149766 254.741172,420.412734 254.439531,421.317656 C254.601953,424.357266 266.126172,419.840391 269.134844,420.629297 C282.105391,417.713437 295.524531,418.889063 308.758047,418.308984 C313.6075,419.244844 317.312266,417.388594 321.171719,415.215234 C324.520703,416.878125 347.901719,417.589687 334.119062,413.142422 Z M280.643594,364.189297 C280.582747,364.462131 280.449104,364.713378 280.256875,364.916328 C275.956562,359.308906 266.837734,357.058203 260.425937,353.716953 C264.981484,350.422109 269.537031,347.158203 273.574375,343.205938 C276.033906,350.190078 282.600391,356.377578 280.643594,364.204766 L280.643594,364.189297 Z M315.796328,402.350703 L300.018203,389.743672 C300.652422,389.310547 301.309844,388.877422 301.951797,388.428828 C307.087422,384.608047 311.480547,379.882344 316.647109,376.053828 C312.230781,384.530703 317.637109,393.804219 315.796328,402.366172 L315.796328,402.350703 Z"></path>
          <polygon points="346.540469 402.098672 344.034531 402.500859 347.329375 397.272422 340.894375 397.272422 340.894375 411.024141 351.861719 411.024141 351.861719 397.280156 347.731562 403.823438"></polygon>
          <polygon points="360.849063 402.485391 358.343125 402.106406 357.159766 403.846641 353.076016 397.365234 353.076016 411.024141 363.989219 411.024141 363.989219 397.280156 357.554219 397.280156"></polygon>
          <path d="M367.655312,372.336797 C369.264062,367.116094 367.044297,359.551875 366.108437,358.005 C367.763594,357.332109 365.976953,355.483594 365.389141,356.458125 C366.108437,353.588672 364.809062,352.645078 362.248984,351.979922 C360.299922,352.614141 359.062422,353.727891 359.070156,355.847109 C358.505547,354.238359 357.793984,357.548672 357.523281,355.970859 C356.657031,359.675625 353.493672,352.761094 350.894922,355.236094 C348.187891,356.009531 348.806641,358.530937 349.843047,360.402656 C348.767969,361.106484 349.487266,361.547344 350.167891,362.135156 C348.566875,362.398125 350.740234,362.908594 351.335781,363.217969 C348.342578,367.085156 355.55875,369.652969 347.344844,369.498281 C347.344844,370.271719 346.89625,370.271719 346.269766,369.738047 C345.666484,368.253047 348.427656,367.920469 345.032266,367.866328 C346.687422,365.692969 344.127344,367.487344 343.090937,368.129297 C343.941719,365.878594 340.987188,368.554687 341.342969,370.070625 L340.871172,369.080625 C340.352969,373.288125 344.869844,372.824062 342.557266,378.810469 L344.189219,378.207187 C343.748359,379.545234 341.683281,381.741797 344.189219,380.89875 C343.825703,381.935156 342.448984,382.932891 344.150547,383.389219 C342.3175,384.680859 344.467656,385.052109 342.093203,386.993437 C344.506328,386.807813 341.211484,389.205469 342.920781,389.104922 C342.610893,389.633624 342.676452,390.3017 343.083203,390.760078 L339.123203,390.760078 L339.123203,396.220547 L351.714766,396.220547 L351.714766,390.752344 L350.167891,390.752344 C349.680625,389.545781 347.754766,386.885156 349.750234,388.772344 C348.613281,386.297344 351.165625,388.223203 350.075078,385.949297 C351.088281,386.900625 350.848516,386.057578 351.049609,384.889687 C351.676094,385.740469 351.606484,386.792344 352.596484,386.142656 C352.163359,386.916094 351.745703,387.380156 352.83625,387.906094 C351.475,388.927031 352.495937,389.638594 352.302578,390.744609 C352.269798,390.904937 352.217863,391.060742 352.147891,391.208672 L353.253906,391.17 L353.253906,396.205078 L365.845469,396.205078 L365.845469,390.736875 L365.133906,390.736875 C365.257656,390.102656 365.033359,389.135859 364.228984,387.759141 C366.123906,387.867422 364.306328,384.000234 366.549297,384.301875 C365.775859,382.755 365.667578,382.143984 367.531562,383.211328 C365.304062,378.926484 369.248594,381.432422 367.531562,377.317734 C369.341406,377.951953 366.758125,375.770859 369.078437,375.925547 L367.949219,374.200781 C370.478359,374.595234 368.127109,373.280391 367.655312,372.336797 Z M358.497812,390.713672 L358.420469,390.713672 C358.64043,389.701319 358.916719,388.702031 359.248047,387.720469 L357.507812,387.503906 C359.193906,386.730469 358.559687,386.150391 357.569687,385.183594 C359.704375,384.410156 357.005078,383.551641 356.479141,383.087578 C362.597031,382.198125 358.923203,383.977031 360.895469,384.820078 C358.459141,387.202266 359.495547,389.460703 361.150703,390.721406 L358.497812,390.713672 Z"></path>
          <path d="M481.706406,383.942109 C481.505313,383.942109 481.342891,384.065859 481.211406,384.321094 C481.304219,384.352031 481.466641,384.251484 481.706406,383.942109 Z"></path>
          <path d="M499.913125,393.608203 C500.199297,391.991719 497.407188,392.192813 498.868984,390.034922 C499.008203,386.098125 498.095547,381.171328 497.2525,376.840078 C495.450391,369.879141 487.453047,363.738047 488.899375,355.34625 C486.664141,351.850313 490.554531,356.274375 492.356641,353.443594 C490.546797,358.904063 493.578672,351.943125 493.764297,350.287969 C493.819876,351.470173 493.646549,352.651984 493.253828,353.768438 C501.490938,333.659063 502.001406,324.199922 473.453828,311.654766 C456.283516,304.523672 441.650078,313.936406 422.298672,311.608359 C410.882734,313.155234 406.497344,309.713438 404.865391,299.001328 C403.550547,289.921172 403.751641,289.720078 401.160625,285.435234 C404.803516,288.528984 401.531875,285.899297 401.230234,284.793281 C401.759344,285.26733 402.349886,285.667962 402.985937,285.984375 C400.828047,283.57125 399.528672,282.944766 401.810312,282.890625 C400.070078,281.042109 397.749766,279.843281 401.036875,281.34375 C399.211562,278.636719 400.487734,278.396953 397.896719,276.857813 C401.091016,278.188125 395.731094,275.496563 398.987266,274.406016 C397.803906,273.965156 397.231562,274.924219 397.63375,273.562969 C396.581875,274.336406 395.893516,274.66125 396.860312,272.882344 C393.232891,273.3 396.728828,269.533359 394.222891,269.061563 C395.568672,267.692578 392.985391,267.514688 392.985391,267.514688 C393.975391,266.207578 393.557734,266.292656 392.134609,266.130234 C390.982187,265.356797 390.587734,264.359063 389.59,266.021953 C389.760156,264.815391 387.455312,264.753516 386.542656,264.799922 C382.830156,257.978203 376.487969,257.599219 382.010312,265.612031 C380.633594,264.575625 380.084453,265.356797 380.401562,266.230781 C375.900156,266.756719 373.355547,269.649375 372.721328,269.324531 C368.080703,271.273594 370.176719,272.085703 367.701719,273.354141 C369.086172,273.787266 368.250859,274.668984 367.608906,274.901016 C369.155781,276.447891 369.612109,275.968359 369.550234,277.414688 C366.147109,278.474297 364.368203,287.863828 368.405547,286.556719 C369.441953,290.292422 376.008437,288.877031 378.669062,288.706875 C382.466641,290.25375 379.125391,290.516719 380.393828,291.978516 C381.252344,295.018125 382.350625,295.629141 382.845625,297.438984 C381.623594,324.230859 395.220625,353.234766 409.560156,359.925 C413.891406,362.740313 409.993281,368.858203 412.48375,374.566172 C413.930078,378.325078 415.531094,380.436563 413.636172,385.077188 C413.636172,387.528984 414.185312,387.173203 413.783125,389.075859 C414.633906,389.887969 415.012891,390.723281 414.456016,391.334297 C415.724453,391.767422 414.185312,394.335234 414.185312,394.335234 C415.592969,392.943047 415.894609,392.881172 415.090234,394.412578 C417.271328,394.737422 415.314531,395.526328 415.244922,397.243359 C411.176641,399.64875 415.384141,400.182422 417.735391,398.975859 C418.176086,398.744583 418.467878,398.303977 418.508828,397.807969 C418.678984,400.290703 419.112109,399.292969 419.158516,398.001328 C421.942891,403.175625 413.783125,405.967734 425.763672,403.330313 C427.681797,402.324844 426.289609,400.027734 427.008906,398.975859 C429.661797,398.743828 427.588984,391.914375 430.512578,392.177344 C429.592188,390.553125 430.365625,389.083594 430.512578,386.995313 C430.628594,384.675 428.532578,381.944766 430.968906,384.713672 C430.783281,381.774609 430.373359,377.953828 430.512578,377.048906 C431.610859,375.231328 429.043047,372.493359 431.177734,371.263594 C430.210938,371.209453 430.574453,370.490156 431.270547,370.265859 C430.868359,370.002891 429.917031,369.105703 431.108125,368.533359 C431.556719,368.131172 431.053984,367.953281 431.053984,367.953281 C431.827422,368.022891 431.224141,367.458281 431.053984,367.319063 C432.183203,367.620703 430.992109,366.684844 431.053984,366.545625 C432.082656,367.032891 430.976641,361.905 430.118125,361.015547 C432.361094,361.479609 437.326563,364.217578 440.319766,361.53375 C444.241094,362.809922 453.561016,358.130625 457.722109,352.445859 C459.586094,351.749766 457.211641,354.766172 459.268984,354.905391 C459.570625,355.021406 457.590625,356.220234 457.77625,356.560547 C459.957344,358.061016 459.021484,358.107422 459.067891,361.061953 C459.454609,362.415469 460.057891,363.815391 460.475547,363.467344 C462.795859,370.057031 463.96375,371.975156 466.021094,378.023438 C466.608906,380.537109 466.608906,380.018906 467.745859,379.098516 C468.055234,380.026641 466.786797,381.418828 467.312734,382.501641 C467.823203,384.272813 468.302734,386.856094 467.784531,388.867031 C467.653047,389.338828 466.013359,390.599531 466.918281,390.174141 C468.086172,390.506719 463.213516,395.039063 466.415547,393.082266 C467.103906,396.361641 468.155781,393.554063 464.969219,397.769297 C465.464219,399.818906 477.599453,399.014531 478.635859,395.696484 C480.507578,394.312031 478.56625,391.875703 479.734141,393.059063 C480.662266,394.776094 480.67,391.458047 481.281016,390.290156 C480.461172,390.027188 484.243281,379.330547 482.951641,384.195469 C482.417969,385.456172 483.028984,384.837422 483.431172,384.141328 C484.297422,383.197734 482.77375,387.304688 482.951641,387.196406 C483.169804,386.743162 483.513388,386.361998 483.941641,386.098125 C482.65,392.169609 489.162344,400.460859 484.575859,402.966797 C478.991641,404.985469 489.595469,405.472734 491.126875,405.232969 C496.285703,405.279375 494.313438,395.951719 499.441328,397.885313 C499.35625,397.111875 496.695625,394.551797 497.028203,394.428047 C497.5,394.737422 498.977266,395.000391 498.257969,394.621406 C495.597344,392.602734 498.853516,394.528594 499.913125,393.608203 Z"></path>
          <path d="M1007.75219,299.110547 C1009.15984,291.306562 1010.55977,282.868359 1008.52563,274.917422 C1007.75219,272.991562 1005.37773,271.421484 1006.66164,269.193984 C1008.74992,258.744844 1011.71219,257.886328 1003.44414,249.564141 C1004.58109,239.447578 992.10555,233.229141 984.64961,240.004453 C980.38023,242.564531 980.00898,249.904453 979.69188,255.063281 C979.06539,269.696719 988.84938,258.829922 985.46945,268.590703 C966.798672,269.990625 971.671328,288.336562 956.798125,293.696484 C951.384063,297.15375 947.7025,300.781172 941.105078,302.892656 C938.552734,303.820781 934.70875,301.384453 932.821563,303.859453 C929.1556,304.910141 926.161716,307.562841 924.677266,311.075625 L924.607656,312.204844 C924.63741,313.055538 924.801874,313.896133 925.094922,314.695312 L847.124688,347.063672 C846.012948,347.047346 844.902795,347.153692 843.814375,347.380781 C841.842109,347.798437 840.364844,348.324375 838.508594,348.772969 C835.21375,349.546406 825.715938,354.666562 823.906094,354.357187 C821.933828,354.790312 820.665391,357.621094 821.268672,353.343984 C819.195859,352.570547 818.290938,354.248906 816.457891,354.07875 C816.65125,348.873516 811.152109,354.689766 810.486953,357.226641 C800.231172,358.889531 804.175703,361.093828 797.671094,364.295859 C796.441328,364.040625 795.722031,365.425078 794.453594,364.906875 C793.780703,364.852734 793.13875,366.5775 792.349844,366.136641 C791.994063,366.538828 791.963125,367.103437 791.576406,366.770859 C786.719219,371.488828 798.537344,375.000234 802.450938,372.115312 C801.561484,373.662187 798.382656,374.435625 796.619219,375.448828 C796.541875,375.448828 795.304375,376.013437 795.234766,376.059844 C794.938029,376.271606 794.661037,376.509763 794.407188,376.771406 C794.244766,376.9725 793.865781,377.544844 793.803906,377.676328 C793.663056,377.901024 793.565958,378.150324 793.517734,378.411094 C793.918561,378.269999 794.283608,377.853175 794.608281,377.405625 C794.816947,377.196494 795.044825,377.007458 795.288906,376.841016 C795.404922,377.328281 795.691094,377.892891 796.557344,378.588984 C797.485469,383.175469 804.075156,375.881953 807.934609,376.454297 C810.030625,376.454297 811.801797,374.195859 813.5575,376.075312 C822.374688,377.312812 825.31375,377.235469 832.313359,377.390156 C835.948516,378.256406 847.851719,376.523906 844.317109,382.804219 C842.406719,386.462578 841.517266,390.693281 839.011328,393.972656 L838.160547,394.684219 C828.879297,397.491797 837.549531,399.324844 841.254297,397.917187 C841.7725,396.107344 843.845313,393.763828 845.624219,392.704219 C847.235892,389.755928 849.007118,386.897702 850.93,384.142266 C851.510078,383.129062 853.250313,381.528047 853.845859,383.438437 C855.150741,383.51249 856.391683,384.027958 857.365,384.900234 C858.594766,387.429375 856.792656,390.538594 857.365,393.284297 C857.581563,397.105078 855.818125,398.976797 853.126563,401.521406 C854.673438,403.679297 858.625703,403.292578 860.133906,402.526875 C861.557031,401.908125 861.557031,399.146953 862.539297,397.607812 C862.199851,395.383876 862.132322,393.126893 862.338203,390.886641 C862.338203,390.399375 864.295,385.959844 864.782266,384.938906 C865.648516,383.175469 864.325938,380.460703 866.847344,380.043047 C868.169922,379.733672 870.064844,376.098516 871.758672,376.879687 C874.225938,377.421094 882.277422,368.077969 884.419844,371.937422 C884.559063,373.13625 886.268359,372.401484 886.314766,373.538437 C887.258359,374.938359 887.211953,376.539375 888.024063,377.954766 C890.251563,379.834219 890.692422,383.067187 893.786172,383.593125 C899.733906,385.913437 899.354922,390.097734 902.897266,394.127344 C909.649375,398.288437 903.1525,398.914922 905.697109,401.258437 C896.415859,402.874922 903.546953,406.6725 908.071563,404.104687 C912.147578,394.630078 909.796328,401.498203 917.569375,400.531406 C920.446563,398.984531 918.412422,395.999062 916.997031,393.918516 C914.808203,392.789297 913.292266,393.616875 913.477891,390.244687 C916.819141,392.943984 921.080781,394.367109 923.014375,398.481797 C925.667266,400.384453 925.071719,402.039609 925.876094,403.895859 C927.129063,404.576484 925.876094,406.989609 926.695938,408.242578 C926.695938,409.224844 927.740078,409.743047 927.469375,410.779453 C928.753281,411.088828 930.083594,410.176172 930.725547,411.413672 C930.787422,410.299922 932.140938,408.961875 931.12,407.863594 C930.926641,406.316719 929.573125,404.421797 929.665938,403.060547 C930.238281,402.008672 928.822891,399.912656 929.240547,398.319375 C929.023984,388.775156 920.168125,390.322031 918.62125,383.245078 C916.502031,381.141328 917.020234,379.161328 917.453359,376.415625 C916.416953,375.178125 916.370547,372.765 916.989297,371.249062 C917.700859,368.534297 915.759531,365.974219 916.471094,363.390937 C911.892344,351.147422 898.047813,342.887109 884.907109,346.90125 C881.859766,348.772969 879.423438,347.094609 877.884297,347.388516 C872.779609,348.401719 864.070703,347.388516 860.783594,348.935391 C858.215781,348.742031 855.369531,348.076875 852.422734,347.597344 C855.516484,346.522266 858.811328,345.277031 862.183516,343.792031 C879.261016,336.367031 917.963828,321.772266 926.278281,316.721719 C928.119063,319.977891 931.630469,319.405547 935.157344,317.054297 C935.118672,316.172578 935.930781,316.280859 936.348438,315.894141 C936.093203,313.1175 939.496328,314.463281 940.64875,313.194844 C941.213359,312.777187 942.969063,312.421406 942.373516,311.276719 C949.404063,304.424062 962.351406,305.537812 969.443828,298.213359 C967.896953,308.608359 966.187656,319.212187 962.660781,329.011641 C958.662109,347.929922 965.174453,368.356406 962.003359,386.833828 C961.330469,389.355234 962.003359,402.658359 960.379141,403.919062 C959.605703,404.901328 958.886406,401.853984 957.130703,403.671562 C954.810391,405.280312 954.191641,400.005469 951.995078,405.597422 C951.461406,405.697969 951.616094,406.834922 952.327656,406.803984 C952.838125,408.350859 946.062813,408.497812 944.214297,409.704375 C942.744766,411.081094 944.152422,414.283125 946.070547,414.345 C950.247109,414.476484 965.406484,416.154844 971.593984,414.754922 C972.877891,415.412344 972.669063,405.102422 972.135391,405.349922 C971.145391,404.738906 972.545313,404.901328 972.684531,404.414062 C972.877891,401.753437 973.03258,396.408984 973.97617,394.359375 C975.52305,390.585 975.06672,382.154531 976.83789,379.772344 C980.65867,383.848359 984.085,388.11 986.30477,393.493125 C985.73242,394.367109 990.28797,393.933984 990.30344,394.583672 C990.64375,395.736094 993.56734,398.883984 991.07688,398.814375 C991.07688,399.224297 990.7675,400.879453 991.44039,400.631953 C992.28344,400.740234 991.44039,402.109219 992.06688,402.766641 C992.59281,404.035078 993.32758,404.878125 993.61375,406.115625 C994.07008,409.209375 991.74977,419.186719 997.82125,414.770391 C1003.18891,411.676641 1004.1557,405.411797 1004.24078,399.773438 C1006.56109,380.80875 1004.12477,391.265625 996.50641,384.474844 C990.90672,377.413359 985.87164,369.392812 979.33609,363.468281 C978.64773,363.390937 978.64773,362.625234 978.13727,362.532422 C977.84336,362.532422 977.79695,362.455078 977.88203,361.99875 C979.18914,359.678437 980.79016,356.584687 982.80883,354.720703 C991.43266,341.123672 1001.22438,333.025781 997.55055,314.97375 C997.36492,310.464609 995.17609,305.653828 996.955,301.198828 C998.56375,296.612344 998.25438,313.109766 999.03555,314.865469 C1000.23438,321.16125 1001.95141,328.013906 998.20023,333.992578 C997.30305,336.312891 995.4932,342.059531 997.49641,344.000859 C998.23117,345.346641 996.32078,345.888047 999.66977,346.545469 C1008.06156,345.323437 1009.3532,340.852969 1007.18758,333.079922 C1007.3732,328.454766 1007.72125,303.998672 1007.75219,299.110547 Z M999.75484,261.550156 C999.75484,263.870469 997.54281,262.687109 999.1825,261.00875 C999.80898,260.250781 999.75484,260.444141 999.75484,261.550156 Z"></path>
          <path d="M679.613594,385.993984 C691.826172,387.711016 689.157812,383.047188 689.250625,373.618984 C677.038047,371.871016 679.714141,376.542578 679.613594,385.993984 Z"></path>
          <path d="M690.635078,385.993984 C702.847656,387.711016 700.179297,383.047188 700.272109,373.618984 C688.059531,371.871016 690.727891,376.542578 690.635078,385.993984 Z"></path>
          <path d="M695.275703,365.087969 C708.300391,361.878203 691.973125,354.816719 689.946719,363.680313 C687.912578,354.816719 671.585312,361.878203 684.61,365.087969 C690.905781,365.644844 678.236875,365.180781 678.244609,365.327734 L678.244609,372.25 C697.410391,372.806875 684.764687,371.785937 690.619609,365.490156 C688.577734,374.957031 695.530937,371.785937 701.633359,372.242266 L701.633359,365.358672 C701.517344,365.173047 689.080469,365.652578 695.275703,365.087969 Z M681.353828,361.692578 C682.815625,359.991016 687.340234,361.692578 688.044062,363.649375 C684.726016,363.517891 681.3925,362.744453 681.384766,361.692578 L681.353828,361.692578 Z M692.437187,362.667109 C693.458125,361.522422 697.394922,360.130234 698.47,361.692578 C699.777109,362.427344 690.983125,364.910078 692.468125,362.667109 L692.437187,362.667109 Z"></path>
          <path d="M703.713906,387.70875 C715.926484,389.433516 713.258125,384.761953 713.350937,375.33375 C701.138359,373.570312 703.806719,378.265078 703.713906,387.70875 Z"></path>
          <path d="M714.727656,387.70875 C726.947969,389.433516 724.271875,384.761953 724.372422,375.33375 C712.152109,373.570313 714.835937,378.257344 714.727656,387.70875 Z"></path>
          <path d="M714.727656,367.181719 C712.685781,376.640859 719.646719,373.4775 725.749141,373.933828 L725.749141,367.050234 L717.488828,367.050234 C729.508047,366.795 722.485234,356.423203 715.284531,363.128906 C713.845937,367.320938 711.363203,359.710312 707.194375,360.963281 C700.233438,361.574297 704.997813,367.576172 710.5975,367.0425 C703.798984,366.926484 701.31625,365.688984 702.337188,373.933828 L713.358672,373.933828 C713.815,373.129453 712.128906,365.766328 714.727656,367.181719 Z M716.560703,364.389609 C717.589375,363.244922 721.526172,361.845 722.60125,363.407344 C723.877422,364.142109 715.083437,366.609375 716.560703,364.389609 Z M705.485078,363.407344 C706.946875,361.713516 711.471484,363.407344 712.175312,365.371875 C708.826328,365.232656 705.485078,364.466953 705.485078,363.407344 Z"></path>
          <path d="M727.118125,373.260938 C725.57125,382.596328 722.121719,386.703281 734.450312,387.144141 C736.004922,377.80875 739.446719,373.701797 727.118125,373.260938 Z"></path>
          <path d="M735.803828,387.391641 C747.529141,391.220156 745.719297,386.161875 747.467266,376.872891 C735.71875,373.036641 737.551797,378.102656 735.803828,387.391641 Z"></path>
          <path d="M611.125703,376.223203 C613.337734,385.427109 611.783125,390.547266 623.299609,386.138672 C621.079844,376.934766 622.642188,371.814609 611.125703,376.223203 Z"></path>
          <path d="M618.705391,366.129844 C620.909688,364.142109 620.940625,371.760469 621.551641,372.402422 L632.286953,369.935156 C631.451641,361.636172 629.332422,363.438281 622.696328,365.077969 C628.257344,364.343203 631.544453,357.413203 624.645391,358.38 C620.298672,358.109297 619.594844,366.060234 617.243594,362.309062 C608.735781,357.39 604.203438,369.068906 615.982891,366.617109 L607.931406,368.473359 C608.109297,378.234141 614.026094,373.701797 620.213594,372.711797 L618.705391,366.129844 Z M621.195859,362.688047 C621.969297,361.342266 625.465234,359.107031 626.865156,360.367734 C628.272813,360.816328 620.26,365.209453 621.195859,362.688047 Z M610.182109,364.234922 C611.22625,362.254922 616.013828,362.881406 617.143047,364.644844 C613.848203,365.248125 610.421875,365.248125 610.182109,364.219453 L610.182109,364.234922 Z"></path>
          <path d="M585.261953,384.785156 C597.451328,386.71875 594.852578,382.000781 595.115547,372.557109 C582.933906,370.623516 585.524922,375.33375 585.261953,384.785156 Z"></path>
          <path d="M596.283437,384.970781 C608.465078,386.904375 605.874062,382.194141 606.137031,372.742734 C593.947656,370.809141 596.538672,375.527109 596.283437,384.970781 Z"></path>
          <path d="M601.279844,364.149844 C614.350937,361.164375 598.186094,353.824453 595.974062,362.657109 C592.408516,352.269844 577.504375,362.765391 592.501328,364.242656 C590.753359,364.869141 582.315156,362.154375 584.202344,366.562969 C584.202344,366.392813 572.237266,365.549766 578.509844,365.673516 C591.820703,363.964219 576.390625,355.092891 573.374219,363.670313 C570.852813,352.989141 554.950938,361.999688 569.762266,364.915547 C563.072031,364.026094 560.635703,362.510156 560.774922,370.824609 C579.79375,373.578047 567.302734,371.033438 573.85375,365.518828 L573.080313,372.232266 C574.743203,371.543906 586.174609,375.991172 584.310625,370.956094 C590.43625,370.623516 597.080078,373.817813 595.254766,364.389609 C600.993672,370.840078 588.394375,371.582578 607.529219,371.350547 L607.645234,364.459219 C607.39,364.350938 595.177422,364.606172 601.279844,364.149844 Z M565.098438,360.754453 C566.738125,359.207578 571.046172,361.419609 571.517969,363.461484 C568.207656,362.943281 564.974688,361.806328 565.098438,360.754453 Z M575.988438,362.981953 C577.140859,361.961016 581.209141,361.025156 582.098594,362.695781 C583.281953,363.569766 574.263672,365.0625 575.988438,362.981953 Z M587.450781,360.514688 C588.943516,358.844063 593.437188,360.6075 594.110078,362.5875 C590.761094,362.394141 587.435313,361.574297 587.450781,360.514688 Z M598.510937,361.682578 C599.555078,360.553359 603.515078,359.230781 604.566953,360.808594 C605.827656,361.566563 596.995,363.902344 598.510937,361.682578 Z"></path>
          <path d="M561.981484,372.386953 C561.006953,381.799687 557.828125,386.107734 570.156719,385.790625 C571.13125,376.370156 574.310078,372.062109 561.981484,372.386953 Z"></path>
          <path d="M571.525703,385.945312 C583.467578,389.039062 581.340625,384.104531 582.508516,374.730469 C570.566641,371.628984 572.693594,376.57125 571.525703,385.945312 Z"></path>
          <path d="M750.854922,389.255625 C763.036562,391.204688 760.453281,386.486719 760.731719,377.043047 C748.550078,375.117188 751.133359,379.804219 750.854922,389.255625 Z"></path>
          <path d="M761.876406,389.456719 C774.058047,391.413516 771.474766,386.695547 771.745469,377.251875 C759.563828,375.295078 762.147109,380.013047 761.876406,389.456719 Z"></path>
          <path d="M749.864922,368.929688 C749.795313,368.767266 737.837969,367.127578 744.033203,367.653516 C757.413672,366.764062 742.571406,356.956875 739.029063,365.333203 C738.727422,361.334531 733.359766,358.50375 730.064922,360.182109 C726.971172,362.858203 731.890234,365.596172 735.3475,366.369609 C728.688203,365.0625 726.406563,363.399609 726.012109,371.706328 L736.840234,373.632187 C737.714219,364.830469 740.390313,365.371875 738.186016,373.871953 C741.550469,373.554844 751.233906,379.007578 749.787578,371.551641 C746.933594,378.172266 757.87,374.800078 760.731719,375.735937 C762.789063,365.835938 755.828125,368.751797 749.864922,368.929688 Z M730.946641,361.875938 C732.686875,360.460547 736.847969,362.912344 737.196016,364.969688 C733.924375,364.227188 730.76875,362.889141 730.946641,361.845 L730.946641,361.875938 Z M741.681953,364.776328 C742.89625,363.825 747.010938,363.144375 747.799844,364.869141 C748.929063,365.781797 739.833438,366.694453 741.681953,364.745391 L741.681953,364.776328 Z"></path>
          <path d="M762.131641,375.689531 C768.411953,375.372422 775.109922,378.605391 773.276875,369.007031 C766.996563,369.324141 760.306328,366.091172 762.131641,375.689531 Z"></path>
          <path d="M636.270156,38.4398438 C636.185078,38.7801562 629.309219,61.5733594 629.270547,61.8517969 C650.996406,45.6096094 647.670625,45.725625 669.419687,61.7125781 C660.672109,36.0035156 659.782656,39.2364844 681.701875,23.4892969 C654.53875,23.8760156 657.323125,25.7322656 649.140156,-7.10542736e-15 L641.181484,23.1257812 C612.262656,23.8450781 613.345469,21.0529687 636.270156,38.4398438 Z"></path>
          <path d="M594.373047,129.31875 C592.918984,129.488906 594.736563,129.31875 595.285703,129.264609 L594.373047,129.31875 Z"></path>
          <path d="M781.885234,318.331406 C798.730703,313.249922 687.100469,325.563047 677.517578,286.032656 C680.8975,317.975625 814.655781,308.918672 765.519297,294.679688 C756.617031,290.356172 768.435156,290.595938 771.846016,290.758359 C784.344766,288.793828 755.51875,283.565391 763.338203,277.068516 C767.808672,270.610313 750.189766,270.107578 746.794375,268.181719 C728.29375,260.24625 709.073828,249.704297 690.147812,239.618672 C712.515625,241.629609 730.590859,258.011016 752.79625,260.950078 C755.155234,261.723516 758.604766,261.855 755.278984,258.869531 C734.991719,243.014063 784.607734,264.121172 775.875625,256.116094 C726.715937,231.095391 798.305313,254.986875 737.489922,223.159922 C730.188672,218.519297 742.989063,219.648516 741.295234,215.533828 C721.023438,199.778906 690.055,202.82625 670.030703,184.333359 C688.639609,189.151875 757.467813,219.385547 714.472422,179.9325 C708.284922,170.442422 735.564062,187.519922 729.546719,178.772344 C710.210781,146.365313 685.654141,158.214375 652.442734,131.592656 C674.245938,137.872969 716.962891,155.167031 720.195859,147.734297 C720.582578,147.687891 702.174766,143.650547 698.191563,138.453047 C705.554688,139.180078 708.424141,139.404375 710.806328,139.574531 C712.871406,139.574531 712.531094,138.909375 709.738984,137.919375 C706.188906,136.055391 680.711875,129.241406 703.597891,131.623594 C707.913672,131.948438 705.307188,129.628125 704.03875,128.150859 C705.678438,128.189531 705.995547,127.980703 704.03875,127.439297 C702.739375,127.864688 688.337969,108.876797 687.502656,108.521016 C690.666016,110.423672 694.711094,107.855859 697.325312,109.054688 C697.48,104.460469 684.888438,94.854375 681.353828,90.0049219 C677.811484,87.2901563 679.706406,87.4139063 683.078594,87.6846094 C682.135,89.8579688 657.029219,69.7176563 670.881484,70.7927344 C670.061641,70.351875 648.451797,55.1847656 650.671563,53.4909375 C643.470859,59.5082813 631.010781,66.391875 625.998906,73.4688281 C626.772344,74.1726563 629.479375,72.0611719 630.53125,72.0457031 L627.56125,74.8146094 C627.901562,75.4101563 618.960625,85.6427344 617.088906,87.0271875 C613.507891,91.3120313 620.553906,86.5553906 621.319609,88.1486719 C619.772734,91.8147656 613.067031,95.5582031 610.684844,96.1382813 C607.591094,96.4785938 612.703516,96.6796875 614.049297,96.40125 L608.410938,102.348984 C604.010078,108.288984 622.332813,96.6332813 615.163047,104.924531 C612.680313,106.571953 595.223828,114.476484 607.560156,113.981484 C603.321719,119.627578 595.958594,124.183125 608.728047,122.288203 C616.462422,118.421016 595.347578,130.471172 598.054609,129.179531 C611.048359,131.971641 623.578047,112.604766 639.820234,116.526094 C618.024766,129.736406 595.432656,136.403438 577.017109,152.104219 C571.974297,157.232109 581.4025,155.197969 581.657734,158.392266 C582.222344,159.413203 565.082969,176.537109 564.147109,177.527109 C566.714922,187.581797 595.912188,161.215313 604.652031,159.26625 C605.332656,174.062109 551.130156,196.538203 567.844141,199.222031 C569.545703,198.951328 581.943906,195.610078 575.578516,199.995469 C574.495703,201.310313 551.764375,213.685313 552.042813,215.263125 C563.946016,223.051641 589.283828,195.873047 607.188906,201.990938 C580.250078,212.819063 547.278437,223.546641 528.739141,241.18875 C551.942266,243.454922 515.915547,252.991406 515.219453,258.065156 C519.504297,259.364531 544.15375,248.482266 542.428984,254.731641 C541.555,256.402266 534.887969,259.735781 537.231484,261.421875 C560.511953,252.914063 585.029922,245.110078 607.165703,233.346094 C593.243828,247.809375 577.488906,247.971797 562.917344,258.830859 C555.848125,268.885547 541.988125,268.645781 531.430703,272.489766 C523.456563,278.909297 541.137344,279.071719 519.187188,288.414844 C511.329063,294.416719 540.843438,287.734219 527.524844,295.252031 C477.932031,313.489688 597.049141,278.878359 612.177578,281.098125 C684.787891,265.923281 535.444844,303.396328 511.445078,311.409141 C510.277188,312.631172 498.683359,316.049766 500.485469,318.586641 C503.177031,321.046172 516.317734,316.537031 514.190781,321.87375 C491.482656,335.184609 565.724922,311.045625 543.859844,328.06125 C543.156016,329.128594 537.053594,333.328359 540.766094,333.707344 C594.032734,314.82 554.162031,337.203281 576.344219,334.790156 C596.987266,326.282344 582.423437,337.767891 591.480391,341.070469 C597.977266,343.816172 617.003828,328.362891 620.871016,336.832031 C620.097578,344.782969 626.733672,347.938594 632.874766,342.338906 L632.874766,378.984375 C632.232813,369.5175 628.690469,372.123984 621.775938,373.748203 C623.887422,380.863828 621.977031,388.721953 632.874766,383.903438 C628.365625,390.701953 664.485156,383.903438 665.359141,385.450313 L665.359141,339.299297 C669.435156,340.722422 688.8175,356.392266 689.730156,347.497734 C689.730156,345.850313 683.99125,332.647734 688.577734,334.751484 C693.218359,336.066328 712.368672,349.09875 713.637109,340.397578 C713.265859,338.518125 710.543359,331.464375 714.549766,332.624531 C719.190391,333.606797 755.743047,350.784844 743.166953,335.161406 C739.299766,328.007109 760.066563,337.303828 763.639844,337.211016 C765.024297,337.636406 762.742656,336.391172 760.809062,335.308359 C764.274063,336.159141 767.329141,336.963516 768.458359,337.319297 C771.451563,337.180078 742.207891,325.872422 756.671172,326.978438 C757.506484,326.498906 788.034063,330.984844 776.107656,326.483438 C776.107656,326.483438 770.005234,324.426094 764.297266,322.724531 C802.566953,329.028047 768.203125,319.777734 781.885234,318.331406 Z M723.436562,264.592969 L725.2,264.886875 C724.426563,265.289063 720.25,264.074766 723.436562,264.592969 Z M686.628672,106.339922 C686.750395,107.102302 687.043977,107.826997 687.487188,108.459141 C686.690547,107.507813 686.458516,106.788516 686.628672,106.339922 Z M663.680781,83.2064063 C664.454219,83.3765625 666.062969,86.1609375 666.851875,86.5167188 C666.851875,86.5940625 673.480234,86.3929688 674.58625,88.8370313 C667.300469,88.5740625 664.299531,87.8547656 663.680781,83.2064063 Z"></path>
          <path d="M595.285703,129.264609 C595.896719,129.218203 596.484531,129.179531 597.010469,129.156328 C596.5,129.164062 595.896719,129.218203 595.285703,129.264609 Z"></path>
      </g>
    </svg>

    <!-- Hearts -->

    <div id="hearts-suzi" class="hearts">
      <div class="heart"></div>
      <div class="heart"></div>
      <div class="heart"></div>
      <div class="heart"></div>
    </div>
    <div id="hearts-izzy" class="hearts">
      <div class="heart"></div>
      <div class="heart"></div>
      <div class="heart"></div>
      <div class="heart"></div>
    </div>
  </div>

  <!-- Footer-->

  <div id="footer">
    <h1 id="wishes">Merry Christmas</h1>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

:root {
  --color-background: #0a1332;
  --color-clouds-far: #0c254a;
  --color-clouds-middle: #0e315c;
  --color-clouds-close: #074e82;
  --color-moon: #fdf9ce;
  --color-heart: #f00;
  --color-text: #fff;
  --size-viewport: 85%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card {
  width: 100vmin;
  height: 100vmin;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 300px) {
  body::before {
    content: 'Screen is to narrow. Try to open on a device with wider screen.';
    position: absolute;
    top: 50%;
    text-align: center;
    padding: 1rem;
  }

  #card {
    display: none;
  }
}

/* Viewport */

#viewport {
  width: var(--size-viewport);
  height: var(--size-viewport);
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  clip-path: circle(50%);
}

/* Shooting star */

#shooting-star {
  background-image: linear-gradient(to right, white, #fff0);
  position: absolute;
  top: 10%;
  left: 80%;
  height: 0.75%;
  width: 0%;
  z-index: 2;
  transform: skewY(-8deg);
  transform-origin: center right;
  animation: shooting-star 12s infinite ease-in-out;
}

@keyframes shooting-star {
  0% {
    width: 0%;
    opacity: 0;
    top: 15%;
    left: 100%;
  }
  45% {
    width: 15%;
    opacity: 1;
    top: 15%;
    left: 100%;
  }
  60% {
    width: 15%;
    opacity: 1;
    top: 35%;
    left: -15%;
  }
  100% {
    width: 0%;
    opacity: 0;
    top: 35%;
    left: -15%;
  }
}

/* Stars */

#starfield {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 50%;
  top: 0%;
  opacity: 0.5;
  z-index: 1;
}

/* Idea from: https://codepen.io/kikeur/pen/KpgYdG */
.stars {
  background-image: 
    radial-gradient(2px 2px at 10% 10%, #eee, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 35% 45%, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 54% 63%, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 77% 80%, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 30% 30%;
  opacity: 0.5;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: shining 4s infinite;
}

@media (min-width: 300px) {
  .stars {
    background-size: 55% 55%;
  }
}

@media (min-width: 481px) {
  .stars {
    background-size: 50% 50%;
  }
}

@media (min-width: 769px) {
  .stars {
    background-size: 40% 40%;
  }
}

@media (min-width: 1024px) {
  .stars {
    background-size: 30% 30%;
  }
}

.stars:nth-child(1) {
  background-position: 53% 48%;
  animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  animation-delay: 2s;
}
.stars:nth-child(3) {
  background-position: -20% -32%;
  animation-delay: 1s;
}
.stars:nth-child(4) {
  background-position: 40% -70%;
  animation-delay: 4s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  animation-delay: 3s;
}

@keyframes shining {
  0%   { opacity: 0.5; }
  50%  { opacity: 0.15; }
  100% { opacity: 0.5; }
}

/* Clouds */

#clouds {
  position: fixed;
  width: 100%;
  height: 80%;
  top: 20%;
  z-index: 20;
}

.cloud {
  width: 100%;
  position: fixed;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 461.66 282.08"><path fill="rgba" d="M378.49,98.32a85.55,85.55,0,0,0-14.56-9.88C369.27.48,246.69-34,204.69,41.71c-36.49-9.47-76.76,8.85-94.18,40.3C56.94,64.8-.94,107.27,0,163.8c-1.6,62.26,69.34,105.4,123.84,76.41,24.42,46.06,96.2,56.4,132.66,18.43,26.3,26.92,75.31,31.49,106.3,9.37C483.1,285.51,499.81,103.06,378.49,98.32Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 461.66 282.08"><path fill="rgba" d="M378.49,98.32a85.55,85.55,0,0,0-14.56-9.88C369.27.48,246.69-34,204.69,41.71c-36.49-9.47-76.76,8.85-94.18,40.3C56.94,64.8-.94,107.27,0,163.8c-1.6,62.26,69.34,105.4,123.84,76.41,24.42,46.06,96.2,56.4,132.66,18.43,26.3,26.92,75.31,31.49,106.3,9.37C483.1,285.51,499.81,103.06,378.49,98.32Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
          mask-position: bottom;
}

.clouds-far {
  z-index: 21;
  opacity: 0.7;
  background-color: var(--color-clouds-far);
}

.cloud:nth-child(1) {
  height: 70%;
  top: 28%;
  left: -20%;
}

.cloud:nth-child(2) {
  height: 70%;
  top: 30%;
  left: 18%;
  transform: scaleX(-1);
}

.clouds-middle {
  z-index: 22;
  opacity: 0.9;
  background-color: var(--color-clouds-middle);
}

.cloud:nth-child(3) {
  height: 60%;
  top: 45%;
  left: -25%;
  transform: scaleX(-1);
}

.cloud:nth-child(4) {
  height: 60%;
  top: 45%;
  left: 30%;
  transform: scaleX(-1);
}

.clouds-close {
  z-index: 23;
  opacity: 0.5;
  background-color: var(--color-clouds-close);
}

.cloud:nth-child(5) {
  height: 50%;
  top: 50%;
  left: -13%;
}

.cloud:nth-child(6) {
  height: 50%;
  top: 60%;
  left: 35%;
}

/* Moon */

#moon {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.moon-element {
  background-color: var(--color-moon);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: circle(closest-side);
}

.moon-element:nth-child(1) {
  width: 100%;
  height: 100%;
  opacity: 0.08;
  z-index: 31;
}

.moon-element:nth-child(2) {
  width: 87%;
  height: 87%;
  opacity: 0.12;
  z-index: 32;
}

.moon-element:nth-child(3) {
  width: 73%;
  height: 73%;
  opacity: 0.18;
  z-index: 33;
}

.moon-element:nth-child(4) {
  width: 60%;
  height: 60%;
  opacity: 1;
  z-index: 34;
}

/* Landscape */

#landscape {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 40;
  fill: var(--color-background);
}

/* Hearts */

#hearts-suzi {
  bottom: 14%;
  left: 26%;
}

#hearts-izzy {
  bottom: 15%;
  left: 61%;
}

.hearts {
  width: 3%;
  height: 8%;
  position: absolute;
  z-index: 50;
}

.heart {
  background-color: var(--color-heart);
  position: absolute;
  width: 30%;
  height: 30%;
  opacity: 0;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: floating-hart 10s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.heart:nth-child(1) {  
  animation-delay: 1s;
}

.heart:nth-child(2) {
  animation-delay: 2.5s;
}

.heart:nth-child(3) {
  animation-delay: 3.5s;
}

.heart:nth-child(4) {
  animation-delay: 4.5s;
}

@keyframes floating-hart {
  0% {
    opacity: 0;
    bottom: 00%;
    left: 0%;
  }
  10% {
    opacity: 1;
    bottom: 20%;
    left: 100%;
  }
  20% {
    bottom: 40%;
    left: 10%;
  }
  30% {
    bottom: 60%;
    left: 50%;
  }
  40% {
    opacity: 1;
    bottom: 80%;
    left: 5%;
  }
  50% {
    opacity: 0;
    bottom: 100%;
    left: 90%;
  }
  100% {
    opacity: 0;
    bottom: 100%;
    left: 90%;
  }
}

/* Footer */

#footer {
  background-color: var(--color-background);
  width: 100%;
  height: calc(100% - var(--size-viewport));
  transform: translateY(-25%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

#wishes {
  width: 100%;
  font-size: 15vmin;
  font-size: 15vmin;
  font-weight: 500;
  font-family: 'Italianno', 'Times New Roman', serif;
}
              
            
!

JS

              
                
              
            
!
999px

Console