<div id="sky">

  <div id="cloud" class="cloud">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 229">
      <path fill="#4DBDCF" id="thecloud" d="M388.5 131.3a80.4 80.4 0 0 0-76-73.7 91 91 0 0 0-172.1 8.1 70.1 70.1 0 0 0-90.1 60.7A51.5 51.5 0 0 0 0 177.7 51.5 51.5 0 0 0 51.4 229h315.2a51.5 51.5 0 0 0 51.4-51.3 51.5 51.5 0 0 0-29.5-46.4"/>
    </svg>
  </div>
  <div class="cloud cloud2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 229"><use href="#thecloud" /></svg>
  </div>
  <div class="cloud cloud3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 229"><use href="#thecloud" /></svg>
  </div>
  
  <div id="sun">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 262">
      <g id="The-Sun" transform="translate(9 46.4)">
      <path id="Fill-48" fill="#FAD883" d="M59.3 146.2c-9.3 0-19.5-1.8-29.6-7.3-15.5-8.3-23.3-24.2-22.8-46 .4-15.3 4.8-28.2 5-28.7a7.9 7.9 0 0 1 14.8 5.2c-.1.4-14.3 42.3 10.5 55.7 24.3 13.2 50.8-1.7 51.1-1.8a7.8 7.8 0 1 1 7.8 13.6c-1 .5-16.7 9.3-36.8 9.3"/>
      <path id="Fill-49" fill="#FAD883" d="M215.4 149.4a61.8 61.8 0 0 1-36.3-13.3 7.8 7.8 0 0 1 10-12c.9.6 19.1 15.3 38.7 7a4.6 4.6 0 0 0 3-3.3c3-10.4-10-35.9-20-50.7a7.9 7.9 0 0 1 12.9-8.9c.3.5 7 10.3 13.1 22.6 9 18 11.9 31.6 9 41.4-1.8 6.2-6 10.9-11.9 13.4a47 47 0 0 1-18.5 3.8"/>
      <path id="Fill-50" fill="#FAD480" d="M44.4 84.5a84.5 84.5 0 1 0 169.1 0 84.5 84.5 0 0 0-169 0"/>
      <path id="Fill-51" fill="#F5C37F" d="M213.5 84.5a84.5 84.5 0 0 1-153 49.7 84.5 84.5 0 0 0 113.7-121 84.5 84.5 0 0 1 39.3 71.3"/>
      <path id="Fill-52" fill="#FBD88D" d="M197.7 35A84.5 84.5 0 0 0 84 156 84.5 84.5 0 1 1 197.7 35"/>
      <path id="Fill-64" fill="#FAD883" d="M33.4 63.7a10.4 10.4 0 1 1-20.9 0 10.4 10.4 0 0 1 20.9 0"/>
      <path id="Fill-65" fill="#FAD883" d="M26.2 60.9h-.4a2.8 2.8 0 0 1-2.4-3.1c0-.4 1.1-7.8 6.6-12 3.1-2.3 6.9-3.1 11.2-2.5a2.8 2.8 0 0 1-.8 5.5 9 9 0 0 0-7 1.4c-3.7 2.8-4.5 8.2-4.5 8.3a2.8 2.8 0 0 1-2.7 2.4"/>
      <path id="Fill-66" fill="#FAD883" d="M23 61.2c-.8 0-1.6-.3-2.1-1-.7-.7-.8-1.4-1.1-4A39.5 39.5 0 0 0 15.5 41a2.8 2.8 0 1 1 4.5-3.3c3.5 4.8 4.6 13.3 5.2 17.8l.3 2a2.8 2.8 0 0 1-2.5 3.7z"/>
      <path id="Fill-67" fill="#FAD883" d="M19.3 62.5h-.5a2.8 2.8 0 0 1-2.3-3c-.3-1.9-5-9.5-10.4-13.8a2.8 2.8 0 1 1 3.4-4.3c6 4.7 13.2 14.8 12.5 18.8a2.8 2.8 0 0 1-2.7 2.3z"/>
      <path id="Fill-68" fill="#FAD883" d="M19.3 69.5c-.8 0-1.6-.3-2.1-1-3.5-4.2-10.6-11.2-14.8-11.7a2.8 2.8 0 1 1 .7-5.5c7.8 1 17.3 12.4 18.3 13.7a2.8 2.8 0 0 1-2.1 4.5"/>
      <path id="Fill-69" fill="#FAD883" d="M35.9 72.2c-1.2 0-2.4-.3-3.5-.8-5.3-2.2-7.5-8.9-7.7-9.6a2.8 2.8 0 0 1 5.2-1.7c.5 1.4 2.2 5.2 4.7 6.3.6.3 1.7.5 3.4-.3a2.8 2.8 0 1 1 2.4 5c-1.5.7-3 1-4.5 1"/>
      <path id="Fill-70" fill="#FAD883" d="M203.1 69.6a10.4 10.4 0 1 0 20.9 0 10.4 10.4 0 0 0-20.9 0"/>
      <path id="Fill-71" fill="#FAD883" d="M210.3 66.8c-1.3 0-2.5-1-2.7-2.4 0 0-.8-5.5-4.4-8.3a9 9 0 0 0-7-1.4 2.8 2.8 0 0 1-.9-5.4c4.4-.7 8.1.1 11.2 2.5a19.4 19.4 0 0 1 6.6 11.9 2.8 2.8 0 0 1-2.8 3"/>
      <path id="Fill-72" fill="#FAD883" d="M213.6 67.1a2.7 2.7 0 0 1-2.6-3.8l.3-1.8c.6-4.6 1.7-13.1 5.3-17.9A2.8 2.8 0 0 1 221 47a39.5 39.5 0 0 0-4.3 15.3c-.3 2.5-.4 3.2-1 4-.6.6-1.4 1-2.1 1z"/>
      <path id="Fill-73" fill="#FAD883" d="M217.2 68.4c-1.3 0-2.4-1-2.7-2.3-.6-4 6.6-14.1 12.5-18.8a2.8 2.8 0 0 1 3.4 4.3A36.6 36.6 0 0 0 220 65.4a2.8 2.8 0 0 1-2.8 3z"/>
      <path id="Fill-74" fill="#FAD883" d="M217.2 75.4c-.6 0-1.2-.2-1.7-.6a2.8 2.8 0 0 1-.4-3.8c1-1.3 10.5-12.8 18.3-13.8a2.8 2.8 0 1 1 .7 5.5c-4.2.5-11.3 7.5-14.7 11.7-.6.7-1.4 1-2.2 1"/>
      <path id="Fill-75" fill="#FAD883" d="M200.6 78c-1.4 0-3-.3-4.5-1a2.8 2.8 0 0 1 2.4-5c1.7.9 2.8.6 3.5.3 2.5-1 4.2-5 4.6-6.2a2.8 2.8 0 1 1 5.3 1.6c-.3.8-2.5 7.4-7.7 9.7-1.2.4-2.3.7-3.6.7"/>
      </g>
      <g id="rays" fill="#FAD480">
      <path id="Fill-42" d="M138 30.9c-2.5 0-4.5-2-4.5-4.4v-22a4.4 4.4 0 0 1 8.9 0v22c0 2.4-2 4.4-4.5 4.4"/>
      <path id="Fill-43" d="M138 261.9c-2.5 0-4.5-2-4.5-4.5v-22a4.4 4.4 0 0 1 8.9 0v22c0 2.5-2 4.5-4.5 4.5"/>
      <path id="Fill-44" d="M60.4 57.8c-1.2 0-2.3-.4-3.2-1.3L41 40.1A4.4 4.4 0 0 1 47 34l16.4 16.3a4.4 4.4 0 0 1-3.1 7.6"/>
      <path id="Fill-45" d="M44 229.3a4.4 4.4 0 0 1-3.1-7.6l16.3-16.3a4.4 4.4 0 0 1 6.3 6.2L47 228c-.8.9-2 1.3-3.1 1.3"/>
      <path id="Fill-45" d="M10.4 147.2a4.4 4.4 0 0 1-3.1-7.5l16.4-16.4a4.4 4.4 0 0 1 6.2 6.3l-16.3 16.3c-1 .9-2 1.3-3.2 1.3" transform="rotate(44 18.6 134.6)"/>
      <path id="Fill-45" d="M246.4 147.2a4.4 4.4 0 0 1-3.1-7.5l16.4-16.4a4.4 4.4 0 0 1 6.2 6.3l-16.3 16.3c-1 .9-2 1.3-3.2 1.3" transform="rotate(44 254.6 134.6)"/>
      <path id="Fill-46" d="M231.9 229.3c-1.2 0-2.3-.4-3.2-1.3l-16.3-16.4a4.4 4.4 0 0 1 6.2-6.2l16.4 16.3a4.4 4.4 0 0 1-3.1 7.6"/>
      <path id="Fill-47" d="M215.5 57.8a4.4 4.4 0 0 1-3.1-7.6L228.7 34A4.4 4.4 0 1 1 235 40l-16.4 16.4c-.8.9-2 1.3-3.1 1.3"/>
      </g>
      <g id="sunglasses" transform="translate(48.6 79.1)">
      <path id="Fill-53" fill="#167D81" d="M87 36c-.9 0-1.8-.2-2.7-.8 0 0-2.5-1.7-5.6-2-3.1 0-5.9 1.3-5.9 1.3a4.8 4.8 0 0 1-6.4-2 4.8 4.8 0 0 1 1.9-6.4 22 22 0 0 1 11-2.4 22 22 0 0 1 10.6 3.7 4.8 4.8 0 0 1-2.8 8.7"/>
      <path id="Fill-54" fill="#167D81" d="M29.3 58.7c-3.3-.2-6.6-.6-9.4-1.1C13.6 56.4 8.4 52 4.8 44.8c-5.6-11-6.4-26.7-2-35.6C7.1.5 20.8-.5 31.7.2c10.5.6 24.7 3.5 30.8 8.3 4.4 3.6 7.4 9.4 8.9 17.3 1 5.6.8 10.2.8 10.4v.1c-1 18.4-22.9 23.6-43 22.4"/>
      <path id="Fill-55" fill="#32312F" d="M67.5 36c-.9 14.6-18.8 18.3-33.8 18.1h-2-.4l-6-.5-1.5-.2-3.1-.5a14.3 14.3 0 0 1-7.5-4.2l-.3-.2a28.2 28.2 0 0 1-6.6-13.2 46.2 46.2 0 0 1-1.4-14.8c.2-3.5 1-6.8 2.2-9.2 2-4 8-6 15.4-6.4a73 73 0 0 1 17 .9 83 83 0 0 1 16.6 4.4l.4.2c1.1.6 2.1 1.1 2.9 1.7l.1.1a14.2 14.2 0 0 1 3.5 4l1 1.7a29 29 0 0 1 2.4 7.2c1.3 5.8 1 11 1 11"/>
      <path id="Fill-56" fill="#167D81" d="M124.6 64.5c-20-1.2-41-9-39.9-27.4V37c0-.2.4-4.9 2.1-10.2 2.4-7.7 6-13.2 11-16.1 6.6-4 21-5.2 31.6-4.6 10.7.7 24.3 3.4 27.5 12.4 3.3 9.5.6 24.9-6.3 35.2-4.4 6.7-10.2 10.5-16.5 10.8-2.9.2-6.2.2-9.5 0"/>
      <path id="Fill-57" fill="#32312F" d="M153.5 27.4c.2 13.1-7.4 31.7-19.7 32.4a81.3 81.3 0 0 1-24.1-2.4 45 45 0 0 1-10.5-4.2A18.9 18.9 0 0 1 90 42.7c-.5-1.7-.7-3.4-.6-5.3 0 0 1.5-17 10.8-22.7 3.2-2 9.7-3.3 17.1-3.8a95.2 95.2 0 0 1 16.5.4c4 .5 7.8 1.3 11 2.5l.6.3c1.9.7 3.4 1.6 4.7 2.7a8 8 0 0 1 2.5 4c.6 2 .9 4.2 1 6.6"/>
      <g id="shade1">
        <path fill="#747370" d="M49 7.8l-34.6 42-1.2-1.1-.3-.2a28.2 28.2 0 0 1-5.7-10.3l27.2-33a83 83 0 0 1 14.7 2.6"/>
        <path fill="#9E9D9A" d="M63 16.2L31.8 54h-.5l-6-.5 34-41.5.2.1a14.2 14.2 0 0 1 3.5 4"/>
       </g>
      <path id="Fill-60" fill="#9E9D9A" d="M133.8 11.3l-34.6 42a18.9 18.9 0 0 1-8.9-9.7l27-32.7a95.2 95.2 0 0 1 16.5.4"/>
      <path id="Fill-61" fill="#747370" d="M150 16.8l-34.4 41.9a68.3 68.3 0 0 1-6-1.3L145.5 14c1.9.7 3.4 1.6 4.7 2.7"/>
      <path id="Fill-62" fill="#FFFFFE" d="M58 30.4c-1.5 0-3-1-3.4-2.7-4-16-27-13.3-27.2-13.3a3.6 3.6 0 0 1-.9-7C36.7 6 57 8.4 61.5 26a3.6 3.6 0 0 1-3.4 4.4"/>
      <path id="Fill-63" fill="#FFFFFE" d="M144.3 38.6h-.6c-2-.4-3.3-2.2-3-4.1.6-3.2 0-5.6-1.8-7.4-5-5.4-18.5-5.3-23.3-4.8a3.6 3.6 0 0 1-.7-7.1c.2 0 5-.5 11 0 8.4.7 14.5 3 18.2 7 3.3 3.5 4.5 8 3.7 13.4-.3 1.8-1.8 3-3.5 3"/>
      </g>
      <g id="Mouth" transform="translate(110 143.5)">
      <path id="Fill-76" fill="#D75346" d="M27.8 0A14 14 0 0 1 0 0h27.8"/>
      <path id="Fill-77" fill="#E69589" d="M22.2 10.8a13.9 13.9 0 0 1-16.5 0 13.9 13.9 0 0 1 16.5 0"/>
      <path id="Fill-78" fill="#FFFDF8" d="M27.8 0a14 14 0 0 1-.6 3.8H.6A14 14 0 0 1 0 0h27.8"/>
      </g>

  </svg>
  </div>
  <div id="moon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
      <g>
      <path id="Fill-7" fill="#FDF49C" d="M0 84.5a84.5 84.5 0 1 0 169 0 84.5 84.5 0 0 0-169 0"/>
      <path id="Fill-8" fill="#DED985" d="M169 84.5a84.5 84.5 0 0 1-153 49.7 84.5 84.5 0 0 0 113.7-121 84.5 84.5 0 0 1 39.4 71.3"/>
      <path id="Fill-9" fill="#FDF6AD" d="M153.3 35A84.5 84.5 0 0 0 39.6 156 84.5 84.5 0 1 1 153.3 35"/>
      <path id="Fill-13" fill="#BDB974" d="M85.6 144.2a7 7 0 1 0 14 0 7 7 0 0 0-14 0"/>
      <path id="Fill-14" fill="#BDB974" d="M107.3 138.4a12.8 12.8 0 1 0 25.7 0 12.8 12.8 0 0 0-25.7 0"/>
      <path id="Fill-15" fill="#DED985" d="M94.6 120.5a5 5 0 1 0 10 0 5 5 0 0 0-10 0"/>
      </g>
      <g id="Mouth" transform="translate(51 90.4)">
      <path id="Fill-10" fill="#D75346" d="M27.9 13.6H0A13.8 13.8 0 0 1 5.7 2.7a13.9 13.9 0 0 1 22.1 10.8"/>
      <path id="Fill-11" fill="#E69589" d="M22.2 13.6H5.7a13.9 13.9 0 0 1 16.5 0"/>
      <path id="Fill-12" fill="#FFFDF8" d="M23.5 3.8H4.3c.5-.4.9-.8 1.4-1a13.9 13.9 0 0 1 17.8 1"/>
      </g>
      <g id="Eyes" fill="#152B33" transform="translate(23 58.7)">
      <path id="Fill-16" d="M11.7 7.5C4 7.5.7 4 .6 3.8a2.2 2.2 0 0 1 3.3-3c.3.2 5.7 5.4 20-.6a2.2 2.2 0 0 1 1.7 4.1 36 36 0 0 1-14 3.2"/>
      <path id="Fill-17" d="M72 7.5c-7.6 0-11-3.5-11.2-3.7a2.2 2.2 0 0 1 3.3-3c.3.2 5.7 5.4 20-.6a2.2 2.2 0 0 1 1.7 4.1A36 36 0 0 1 72 7.5"/>
      </g>
    </svg>
  </div>
  
  <div class="stars">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313 212" id="star"  fill="#223F47">
      <path d="M4 45a4 4 0 1 0 8 0 4 4 0 0 0-8 0M305 126a4 4 0 1 0 8 0 4 4 0 0 0-8 0M109.6 53a4 4 0 1 0 8 0 4 4 0 0 0-8 0M178.7 151.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M0 190.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M284.1 212c-.8 0-1.5-.7-1.5-1.6V201a1.5 1.5 0 1 1 3 0v9.4c0 .9-.7 1.5-1.5 1.5"/>
      <path d="M288.8 207.2h-9.4a1.5 1.5 0 0 1 0-3h9.4a1.5 1.5 0 1 1 0 3M186.2 9.7c-.4 0-.8-.2-1.1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.2-2.2l6.6 6.7a1.5 1.5 0 0 1-1 2.6"/>
      <path d="M179.5 9.7c-.4 0-.8-.2-1-.5-.6-.6-.6-1.5 0-2.1L185 .4a1.5 1.5 0 1 1 2.1 2.2l-6.6 6.6c-.3.3-.7.5-1.1.5M241.6 82.2c-.3 0-.7-.2-1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.1-2.2l6.7 6.7a1.5 1.5 0 0 1-1 2.6"/>
      <path d="M235 82.2a1.5 1.5 0 0 1-1-2.6l6.6-6.7a1.5 1.5 0 1 1 2.1 2.2l-6.7 6.6c-.2.3-.6.5-1 .5M48.6 147.9c-.8 0-1.5-.7-1.5-1.5v-9.5a1.5 1.5 0 1 1 3 0v9.5c0 .8-.7 1.5-1.5 1.5"/>
      <path d="M53.3 143.2h-9.4a1.5 1.5 0 1 1 0-3h9.4a1.5 1.5 0 1 1 0 3M127.5 137c0-5.9-4.7-10.6-10.6-10.6 5.9 0 10.6-4.8 10.6-10.6 0 5.8 4.8 10.6 10.6 10.6-5.8 0-10.6 4.7-10.6 10.5"/>
    </svg>
  </div>
  <div class="stars stars2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313 212">
      <path d="M4 45a4 4 0 1 0 8 0 4 4 0 0 0-8 0M305 126a4 4 0 1 0 8 0 4 4 0 0 0-8 0M109.6 53a4 4 0 1 0 8 0 4 4 0 0 0-8 0M178.7 151.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M0 190.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M284.1 212c-.8 0-1.5-.7-1.5-1.6V201a1.5 1.5 0 1 1 3 0v9.4c0 .9-.7 1.5-1.5 1.5"/>
      <path d="M288.8 207.2h-9.4a1.5 1.5 0 0 1 0-3h9.4a1.5 1.5 0 1 1 0 3M186.2 9.7c-.4 0-.8-.2-1.1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.2-2.2l6.6 6.7a1.5 1.5 0 0 1-1 2.6"/>
      <path d="M179.5 9.7c-.4 0-.8-.2-1-.5-.6-.6-.6-1.5 0-2.1L185 .4a1.5 1.5 0 1 1 2.1 2.2l-6.6 6.6c-.3.3-.7.5-1.1.5M241.6 82.2c-.3 0-.7-.2-1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.1-2.2l6.7 6.7a1.5 1.5 0 0 1-1 2.6"/>
      <path d="M235 82.2a1.5 1.5 0 0 1-1-2.6l6.6-6.7a1.5 1.5 0 1 1 2.1 2.2l-6.7 6.6c-.2.3-.6.5-1 .5M48.6 147.9c-.8 0-1.5-.7-1.5-1.5v-9.5a1.5 1.5 0 1 1 3 0v9.5c0 .8-.7 1.5-1.5 1.5"/>
      <path d="M53.3 143.2h-9.4a1.5 1.5 0 1 1 0-3h9.4a1.5 1.5 0 1 1 0 3M127.5 137c0-5.9-4.7-10.6-10.6-10.6 5.9 0 10.6-4.8 10.6-10.6 0 5.8 4.8 10.6 10.6 10.6-5.8 0-10.6 4.7-10.6 10.5"/>
    </svg>
  </div>
</div>

<!-- <div class="controls">
  <button id="trigger" class="button" type="button">Demo</button>
</div> -->

body {
  overflow: hidden;
}

#sky {
  --background: #26B8CE;
  height: 100vh;
  width: 100vw;
  transition: background 250ms ease;
  background: var(--background);
}

#moon, #sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 1s ease;
  z-index: 2;
}

#moon {
  --moveMoon: translate(200%, 200%);
  width: 33vw;
  height: 33vw;
  transform: var(--moveMoon);
}

#sun {
  --move: translate(-50%, -50%);
  width: 50vw;
  height: 50vw;
  transform: var(--move);
  
  #rays {
    animation: rotateRays 7s linear infinite;
    transform: rotate(180deg);
    transform-origin: center;
  }
}

@keyframes rotateRays {
  0% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(0deg);
  }
}

.cloud {
  --moveCloud: translate(0%, 0%);
  width: 20vw;
  top: 35vh;
  left: 20vw;
  position: absolute;
  transform: var(--moveCloud);
  transition: 1.5s ease-in-out;
  
  &.cloud2 {
    top: 25vh;
    left: 60vw;
    transform: var(--moveCloud);
  }
  
  &.cloud3 {
    top: 65vh;
    left: 56vw;
    transform: var(--moveCloud);

  }
}

.stars {
  --visibility: 0;
  --delay: 0;
  width: 60vw;
  opacity: var(--visibility);
  transition: opacity 250ms 1s ease;
  transition-delay: var(--delay);
  position: absolute;
  top: 0;
  left: 0;
  
  &.stars2 {
    opacity: var(--visibility);
    top: 0;
    left: 50%;
    transform: rotate(-90deg);
  }
  
  path {
    fill: #223F47;
  }
}




// Toggle
$body-color: #25abc3;

.controls {
  position: absolute;
  bottom: 10px;
  z-index: 100;
  display: block;
  width: 100%;
  text-align: center;
}

.button {
  border: 1px solid black;
  padding: 10px;
  background:$body-color;
  color: back;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 200;
  width: 190px;
  
  & + button {
    margin-top: 10px;
  }

  &:hover,
  &:focus {
    background: black;
    color: white;
  }
}

// This only works behind a flag in chrome and will not work inside Codepen's editor, you need to open in debug mode
// This is behind the #enable-generic-sensor-extra-classes flag in chrome://flags.
// More information here: https://www.chromestatus.com/feature/5298357018820608
let sensor = null;
var sky = document.getElementById("sky");
var sun = document.getElementById("sun");
var moon = document.getElementById("moon");
var cloud = document.getElementsByClassName("cloud");
var stars = document.getElementsByClassName("stars");

if (window.AmbientLightSensor) {
  console.log('supported');
}

try {
  const sensor = new AmbientLightSensor();
      console.log('before reading');

  sensor.onreading = () => {
    console.log(sensor.illuminance);
    if (sensor.illuminance < 500) {
      sky.style.setProperty("--background", "#152B33");
      sun.style.setProperty("--move", "translate(-200%, -200%)");
      moon.style.setProperty("--moveMoon", "translate(-50%, -50%)");
      cloud[0].style.setProperty("--moveCloud", "translate(-200%, 0%)");
      cloud[1].style.setProperty("--moveCloud", "translate(-450%, 0%)");
      cloud[2].style.setProperty("--moveCloud", "translate(300%, 0%)");
      stars[0].style.setProperty("--visibility", "1");
      stars[0].style.setProperty("--delay", "1s");
      stars[1].style.setProperty("--visibility", "1");
      stars[1].style.setProperty("--delay", "1s");
    } else if (sensor.illuminance > 500) {
      sky.style.setProperty("--background", "#26B8CE");
      sun.style.setProperty("--move", "translate(-50%, -50%)");
      moon.style.setProperty("--moveMoon", "translate(200%, 200%)");
      cloud[0].style.setProperty("--moveCloud", "translate(0%, 0%)");
      cloud[1].style.setProperty("--moveCloud", "translate(0%, 0%)");
      cloud[2].style.setProperty("--moveCloud", "translate(0%, 0%)");
      stars[0].style.setProperty("--visibility", "0");
      stars[0].style.setProperty("--delay", "0");
      stars[1].style.setProperty("--visibility", "0");
      stars[1].style.setProperty("--delay", "0");
    } 
    
    // else {
    //  sky.style.setProperty("--background", "#26B8CE");
    //  sun.style.setProperty("--move", "translate(-50%, -50%)");
    //  moon.style.setProperty("--moveMoon", "translate(200%, 200%)");
    //  cloud[0].style.setProperty("--moveCloud", "translate(0%, 0%)");
    //  cloud[1].style.setProperty("--moveCloud", "translate(0%, 0%)");
    //  cloud[2].style.setProperty("--moveCloud", "translate(0%, 0%)");
    //  stars[0].style.setProperty("--visibility", "0");
    //  stars[0].style.setProperty("--delay", "0");
    //  stars[1].style.setProperty("--visibility", "0");
    //  stars[1].style.setProperty("--delay", "0");
    // }
    console.log("Current light level:", sensor.illuminance);
  };
    sensor.onerror = (event) => {
    console.log(event.error.name, event.error.message);
    };
  sensor.start();
    console.log(sensor.activated)

} catch (error) {
  console.log(error);
  console.log("failed");
}