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

              
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="direction" viewBox="0 0 60 60">
    <path d="M56.073,12.001L19.567,7.067C19.384,7.023,19.194,7,19,7c-0.969,0-1.797,0.581-2.49,1.55L6,16.057V9.899
	C8.279,9.434,10,7.414,10,5c0-2.757-2.243-5-5-5S0,2.243,0,5c0,2.414,1.721,4.434,4,4.899V48H2v6H0v6h10v-6H8v-6H6V20.414
	l9.797,9.797C16.603,31.916,17.671,33,19,33c0.194,0,0.384-0.023,0.567-0.067l36.506-4.934C57.574,27.965,60,26.848,60,20
	S57.574,12.035,56.073,12.001z M8,58H2v-2h6V58z M4,54v-4h2v4H4z M50,20c0,2.511-0.283,4.924-0.781,6.915l-4.063,0.548
	C45.701,25.309,46,22.726,46,20c0-2.723-0.298-5.304-0.843-7.456l4.063,0.549C49.718,15.083,50,17.492,50,20z M44,20
	c0,2.871-0.364,5.649-0.999,7.753l-4.08,0.55C39.611,26.019,40,23.101,40,20c0-3.098-0.388-6.015-1.077-8.299l4.08,0.551
	C43.637,14.356,44,17.131,44,20z M21.978,21.265c-0.005,0.137-0.014,0.265-0.02,0.399c-0.012,0.268-0.024,0.536-0.042,0.793
	c-0.011,0.153-0.025,0.298-0.038,0.447c-0.019,0.226-0.037,0.454-0.06,0.671c-0.016,0.155-0.036,0.301-0.055,0.452
	c-0.024,0.199-0.048,0.399-0.075,0.59c-0.022,0.15-0.046,0.291-0.069,0.436c-0.029,0.18-0.058,0.361-0.09,0.533
	c-0.026,0.14-0.053,0.272-0.08,0.407c-0.033,0.164-0.067,0.328-0.102,0.484c-0.029,0.13-0.06,0.254-0.091,0.379
	c-0.036,0.148-0.073,0.294-0.111,0.435c-0.032,0.119-0.066,0.233-0.099,0.347c-0.039,0.133-0.079,0.263-0.119,0.389
	c-0.035,0.107-0.07,0.211-0.105,0.312c-0.041,0.118-0.083,0.234-0.125,0.345c-0.036,0.094-0.073,0.186-0.109,0.275
	c-0.043,0.104-0.086,0.205-0.13,0.301c-0.037,0.082-0.074,0.163-0.111,0.239c-0.044,0.09-0.088,0.175-0.132,0.257
	c-0.037,0.069-0.074,0.137-0.111,0.201c-0.045,0.077-0.089,0.147-0.134,0.215c-0.036,0.055-0.072,0.111-0.107,0.16
	c-0.045,0.063-0.089,0.118-0.134,0.172c-0.034,0.042-0.068,0.085-0.102,0.121c-0.045,0.049-0.089,0.088-0.132,0.127
	c-0.031,0.028-0.063,0.059-0.094,0.083c-0.032,0.024-0.063,0.039-0.094,0.058l-1.859-1.859C16.679,27.212,16,24.165,16,20
	c0-5.033,0.99-8.439,1.931-10.008l1.298-0.927c0.014,0.006,0.027,0.015,0.041,0.023c0.042,0.023,0.085,0.046,0.129,0.079
	c0.031,0.023,0.062,0.054,0.094,0.083c0.044,0.039,0.087,0.078,0.132,0.127c0.033,0.036,0.068,0.08,0.102,0.121
	c0.044,0.054,0.089,0.109,0.134,0.172c0.036,0.05,0.072,0.105,0.107,0.16c0.044,0.068,0.089,0.138,0.134,0.215
	c0.037,0.063,0.074,0.132,0.111,0.201c0.044,0.082,0.088,0.167,0.132,0.257c0.037,0.076,0.074,0.157,0.111,0.239
	c0.044,0.096,0.087,0.197,0.13,0.301c0.037,0.089,0.073,0.181,0.109,0.275c0.042,0.111,0.084,0.226,0.125,0.345
	c0.036,0.102,0.071,0.205,0.105,0.312c0.041,0.125,0.08,0.256,0.119,0.389c0.034,0.113,0.067,0.228,0.099,0.347
	c0.038,0.14,0.075,0.287,0.111,0.435c0.031,0.125,0.062,0.249,0.091,0.379c0.035,0.156,0.069,0.32,0.102,0.484
	c0.027,0.134,0.055,0.267,0.08,0.407c0.032,0.172,0.061,0.353,0.09,0.533c0.023,0.145,0.047,0.286,0.069,0.436
	c0.027,0.191,0.051,0.391,0.075,0.59c0.018,0.15,0.038,0.297,0.055,0.452c0.023,0.217,0.041,0.445,0.06,0.671
	c0.013,0.149,0.027,0.294,0.038,0.447c0.018,0.257,0.03,0.526,0.042,0.793c0.006,0.134,0.015,0.262,0.02,0.399
	C21.992,19.145,22,19.566,22,20S21.992,20.855,21.978,21.265z M2,5c0-1.654,1.346-3,3-3s3,1.346,3,3S6.654,8,5,8S2,6.654,2,5z
	 M6.542,18.127l8.409-6.006C14.322,14.408,14,17.21,14,20c0,2.116,0.188,4.237,0.551,6.137L6.542,18.127z M22.066,30.501
	c0.133-0.26,0.26-0.538,0.379-0.83c0.044-0.106,0.084-0.219,0.125-0.329c0.087-0.23,0.171-0.466,0.251-0.712
	c0.041-0.126,0.08-0.253,0.119-0.382c0.077-0.259,0.149-0.526,0.218-0.799c0.03-0.119,0.061-0.234,0.09-0.356
	c0.093-0.396,0.179-0.802,0.254-1.22c0.001-0.004,0.001-0.008,0.002-0.011c0.075-0.416,0.139-0.843,0.197-1.276
	c0.018-0.135,0.033-0.273,0.049-0.409c0.037-0.31,0.071-0.622,0.1-0.938c0.014-0.156,0.027-0.312,0.04-0.469
	c0.025-0.318,0.044-0.638,0.06-0.96c0.007-0.142,0.016-0.283,0.021-0.426C23.989,20.922,24,20.461,24,20s-0.011-0.922-0.029-1.382
	c-0.005-0.143-0.014-0.284-0.021-0.426c-0.016-0.322-0.036-0.642-0.06-0.96c-0.012-0.157-0.025-0.313-0.04-0.469
	c-0.029-0.316-0.063-0.628-0.1-0.938c-0.016-0.137-0.031-0.274-0.049-0.409c-0.058-0.433-0.122-0.861-0.197-1.276
	c-0.001-0.004-0.001-0.008-0.002-0.011c-0.076-0.419-0.162-0.824-0.254-1.22c-0.028-0.121-0.06-0.237-0.09-0.356
	c-0.069-0.273-0.141-0.54-0.218-0.799c-0.039-0.13-0.078-0.256-0.119-0.382c-0.079-0.246-0.163-0.482-0.251-0.712
	c-0.042-0.11-0.082-0.223-0.125-0.329c-0.12-0.292-0.246-0.57-0.379-0.83c-0.013-0.025-0.024-0.056-0.037-0.081l14.685,1.985
	C37.521,13.554,38,16.703,38,20c0,3.299-0.48,6.45-1.288,8.602l-14.683,1.98C22.042,30.557,22.053,30.526,22.066,30.501z M56,26
	l-4.657,0.628C51.764,24.642,52,22.353,52,20c0-2.35-0.235-4.636-0.655-6.62l4.521,0.611L56,14c0.923,0,2,1.571,2,6S56.923,26,56,26z"/>
  </symbol>

  <symbol id="clouds" viewBox="0 0 59.957 59.957">
<path d="M34.354,19.802c-0.746-0.462-1.548-0.785-2.378-0.981c0.2-5.063,4.37-9.124,9.481-9.124c5.094,0,9.253,4.033,9.478,9.073
		c-3.929,0.504-6.978,3.863-6.978,7.927c0,0.552,0.448,1,1,1s1-0.448,1-1c0-3.309,2.691-6,6-6s6,2.691,6,6c0,0.552,0.448,1,1,1
		s1-0.448,1-1c0-4.079-3.071-7.449-7.022-7.934c-0.231-6.139-5.283-11.066-11.478-11.066c-6.143,0-11.161,4.844-11.47,10.911
		c-0.558,0.012-1.119,0.078-1.676,0.208c-2.08,0.49-3.845,1.76-4.97,3.577c-0.096,0.155-0.179,0.316-0.263,0.475
		c-2.88-0.583-5.844,0.433-7.746,2.743c-1.288,1.565-1.873,3.476-1.808,5.358c-4.631-0.838-9.342,1.223-11.847,5.344
		c-1.595,2.625-2.073,5.714-1.345,8.699c0.728,2.984,2.575,5.506,5.2,7.101c0.163,0.099,0.342,0.146,0.519,0.146
		c0.338,0,0.667-0.171,0.855-0.48c0.287-0.472,0.137-1.087-0.335-1.374c-2.169-1.318-3.694-3.401-4.296-5.866
		s-0.207-5.017,1.111-7.186c2.198-3.616,6.45-5.315,10.496-4.259c0.448,1.432,1.297,2.756,2.539,3.779
		c0.186,0.153,0.411,0.228,0.635,0.228c0.289,0,0.575-0.124,0.772-0.364c0.351-0.426,0.29-1.057-0.136-1.408
		c-1.016-0.836-1.679-1.941-1.985-3.127c-0.001-0.015-0.008-0.028-0.01-0.043c-0.447-1.785-0.079-3.75,1.178-5.276
		c1.355-1.645,3.431-2.421,5.486-2.122c-0.284,1.194-0.296,2.446-0.006,3.675c0.108,0.46,0.519,0.771,0.973,0.771
		c0.076,0,0.153-0.008,0.23-0.026c0.538-0.126,0.871-0.665,0.745-1.203c-0.367-1.56-0.104-3.169,0.739-4.532
		c0.844-1.363,2.167-2.315,3.728-2.682c1.562-0.369,3.17-0.105,4.532,0.738c1.363,0.844,2.315,2.167,2.682,3.728
		c0.126,0.537,0.664,0.871,1.203,0.745c0.538-0.126,0.871-0.665,0.745-1.203C37.441,22.692,36.171,20.927,34.354,19.802z"/>
	<path d="M54.9,43.779c-0.458-3.979-3.843-7.082-7.943-7.082c-4.411,0-8,3.589-8,8c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-3.309,2.691-6,6-6c3.003,0,5.49,2.219,5.925,5.102c-2.797,0.509-4.925,2.957-4.925,5.898c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-2.206,1.794-4,4-4s4,1.794,4,4c0,0.552,0.448,1,1,1s1-0.448,1-1C59.957,46.71,57.761,44.234,54.9,43.779z"/>
  </symbol>

  <symbol id="wind" viewBox="0 0 50 50">
<path d="M31,20c4.962,0,9-4.038,9-9s-4.038-9-9-9c-0.552,0-1,0.448-1,1s0.448,1,1,1c3.86,0,7,3.14,7,7s-3.14,7-7,7H9
		c-4.962,0-9,4.038-9,9c0,0.552,0.448,1,1,1s1-0.448,1-1c0-3.86,3.14-7,7-7H31z"/>
	<path d="M38,30H18c-0.552,0-1,0.448-1,1s0.448,1,1,1h20c3.86,0,7,3.14,7,7s-3.14,7-7,7c-0.552,0-1,0.448-1,1s0.448,1,1,1
		c4.962,0,9-4.038,9-9S42.962,30,38,30z"/>
	<path d="M27,12c0.552,0,1-0.448,1-1c0-1.654,1.346-3,3-3s3,1.346,3,3s-1.346,3-3,3c-0.552,0-1,0.448-1,1s0.448,1,1,1
		c2.757,0,5-2.243,5-5s-2.243-5-5-5s-5,2.243-5,5C26,11.552,26.448,12,27,12z"/>
	<path d="M43,39c0-2.757-2.243-5-5-5c-0.552,0-1,0.448-1,1s0.448,1,1,1c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3
		c0-0.552-0.448-1-1-1s-1,0.448-1,1c0,2.757,2.243,5,5,5S43,41.757,43,39z"/>
	<path d="M32,34h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S32.552,34,32,34z"/>
	<path d="M21,16h6c0.552,0,1-0.448,1-1s-0.448-1-1-1h-6c-0.552,0-1,0.448-1,1S20.448,16,21,16z"/>
	<path d="M41,23c0-0.552-0.448-1-1-1H9c-0.552,0-1,0.448-1,1s0.448,1,1,1h31C40.552,24,41,23.552,41,23z"/>
	<path d="M49,26H13c-0.552,0-1,0.448-1,1s0.448,1,1,1h36c0.552,0,1-0.448,1-1S49.552,26,49,26z"/>
  </symbol>

  <symbol id="light-rain" viewBox="0 0 496 496">
    <path d="M413.976,177.096c-10.832-63.912-65.816-111.512-130.944-112.96C265.888,34.344,234.528,16,200,16
				c-40.936,0-77.176,26.096-90.528,64.28c-20.736-2.12-40.216,7.472-51.624,24.064C25.08,107.424,0,134.592,0,168
				c0,20.104,9.424,38.616,25.04,50.616C9.568,234.48,0,256.136,0,280c0,48.52,39.48,88,88,88h312c52.936,0,96-43.064,96-96
				C496,224.432,460.464,183.928,413.976,177.096z M16,168c0-26.144,20.496-47.192,46.648-47.92l4.472-0.128l2.232-3.872
				C76.504,103.696,89.776,96,104,96c3.016,0,6.032,0.368,9.224,1.12l7.56,1.776l2-7.504C132.104,56.424,163.848,32,200,32
				c25.88,0,49.584,12.416,64.488,32.984c-53.496,6.096-98.6,43.224-114.44,95.288c-26.728-2.352-51.504,10.272-65.904,31.816
				c-17.272,0.744-33.248,6.52-46.56,15.856C24.192,199.096,16,184.24,16,168z M400,352H88c-39.696,0-72-32.296-72-72
				c0-39.704,32.304-72,71.688-72.008l5.536,0.04l2.312-3.992C105.544,186.744,124.112,176,144,176
				c3.352,0,6.856,0.344,10.416,1.008l7.424,1.4l1.824-7.336C176.96,117.456,224.8,80,280,80c60.504,0,111.672,45.28,119.008,105.32
				l0.56,4.552C399.84,193.216,400,196.584,400,200c0,66.168-53.832,120-120,120v16c74.992,0,136-61.008,136-136
				c0-2.128-0.176-4.2-0.272-6.296C452.432,201.088,480,233.768,480,272C480,316.112,444.112,352,400,352z"/>
			<path d="M128,384.456l-27.44,45.736c-2.984,4.976-4.56,10.656-4.56,16.456V448c0,17.648,14.352,32,32,32s32-14.352,32-32v-1.352
				c0-5.8-1.576-11.488-4.56-16.472L128,384.456z M144,448c0,8.824-7.176,16-16,16c-8.824,0-16-7.176-16-16v-1.352
				c0-2.896,0.792-5.752,2.28-8.232L128,415.544l13.712,22.856c1.496,2.496,2.288,5.352,2.288,8.248V448z"/>
			<path d="M208,384.456l-27.44,45.736c-2.984,4.976-4.56,10.656-4.56,16.456V448c0,17.648,14.352,32,32,32s32-14.352,32-32v-1.352
				c0-5.8-1.576-11.488-4.56-16.472L208,384.456z M224,448c0,8.824-7.176,16-16,16c-8.824,0-16-7.176-16-16v-1.352
				c0-2.896,0.792-5.752,2.28-8.232L208,415.544l13.712,22.856c1.496,2.496,2.288,5.352,2.288,8.248V448z"/>
			<path d="M288,384.456l-27.44,45.736c-2.984,4.976-4.56,10.656-4.56,16.456V448c0,17.648,14.352,32,32,32s32-14.352,32-32v-1.352
				c0-5.8-1.576-11.488-4.56-16.472L288,384.456z M304,448c0,8.824-7.176,16-16,16c-8.824,0-16-7.176-16-16v-1.352
				c0-2.896,0.792-5.752,2.28-8.232L288,415.544l13.712,22.856c1.496,2.496,2.288,5.352,2.288,8.248V448z"/>
			<path d="M368,384.456l-27.44,45.736c-2.984,4.976-4.56,10.656-4.56,16.456V448c0,17.648,14.352,32,32,32s32-14.352,32-32v-1.352
				c0-5.8-1.576-11.488-4.56-16.472L368,384.456z M384,448c0,8.824-7.176,16-16,16c-8.824,0-16-7.176-16-16v-1.352
				c0-2.896,0.792-5.752,2.28-8.232L368,415.544l13.712,22.856c1.496,2.496,2.288,5.352,2.288,8.248V448z"/>
  </symbol>

  <symbol id="sunrise" viewBox="0 0 60 60">
    <path d="M30,11c0.552,0,1-0.448,1-1V4c0-0.552-0.448-1-1-1s-1,0.448-1,1v6C29,10.552,29.448,11,30,11z"/>
    <path d="M52,33c0,0.552,0.448,1,1,1h6c0.552,0,1-0.448,1-1s-0.448-1-1-1h-6C52.448,32,52,32.448,52,33z"/>
    <path d="M1,34h6c0.552,0,1-0.448,1-1s-0.448-1-1-1H1c-0.552,0-1,0.448-1,1S0.448,34,1,34z"/>
    <path d="M46.264,17.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0
      l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,17.639,46.008,17.736,46.264,17.736z"/>
    <path d="M13.029,17.443c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414
      l-5.736-5.736c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L13.029,17.443z"/>
    <path d="M50.251,24.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
      c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,23.309,50.035,23.896,50.251,24.404z"/>
    <path d="M5.519,24.188L8.3,25.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
      c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.512-0.207-1.095,0.04-1.302,0.553C4.759,23.397,5.006,23.98,5.519,24.188z"/>
    <path d="M20.093,12.219c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311
      l-1.172-2.762c-0.216-0.509-0.804-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311L20.093,12.219z"/>
    <path d="M38.241,12.602c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
      c0.207-0.512-0.041-1.095-0.553-1.302c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,11.3
      C37.481,11.812,37.729,12.395,38.241,12.602z"/>
    <path d="M59,40h-9.23c0.802-2.252,1.23-4.596,1.23-7c0-11.58-9.42-21-21-21S9,21.42,9,33c0,2.404,0.428,4.748,1.23,7H1
      c-0.552,0-1,0.448-1,1s0.448,1,1,1h10.021h5.755h26.448h5.755H59c0.552,0,1-0.448,1-1S59.552,40,59,40z M17.89,40
      C16.652,37.866,16,35.458,16,33c0-7.72,6.28-14,14-14s14,6.28,14,14c0,2.458-0.652,4.866-1.89,7H17.89z M44.365,40
      C45.433,37.819,46,35.433,46,33c0-8.822-7.178-16-16-16s-16,7.178-16,16c0,2.433,0.567,4.819,1.635,7h-3.293
      C11.451,37.763,11,35.411,11,33c0-10.477,8.523-19,19-19s19,8.523,19,19c0,2.411-0.451,4.763-1.341,7H44.365z"/>
    <path d="M54,45H6c-0.552,0-1,0.448-1,1s0.448,1,1,1h48c0.552,0,1-0.448,1-1S54.552,45,54,45z"/>
    <path d="M49,50H11c-0.552,0-1,0.448-1,1s0.448,1,1,1h38c0.552,0,1-0.448,1-1S49.552,50,49,50z"/>
    <path d="M45,55H15c-0.552,0-1,0.448-1,1s0.448,1,1,1h30c0.552,0,1-0.448,1-1S45.552,55,45,55z"/>
  </symbol>

  <symbol id="sunset" viewBox="0 0 60 60">
    <path d="M54,46.503H6c-0.553,0-1,0.448-1,1s0.447,1,1,1h48c0.553,0,1-0.448,1-1S54.553,46.503,54,46.503z"/>
    <path d="M49,51.503H11c-0.553,0-1,0.448-1,1s0.447,1,1,1h38c0.553,0,1-0.448,1-1S49.553,51.503,49,51.503z"/>
    <path d="M45,56.503H15c-0.553,0-1,0.448-1,1s0.447,1,1,1h30c0.553,0,1-0.448,1-1S45.553,56.503,45,56.503z"/>
    <path d="M59,41.503h-7.819c2.731-2.951,4.721-6.509,5.784-10.434l0.586-2.252l-2.061,1.129c-0.243,0.134-0.486,0.268-0.735,0.393
		c-11.339,5.68-25.185,1.072-30.864-10.268c-2.531-5.056-3.111-10.848-1.632-16.306l0.615-2.268l-2.061,1.129
		c-11.84,6.488-16.377,21.03-10.33,33.105c1.061,2.118,2.403,4.05,3.996,5.772H1c-0.553,0-1,0.448-1,1s0.447,1,1,1h15.545H49.13H59
		c0.553,0,1-0.448,1-1S59.553,41.503,59,41.503z M17.308,41.503c-2.078-1.9-3.771-4.142-5.035-6.667
		c-5.217-10.416-1.874-22.825,7.54-29.253c-0.892,5.224-0.103,10.605,2.289,15.384c5.953,11.887,20.16,16.964,32.219,11.779
		c-1.274,3.343-3.304,6.334-5.953,8.757H17.308z"/>
  </symbol>

  <symbol id="cog" viewBox="0 0 612 612">
    <path fill="currentColor" d="M342.982,612h-73.975c-14.775,0-27.011-11.073-28.467-25.747l-7.584-45.446c-14.249-4.43-28.093-10.184-41.32-17.141
			l-38.064,27.183c-4.551,3.772-10.982,6.077-17.576,6.077c-7.646,0-14.825-2.982-20.236-8.393l-52.303-52.304
			c-10.446-10.446-11.255-26.93-1.901-38.357l26.778-37.508c-6.978-13.247-12.722-27.102-17.141-41.311l-46.114-7.695
			C11.083,370.014,0,357.777,0,342.982v-73.964c0-14.775,11.073-27.011,25.747-28.478l45.446-7.605
			c4.439-14.269,10.193-28.113,17.131-41.3l-27.173-38.064C52.191,142.7,53,126.217,63.457,115.78l52.313-52.323
			c10.083-10.062,27.345-10.901,38.327-1.921l37.559,26.789c13.177-6.947,27.021-12.691,41.3-17.131l7.675-46.104
			C241.997,11.073,254.243,0,269.018,0h73.974c14.755,0,26.991,11.063,28.478,25.727l7.595,45.467
			c14.259,4.439,28.103,10.184,41.29,17.131l38.074-27.183c4.541-3.762,10.973-6.058,17.565-6.058
			c7.646,0,14.825,2.973,20.226,8.373l52.303,52.323c10.437,10.406,11.275,26.879,1.941,38.317l-26.788,37.539
			c6.957,13.187,12.691,27.031,17.131,41.3l46.114,7.696C600.937,242.007,612,254.243,612,269.018v73.964
			c0,14.795-11.073,27.021-25.768,28.446l-45.426,7.595c-4.439,14.279-10.184,28.134-17.131,41.32l27.183,38.055
			c8.95,10.911,8.11,27.405-2.346,37.821l-52.293,52.293c-10.042,10.052-27.345,10.941-38.357,1.911l-37.508-26.769
			c-13.228,6.968-27.071,12.722-41.29,17.142l-7.706,46.124C369.983,600.927,357.747,612,342.982,612z M190.907,501.641
			c1.699,0,3.408,0.424,4.945,1.294c15.412,8.637,31.814,15.442,48.794,20.245c3.762,1.062,6.573,4.207,7.22,8.07l8.707,52.344
			c0.506,4.874,4.177,8.181,8.434,8.181h73.975c4.257,0,7.918-3.297,8.333-7.514l8.828-53.011c0.637-3.853,3.458-6.998,7.221-8.06
			c16.938-4.794,33.341-11.6,48.763-20.246c3.408-1.921,7.636-1.688,10.821,0.597l43.19,30.854c4.359,3.509,8.799,2.78,11.751-0.162
			l52.313-52.313c3.074-3.063,3.316-7.888,0.586-11.234l-31.268-43.718c-2.286-3.186-2.508-7.402-0.597-10.83
			c8.636-15.352,15.432-31.754,20.226-48.764c1.062-3.772,4.206-6.583,8.079-7.23l52.354-8.728c4.875-0.506,8.182-4.156,8.182-8.414
			v-73.964c0-4.257-3.297-7.928-7.514-8.343l-53.011-8.818c-3.873-0.647-7.009-3.458-8.08-7.23
			c-4.794-17.01-11.6-33.413-20.226-48.743c-1.911-3.429-1.688-7.646,0.597-10.831l30.874-43.211
			c3.125-3.863,2.872-8.677-0.182-11.731L481.91,77.797c-2.942-2.943-8.009-3.195-11.205-0.576l-43.747,31.278
			c-3.186,2.286-7.413,2.508-10.82,0.597c-15.361-8.626-31.765-15.432-48.764-20.246c-3.762-1.052-6.573-4.207-7.221-8.07
			l-8.717-52.343c-0.536-4.976-4.126-8.211-8.454-8.211h-73.975c-4.338,0-7.918,3.226-8.343,7.514l-8.798,53
			c-0.637,3.863-3.458,7.008-7.22,8.07c-17.03,4.824-33.433,11.62-48.753,20.246c-3.438,1.912-7.655,1.689-10.831-0.597
			l-43.232-30.874c-4.349-3.479-8.808-2.781-11.751,0.182L77.767,130.08c-3.054,3.054-3.287,7.868-0.556,11.195l31.258,43.758
			c2.286,3.195,2.508,7.412,0.597,10.831c-8.616,15.331-15.422,31.733-20.246,48.753c-1.052,3.762-4.207,6.574-8.07,7.221
			l-52.343,8.727c-4.956,0.526-8.181,4.116-8.181,8.455v73.964c0,4.328,3.216,7.908,7.493,8.322l53.021,8.818
			c3.863,0.638,7.008,3.459,8.07,7.23c4.783,16.919,11.589,33.332,20.246,48.784c1.912,3.418,1.689,7.625-0.597,10.811
			L77.605,470.14c-3.155,3.883-2.913,8.696,0.151,11.761l52.313,52.303c2.973,2.963,8.02,3.226,11.205,0.576l43.748-31.258
			C186.781,502.277,188.844,501.641,190.907,501.641z M306.01,427.049c-66.764,0-121.079-54.305-121.079-121.059
			c0-66.764,54.315-121.079,121.079-121.079c66.765,0,121.069,54.315,121.069,121.079
			C427.069,372.733,372.764,427.049,306.01,427.049z M306.01,205.136c-55.609,0-100.854,45.245-100.854,100.854
			c0,55.6,45.244,100.833,100.854,100.833c55.6,0,100.844-45.233,100.844-100.833C406.844,250.38,361.609,205.136,306.01,205.136z"/>
  </symbol>

  <symbol id="refresh" viewBox="0 0 489.711 489.711">
    <path fill="#fff" d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13
			c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13
			c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1
			c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z"/>
		<path fill="#fff" d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7
			c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8
			c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1
			c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4
			C456.056,357.911,481.656,274.811,462.456,195.511z"/>
  </symbol>

  <symbol id="error" viewBox="0 0 52 52">
		<path fill="#fff" d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26
		S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/>
		<path fill="#fff" d="M35.707,16.293c-0.391-0.391-1.023-0.391-1.414,0L26,24.586l-8.293-8.293c-0.391-0.391-1.023-0.391-1.414,0
		s-0.391,1.023,0,1.414L24.586,26l-8.293,8.293c-0.391,0.391-0.391,1.023,0,1.414C16.488,35.902,16.744,36,17,36
		s0.512-0.098,0.707-0.293L26,27.414l8.293,8.293C34.488,35.902,34.744,36,35,36s0.512-0.098,0.707-0.293
		c0.391-0.391,0.391-1.023,0-1.414L27.414,26l8.293-8.293C36.098,17.316,36.098,16.684,35.707,16.293z"/>
  </symbol>

	<symbol id="clear-sky" viewBox="0 0 60 60">
		<path d="M30,9C18.42,9,9,18.42,9,30s9.42,21,21,21s21-9.42,21-21S41.58,9,30,9z M30,49c-10.477,0-19-8.523-19-19s8.523-19,19-19
		s19,8.523,19,19S40.477,49,30,49z"/>
	<path d="M30,14c-8.822,0-16,7.178-16,16s7.178,16,16,16s16-7.178,16-16S38.822,14,30,14z M30,44c-7.72,0-14-6.28-14-14
		s6.28-14,14-14s14,6.28,14,14S37.72,44,30,44z"/>
	<path d="M30,8c0.552,0,1-0.448,1-1V1c0-0.552-0.448-1-1-1s-1,0.448-1,1v6C29,7.552,29.448,8,30,8z"/>
	<path d="M30,52c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1v-6C31,52.448,30.552,52,30,52z"/>
	<path d="M59,29h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S59.552,29,59,29z"/>
	<path d="M8,30c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h6C7.552,31,8,30.552,8,30z"/>
	<path d="M46.264,14.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0
		l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,14.639,46.008,14.736,46.264,14.736z"/>
	<path d="M13.029,45.557l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C7.488,52.902,7.744,53,8,53s0.512-0.098,0.707-0.293
		l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414S13.42,45.166,13.029,45.557z"/>
	<path d="M46.971,45.557c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736C51.488,52.902,51.744,53,52,53
		s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.971,45.557z"/>
	<path d="M13.029,14.443c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L8.707,7.293
		c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L13.029,14.443z"/>
	<path d="M50.251,21.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
		c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,20.309,50.035,20.896,50.251,21.404z"/>
	<path d="M9.749,38.596c-0.216-0.508-0.803-0.746-1.311-0.53l-2.762,1.172c-0.508,0.216-0.746,0.803-0.53,1.311
		c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172C9.728,39.691,9.965,39.104,9.749,38.596z"/>
	<path d="M54.481,38.813L51.7,37.688c-0.511-0.207-1.095,0.041-1.302,0.553c-0.207,0.512,0.041,1.095,0.553,1.302l2.782,1.124
		c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626C55.241,39.603,54.994,39.02,54.481,38.813z"/>
	<path d="M5.519,21.188L8.3,22.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.513-0.207-1.095,0.04-1.302,0.553C4.759,20.397,5.006,20.98,5.519,21.188z"
		/>
	<path d="M39.907,50.781c-0.216-0.508-0.803-0.745-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311l1.172,2.762
		c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311L39.907,50.781z"/>
	<path d="M20.093,9.219c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311
		l-1.172-2.762c-0.215-0.509-0.802-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311L20.093,9.219z"/>
	<path d="M21.759,50.398c-0.511-0.205-1.095,0.04-1.302,0.553l-1.124,2.782c-0.207,0.512,0.041,1.095,0.553,1.302
		c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782C22.519,51.188,22.271,50.605,21.759,50.398z"/>
	<path d="M38.241,9.602c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
		c0.207-0.512-0.041-1.095-0.553-1.302c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,8.3C37.481,8.812,37.729,9.395,38.241,9.602z"
		/>
	</symbol>

	<symbol id="few-clouds" viewBox="0 0 59.95 59.95">
	<path d="M34.347,20.695c-0.743-0.461-1.544-0.783-2.37-0.979c0.011-0.281,0.024-0.562,0.06-0.839
		c0.012-0.093,0.028-0.184,0.042-0.276c0.058-0.359,0.132-0.715,0.23-1.065c0.01-0.037,0.018-0.074,0.028-0.11
		c0.121-0.411,0.269-0.814,0.446-1.206c0.007-0.015,0.015-0.03,0.021-0.045c0.174-0.381,0.374-0.751,0.598-1.109
		c0.034-0.055,0.065-0.111,0.1-0.165l0.091-0.144c1.711-2.512,4.593-4.166,7.856-4.166c5.094,0,9.253,4.033,9.478,9.073
		c-3.929,0.504-6.978,3.863-6.978,7.927c0,0.552,0.448,1,1,1s1-0.448,1-1c0-3.309,2.691-6,6-6s6,2.691,6,6c0,0.552,0.448,1,1,1
		s1-0.448,1-1c0-4.079-3.071-7.449-7.022-7.934C52.697,13.517,47.645,8.59,41.45,8.59c-3.551,0-6.73,1.619-8.841,4.156
		c-2.787-3.747-7.107-5.949-11.831-5.949c-8.157,0-14.793,6.636-14.793,14.793c0,3.861,1.483,7.442,4.102,10.169
		c-3.404,0.417-6.534,2.351-8.417,5.449c-3.293,5.419-1.563,12.507,3.855,15.799c0.163,0.099,0.342,0.146,0.519,0.146
		c0.338,0,0.667-0.171,0.855-0.48c0.287-0.472,0.137-1.087-0.335-1.374c-4.477-2.72-5.905-8.575-3.186-13.052
		c2.196-3.614,6.446-5.312,10.489-4.262c0.458,1.471,1.33,2.779,2.547,3.781c0.187,0.153,0.412,0.228,0.635,0.228
		c0.289,0,0.575-0.124,0.772-0.364c0.351-0.426,0.29-1.057-0.136-1.408c-0.989-0.814-1.671-1.9-1.986-3.117
		c-0.004-0.048-0.024-0.09-0.034-0.136c-0.001-0.005-0.002-0.01-0.004-0.014l-0.016-0.071c-0.148-0.674-0.179-1.353-0.101-2.015
		c0.003-0.029,0.009-0.058,0.013-0.087c0.024-0.181,0.056-0.36,0.097-0.537c0.012-0.051,0.025-0.101,0.038-0.151
		c0.04-0.155,0.086-0.308,0.138-0.459c0.02-0.059,0.041-0.118,0.063-0.176c0.054-0.141,0.114-0.28,0.179-0.417
		c0.028-0.06,0.055-0.121,0.086-0.18c0.07-0.137,0.149-0.271,0.23-0.404c0.032-0.052,0.061-0.107,0.095-0.158
		c0.118-0.18,0.245-0.355,0.384-0.524c0.462-0.56,1.013-1.007,1.611-1.359c1.16-0.681,2.518-0.963,3.875-0.764
		c-0.284,1.195-0.296,2.446-0.006,3.676c0.108,0.46,0.519,0.771,0.973,0.771c0.076,0,0.153-0.008,0.23-0.026
		c0.538-0.127,0.871-0.665,0.745-1.203c-0.271-1.152-0.197-2.33,0.199-3.416l0.065-0.165c0.085-0.215,0.184-0.422,0.292-0.623
		c0.015-0.028,0.031-0.056,0.047-0.085c0.072-0.129,0.154-0.251,0.234-0.374c0.176-0.268,0.366-0.525,0.579-0.758
		c0.059-0.065,0.127-0.122,0.189-0.184c0.18-0.181,0.372-0.349,0.573-0.505c0.083-0.065,0.164-0.132,0.251-0.192
		c0.258-0.178,0.529-0.335,0.814-0.471c0.08-0.039,0.162-0.072,0.244-0.107c0.315-0.134,0.638-0.253,0.979-0.333
		c0.335-0.079,0.676-0.127,1.022-0.146c0.005,0,0.009-0.001,0.014-0.001c0.348-0.018,0.701-0.006,1.055,0.037l0.302,0.036
		c0.749,0.129,1.473,0.4,2.139,0.812c1.363,0.844,2.315,2.167,2.682,3.728c0.126,0.537,0.662,0.871,1.203,0.745
		c0.538-0.126,0.871-0.665,0.745-1.203C37.434,23.585,36.164,21.82,34.347,20.695z M20.777,8.797c4.315,0,8.245,2.121,10.63,5.704
		c-0.414,0.741-0.746,1.533-0.989,2.363c-0.023,0.08-0.04,0.161-0.062,0.242c-0.083,0.309-0.156,0.621-0.214,0.94
		c-0.025,0.138-0.043,0.276-0.063,0.415c-0.037,0.262-0.068,0.526-0.087,0.794c-0.006,0.083-0.023,0.164-0.027,0.247
		c-0.269,0.006-0.539,0.025-0.809,0.059c-0.011,0.001-0.022,0.001-0.032,0.003c-0.274,0.035-0.547,0.083-0.82,0.147
		c-0.275,0.065-0.544,0.145-0.808,0.237c-0.043,0.015-0.085,0.035-0.128,0.051c-0.224,0.082-0.445,0.172-0.659,0.273
		c-0.029,0.014-0.057,0.03-0.086,0.044c-0.227,0.11-0.448,0.231-0.662,0.362c-0.018,0.011-0.035,0.023-0.053,0.034
		c-0.221,0.138-0.435,0.286-0.641,0.444c-0.015,0.012-0.03,0.024-0.046,0.036c-0.202,0.158-0.396,0.325-0.583,0.502
		c-0.022,0.021-0.043,0.042-0.064,0.062c-0.173,0.168-0.338,0.344-0.496,0.528c-0.031,0.036-0.061,0.072-0.091,0.108
		c-0.142,0.172-0.277,0.35-0.405,0.535c-0.036,0.051-0.072,0.102-0.106,0.154c-0.046,0.07-0.097,0.134-0.141,0.206
		c-0.073,0.118-0.134,0.241-0.2,0.362c-0.018,0.033-0.04,0.063-0.058,0.096c-0.06-0.012-0.121-0.013-0.181-0.024
		c-0.163-0.029-0.326-0.046-0.49-0.065c-0.216-0.025-0.43-0.046-0.645-0.054c-0.17-0.006-0.337-0.003-0.506,0.002
		c-0.208,0.006-0.415,0.019-0.621,0.041c-0.17,0.018-0.337,0.041-0.505,0.07c-0.203,0.035-0.402,0.08-0.601,0.13
		c-0.164,0.042-0.326,0.084-0.487,0.136c-0.198,0.064-0.391,0.141-0.584,0.221c-0.153,0.063-0.305,0.123-0.454,0.196
		c-0.197,0.096-0.386,0.208-0.575,0.321c-0.134,0.08-0.27,0.153-0.4,0.241c-0.204,0.138-0.396,0.296-0.588,0.455
		c-0.102,0.084-0.211,0.159-0.309,0.249c-0.284,0.259-0.554,0.537-0.804,0.84c-0.162,0.197-0.313,0.401-0.454,0.61
		c-0.052,0.077-0.096,0.157-0.146,0.235c-0.084,0.134-0.168,0.267-0.244,0.405c-0.055,0.1-0.102,0.202-0.153,0.304
		c-0.059,0.12-0.119,0.239-0.172,0.362c-0.049,0.114-0.093,0.23-0.137,0.346c-0.043,0.113-0.085,0.226-0.123,0.341
		c-0.041,0.125-0.077,0.251-0.111,0.378c-0.03,0.109-0.058,0.218-0.083,0.328c-0.03,0.134-0.057,0.269-0.08,0.404
		c-0.018,0.104-0.033,0.209-0.047,0.314c-0.019,0.144-0.035,0.287-0.046,0.433c-0.007,0.094-0.01,0.189-0.014,0.284
		c-0.007,0.159-0.011,0.317-0.008,0.477c0,0.019-0.001,0.037-0.001,0.056c-0.177-0.031-0.355-0.059-0.535-0.083
		c-3.173-2.444-4.987-6.113-4.987-10.109C7.984,14.536,13.723,8.797,20.777,8.797z"/>
	<path d="M54.893,44.672c-0.458-3.979-3.843-7.082-7.943-7.082c-4.411,0-8,3.589-8,8c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-3.309,2.691-6,6-6c3.003,0,5.49,2.219,5.925,5.102c-2.797,0.509-4.925,2.957-4.925,5.898c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-2.206,1.794-4,4-4s4,1.794,4,4c0,0.552,0.448,1,1,1s1-0.448,1-1C59.95,47.603,57.754,45.126,54.893,44.672z"/>
	</symbol>

	<symbol id="scattered-clouds" viewBox="0 0 59.957 59.957">
		<path d="M34.354,19.802c-0.746-0.462-1.548-0.785-2.378-0.981c0.2-5.063,4.37-9.124,9.481-9.124c5.094,0,9.253,4.033,9.478,9.073
		c-3.929,0.504-6.978,3.863-6.978,7.927c0,0.552,0.448,1,1,1s1-0.448,1-1c0-3.309,2.691-6,6-6s6,2.691,6,6c0,0.552,0.448,1,1,1
		s1-0.448,1-1c0-4.079-3.071-7.449-7.022-7.934c-0.231-6.139-5.283-11.066-11.478-11.066c-6.143,0-11.161,4.844-11.47,10.911
		c-0.558,0.012-1.119,0.078-1.676,0.208c-2.08,0.49-3.845,1.76-4.97,3.577c-0.096,0.155-0.179,0.316-0.263,0.475
		c-2.88-0.583-5.844,0.433-7.746,2.743c-1.288,1.565-1.873,3.476-1.808,5.358c-4.631-0.838-9.342,1.223-11.847,5.344
		c-1.595,2.625-2.073,5.714-1.345,8.699c0.728,2.984,2.575,5.506,5.2,7.101c0.163,0.099,0.342,0.146,0.519,0.146
		c0.338,0,0.667-0.171,0.855-0.48c0.287-0.472,0.137-1.087-0.335-1.374c-2.169-1.318-3.694-3.401-4.296-5.866
		s-0.207-5.017,1.111-7.186c2.198-3.616,6.45-5.315,10.496-4.259c0.448,1.432,1.297,2.756,2.539,3.779
		c0.186,0.153,0.411,0.228,0.635,0.228c0.289,0,0.575-0.124,0.772-0.364c0.351-0.426,0.29-1.057-0.136-1.408
		c-1.016-0.836-1.679-1.941-1.985-3.127c-0.001-0.015-0.008-0.028-0.01-0.043c-0.447-1.785-0.079-3.75,1.178-5.276
		c1.355-1.645,3.431-2.421,5.486-2.122c-0.284,1.194-0.296,2.446-0.006,3.675c0.108,0.46,0.519,0.771,0.973,0.771
		c0.076,0,0.153-0.008,0.23-0.026c0.538-0.126,0.871-0.665,0.745-1.203c-0.367-1.56-0.104-3.169,0.739-4.532
		c0.844-1.363,2.167-2.315,3.728-2.682c1.562-0.369,3.17-0.105,4.532,0.738c1.363,0.844,2.315,2.167,2.682,3.728
		c0.126,0.537,0.664,0.871,1.203,0.745c0.538-0.126,0.871-0.665,0.745-1.203C37.441,22.692,36.171,20.927,34.354,19.802z"/>
	<path d="M54.9,43.779c-0.458-3.979-3.843-7.082-7.943-7.082c-4.411,0-8,3.589-8,8c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-3.309,2.691-6,6-6c3.003,0,5.49,2.219,5.925,5.102c-2.797,0.509-4.925,2.957-4.925,5.898c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-2.206,1.794-4,4-4s4,1.794,4,4c0,0.552,0.448,1,1,1s1-0.448,1-1C59.957,46.71,57.761,44.234,54.9,43.779z"/>
	</symbol>

		<symbol id="broken-clouds" viewBox="0 0 59.957 59.957">
		<path d="M34.354,19.802c-0.746-0.462-1.548-0.785-2.378-0.981c0.2-5.063,4.37-9.124,9.481-9.124c5.094,0,9.253,4.033,9.478,9.073
		c-3.929,0.504-6.978,3.863-6.978,7.927c0,0.552,0.448,1,1,1s1-0.448,1-1c0-3.309,2.691-6,6-6s6,2.691,6,6c0,0.552,0.448,1,1,1
		s1-0.448,1-1c0-4.079-3.071-7.449-7.022-7.934c-0.231-6.139-5.283-11.066-11.478-11.066c-6.143,0-11.161,4.844-11.47,10.911
		c-0.558,0.012-1.119,0.078-1.676,0.208c-2.08,0.49-3.845,1.76-4.97,3.577c-0.096,0.155-0.179,0.316-0.263,0.475
		c-2.88-0.583-5.844,0.433-7.746,2.743c-1.288,1.565-1.873,3.476-1.808,5.358c-4.631-0.838-9.342,1.223-11.847,5.344
		c-1.595,2.625-2.073,5.714-1.345,8.699c0.728,2.984,2.575,5.506,5.2,7.101c0.163,0.099,0.342,0.146,0.519,0.146
		c0.338,0,0.667-0.171,0.855-0.48c0.287-0.472,0.137-1.087-0.335-1.374c-2.169-1.318-3.694-3.401-4.296-5.866
		s-0.207-5.017,1.111-7.186c2.198-3.616,6.45-5.315,10.496-4.259c0.448,1.432,1.297,2.756,2.539,3.779
		c0.186,0.153,0.411,0.228,0.635,0.228c0.289,0,0.575-0.124,0.772-0.364c0.351-0.426,0.29-1.057-0.136-1.408
		c-1.016-0.836-1.679-1.941-1.985-3.127c-0.001-0.015-0.008-0.028-0.01-0.043c-0.447-1.785-0.079-3.75,1.178-5.276
		c1.355-1.645,3.431-2.421,5.486-2.122c-0.284,1.194-0.296,2.446-0.006,3.675c0.108,0.46,0.519,0.771,0.973,0.771
		c0.076,0,0.153-0.008,0.23-0.026c0.538-0.126,0.871-0.665,0.745-1.203c-0.367-1.56-0.104-3.169,0.739-4.532
		c0.844-1.363,2.167-2.315,3.728-2.682c1.562-0.369,3.17-0.105,4.532,0.738c1.363,0.844,2.315,2.167,2.682,3.728
		c0.126,0.537,0.664,0.871,1.203,0.745c0.538-0.126,0.871-0.665,0.745-1.203C37.441,22.692,36.171,20.927,34.354,19.802z"/>
	<path d="M54.9,43.779c-0.458-3.979-3.843-7.082-7.943-7.082c-4.411,0-8,3.589-8,8c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-3.309,2.691-6,6-6c3.003,0,5.49,2.219,5.925,5.102c-2.797,0.509-4.925,2.957-4.925,5.898c0,0.552,0.448,1,1,1s1-0.448,1-1
		c0-2.206,1.794-4,4-4s4,1.794,4,4c0,0.552,0.448,1,1,1s1-0.448,1-1C59.957,46.71,57.761,44.234,54.9,43.779z"/>
	</symbol>

	<symbol id="shower-rain" viewBox="0 0 60.173 60.173">
	<path d="M53.129,19.93c-0.45-5.933-5.41-10.625-11.456-10.625c-3.551,0-6.73,1.619-8.841,4.156C30.045,9.715,25.724,7.512,21,7.512
		c-8.157,0-14.793,6.636-14.793,14.793c0,3.861,1.483,7.442,4.102,10.169c-3.404,0.417-6.533,2.351-8.416,5.448
		c-1.596,2.625-2.073,5.714-1.345,8.698c0.729,2.984,2.575,5.506,5.2,7.102c0.162,0.099,0.342,0.146,0.519,0.146
		c0.338,0,0.667-0.171,0.855-0.48c0.287-0.472,0.137-1.087-0.335-1.374c-2.169-1.318-3.694-3.401-4.296-5.867
		c-0.602-2.465-0.207-5.017,1.11-7.185c2.197-3.618,6.454-5.316,10.496-4.26c0.448,1.432,1.297,2.756,2.54,3.779
		c0.187,0.153,0.411,0.228,0.635,0.228c0.289,0,0.575-0.124,0.772-0.364c0.352-0.426,0.29-1.057-0.136-1.408
		c-1.016-0.837-1.679-1.941-1.985-3.127c-0.001-0.013-0.007-0.024-0.009-0.037c-0.017-0.066-0.034-0.132-0.048-0.198
		c-0.095-0.438-0.14-0.878-0.138-1.314c0-0.054,0.006-0.107,0.007-0.161c0.005-0.152,0.013-0.304,0.03-0.455
		c0.01-0.089,0.024-0.177,0.038-0.265c0.018-0.117,0.038-0.233,0.063-0.348c0.021-0.095,0.044-0.191,0.07-0.285
		c0.029-0.109,0.062-0.217,0.097-0.324c0.03-0.092,0.062-0.185,0.097-0.276c0.043-0.111,0.091-0.221,0.141-0.33
		c0.038-0.083,0.074-0.166,0.115-0.248c0.063-0.122,0.134-0.241,0.205-0.359c0.039-0.064,0.074-0.13,0.115-0.194
		c0.119-0.18,0.246-0.357,0.385-0.526c1.356-1.646,3.432-2.422,5.487-2.122c-0.284,1.194-0.296,2.446-0.006,3.676
		c0.108,0.46,0.52,0.771,0.973,0.771c0.076,0,0.153-0.008,0.23-0.026c0.537-0.127,0.87-0.665,0.744-1.203
		c-0.269-1.145-0.197-2.315,0.192-3.396l0.073-0.185c0.086-0.218,0.187-0.428,0.296-0.632c0.012-0.022,0.024-0.043,0.036-0.065
		c0.074-0.134,0.158-0.26,0.242-0.386c0.176-0.268,0.365-0.524,0.578-0.757c0.058-0.063,0.123-0.118,0.183-0.178
		c0.184-0.185,0.379-0.356,0.584-0.515c0.08-0.062,0.158-0.127,0.241-0.185c0.26-0.18,0.535-0.339,0.823-0.477
		c0.076-0.037,0.155-0.069,0.233-0.102c0.317-0.135,0.643-0.255,0.985-0.336c0.001,0,0.002,0,0.003-0.001
		c0.326-0.076,0.658-0.121,0.993-0.141c0.018-0.001,0.037-0.003,0.055-0.004c0.341-0.017,0.687-0.005,1.034,0.036
		c2.427,0.294,4.536,2.06,5.128,4.576c0.127,0.538,0.667,0.871,1.203,0.745c0.537-0.127,0.87-0.665,0.744-1.203
		c-0.716-3.044-3.096-5.263-5.947-5.943c0.011-0.283,0.024-0.565,0.06-0.844c0.012-0.094,0.028-0.186,0.043-0.278
		c0.057-0.357,0.131-0.711,0.229-1.059c0.011-0.039,0.019-0.079,0.03-0.117c0.121-0.409,0.268-0.811,0.444-1.201
		c0.008-0.018,0.018-0.036,0.026-0.054c0.172-0.377,0.371-0.744,0.593-1.099c0.037-0.06,0.071-0.122,0.11-0.181l0.082-0.129
		c1.711-2.514,4.594-4.169,7.858-4.169c4.948,0,9.019,3.803,9.456,8.639c-3.919,0.514-6.956,3.867-6.956,7.924c0,0.552,0.447,1,1,1
		s1-0.448,1-1c0-3.309,2.691-6,6-6s6,2.691,6,6c0,0.552,0.447,1,1,1s1-0.448,1-1C60.173,23.781,57.09,20.405,53.129,19.93z
		 M21,9.512c4.314,0,8.245,2.121,10.631,5.704c-0.414,0.74-0.745,1.531-0.989,2.36c-0.025,0.083-0.042,0.168-0.065,0.252
		c-0.082,0.305-0.154,0.614-0.211,0.928c-0.026,0.142-0.045,0.284-0.065,0.427c-0.037,0.257-0.066,0.516-0.085,0.778
		c-0.006,0.085-0.024,0.169-0.028,0.255c-0.549,0.012-1.105,0.078-1.661,0.208c-0.276,0.065-0.545,0.146-0.809,0.237
		c-0.041,0.015-0.081,0.033-0.122,0.048c-0.227,0.083-0.449,0.174-0.665,0.276c-0.028,0.013-0.055,0.029-0.083,0.043
		c-0.228,0.111-0.449,0.231-0.664,0.363c-0.018,0.011-0.035,0.023-0.053,0.034c-0.221,0.137-0.434,0.285-0.64,0.443
		c-0.016,0.013-0.032,0.026-0.049,0.039c-0.201,0.157-0.394,0.323-0.579,0.499c-0.023,0.021-0.045,0.043-0.067,0.065
		c-0.172,0.167-0.337,0.342-0.494,0.526c-0.031,0.036-0.062,0.073-0.092,0.109c-0.143,0.172-0.278,0.352-0.407,0.537
		c-0.034,0.049-0.069,0.098-0.102,0.149c-0.047,0.071-0.099,0.136-0.144,0.209c-0.075,0.121-0.138,0.247-0.206,0.371
		c-0.016,0.03-0.036,0.057-0.052,0.087c-0.062-0.013-0.125-0.014-0.187-0.025c-0.156-0.028-0.311-0.044-0.468-0.062
		c-0.225-0.027-0.45-0.049-0.675-0.056c-0.159-0.005-0.315-0.002-0.473,0.002c-0.222,0.006-0.442,0.019-0.661,0.044
		c-0.156,0.017-0.31,0.038-0.464,0.065c-0.219,0.037-0.434,0.085-0.648,0.141c-0.149,0.038-0.297,0.077-0.443,0.124
		c-0.215,0.069-0.424,0.152-0.633,0.239c-0.138,0.058-0.276,0.112-0.411,0.178c-0.211,0.103-0.413,0.222-0.615,0.343
		c-0.122,0.074-0.247,0.14-0.366,0.221c-0.212,0.144-0.411,0.307-0.61,0.471c-0.097,0.08-0.199,0.15-0.292,0.235
		c-0.26,0.237-0.505,0.495-0.737,0.77c-0.022,0.026-0.047,0.046-0.068,0.072c-0.027,0.032-0.048,0.067-0.074,0.1
		c-0.135,0.169-0.265,0.342-0.385,0.519c-0.05,0.074-0.093,0.151-0.14,0.226c-0.09,0.144-0.179,0.288-0.26,0.436
		c-0.042,0.078-0.079,0.158-0.119,0.237c-0.076,0.152-0.149,0.304-0.214,0.46c-0.032,0.075-0.06,0.151-0.09,0.227
		c-0.063,0.164-0.122,0.329-0.174,0.497c-0.022,0.071-0.043,0.142-0.063,0.213c-0.049,0.174-0.091,0.349-0.128,0.525
		c-0.015,0.07-0.029,0.139-0.042,0.209c-0.032,0.175-0.056,0.351-0.076,0.529c-0.008,0.075-0.018,0.151-0.024,0.226
		c-0.014,0.164-0.02,0.329-0.023,0.494c-0.002,0.091-0.006,0.182-0.005,0.273c0,0.035-0.003,0.07-0.002,0.106
		c-0.176-0.031-0.354-0.059-0.534-0.083c-3.173-2.444-4.987-6.113-4.987-10.109C8.207,15.251,13.946,9.512,21,9.512z"/>
	<path d="M32.466,48.161l-3,3c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3
		c0.391-0.391,0.391-1.023,0-1.414S32.856,47.77,32.466,48.161z"/>
	<path d="M26.466,54.161l-3,3c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3
		c0.391-0.391,0.391-1.023,0-1.414S26.856,53.77,26.466,54.161z"/>
	<path d="M46.466,42.161l-3,3c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3
		c0.391-0.391,0.391-1.023,0-1.414S46.856,41.77,46.466,42.161z"/>
	<path d="M40.466,48.161l-3,3c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3
		c0.391-0.391,0.391-1.023,0-1.414S40.856,47.77,40.466,48.161z"/>
	<path d="M31.88,42.161c-0.391-0.391-1.023-0.391-1.414,0l-3,3c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3C32.271,43.184,32.271,42.551,31.88,42.161z"/>
	<path d="M39.88,42.161c-0.391-0.391-1.023-0.391-1.414,0l-3,3c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3C40.271,43.184,40.271,42.551,39.88,42.161z"/>
	<path d="M25.88,48.161c-0.391-0.391-1.023-0.391-1.414,0l-3,3c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l3-3C26.271,49.184,26.271,48.551,25.88,48.161z"/>
	<path d="M1,23.305h4.139c0.553,0,1-0.448,1-1s-0.447-1-1-1H1c-0.553,0-1,0.448-1,1S0.447,23.305,1,23.305z"/>
	<path d="M21,7.443c0.553,0,1-0.448,1-1V2.305c0-0.552-0.447-1-1-1s-1,0.448-1,1v4.138C20,6.995,20.447,7.443,21,7.443z"/>
	<path d="M9.077,11.796c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L6.535,6.426
		c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L9.077,11.796z"/>
	<path d="M32.217,12.089c0.256,0,0.512-0.098,0.707-0.293L36.88,7.84c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0
		l-3.956,3.956c-0.391,0.391-0.391,1.023,0,1.414C31.705,11.991,31.961,12.089,32.217,12.089z"/>
	<path d="M13.882,8.095c0.162,0.381,0.532,0.61,0.921,0.61c0.131,0,0.264-0.026,0.391-0.08c0.509-0.216,0.746-0.803,0.53-1.311
		l-0.809-1.905c-0.217-0.509-0.808-0.745-1.312-0.53c-0.509,0.216-0.746,0.803-0.53,1.311L13.882,8.095z"/>
	<path d="M26.567,8.525c0.123,0.049,0.25,0.073,0.375,0.073c0.396,0,0.77-0.236,0.927-0.626l0.775-1.918
		c0.207-0.512-0.04-1.095-0.552-1.302c-0.513-0.205-1.095,0.041-1.302,0.553l-0.775,1.918C25.809,7.735,26.056,8.318,26.567,8.525z"
		/>
	<path d="M3.574,29.702c0.162,0.381,0.532,0.61,0.921,0.61c0.131,0,0.264-0.026,0.391-0.08l1.904-0.809
		c0.509-0.216,0.746-0.803,0.53-1.311c-0.217-0.509-0.809-0.745-1.312-0.53l-1.904,0.809C3.596,28.607,3.358,29.194,3.574,29.702z"
		/>
	<path d="M4,16.515l1.918,0.775c0.123,0.049,0.25,0.073,0.375,0.073c0.396,0,0.77-0.236,0.927-0.625
		c0.207-0.512-0.04-1.095-0.552-1.302L4.75,14.661c-0.512-0.205-1.095,0.041-1.302,0.552C3.241,15.725,3.488,16.308,4,16.515z"/>
	</symbol>

	<symbol id="mist" viewBox="0 0 60 60">
		<path d="M30,10.781c0.552,0,1-0.448,1-1v-6c0-0.552-0.448-1-1-1s-1,0.448-1,1v6C29,10.333,29.448,10.781,30,10.781z"/>
	<path d="M59,31.781h-6c-0.553,0-1,0.448-1,1s0.447,1,1,1h6c0.553,0,1-0.448,1-1S59.553,31.781,59,31.781z"/>
	<path d="M1,33.781h6c0.552,0,1-0.448,1-1s-0.448-1-1-1H1c-0.552,0-1,0.448-1,1S0.448,33.781,1,33.781z"/>
	<path d="M46.264,17.517c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0
		l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,17.419,46.008,17.517,46.264,17.517z"/>
	<path d="M13.029,17.224c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414
		l-5.736-5.736c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L13.029,17.224z"/>
	<path d="M50.251,24.185c0.162,0.381,0.532,0.61,0.921,0.61c0.131,0,0.264-0.026,0.391-0.08l2.762-1.172
		c0.509-0.216,0.746-0.803,0.53-1.311c-0.217-0.509-0.808-0.745-1.312-0.53l-2.762,1.172C50.272,23.089,50.035,23.676,50.251,24.185
		z"/>
	<path d="M5.519,23.968L8.3,25.092c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.512-0.207-1.095,0.04-1.302,0.553C4.759,23.178,5.006,23.761,5.519,23.968z"
		/>
	<path d="M20.093,12c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311
		l-1.172-2.762c-0.216-0.509-0.804-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311L20.093,12z"/>
	<path d="M38.241,12.383c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
		c0.207-0.512-0.041-1.095-0.553-1.302c-0.513-0.207-1.095,0.041-1.302,0.553l-1.124,2.782
		C37.481,11.593,37.729,12.176,38.241,12.383z"/>
	<path d="M50.379,37.8C50.786,36.155,51,34.473,51,32.781c0-11.58-9.42-21-21-21s-21,9.42-21,21c0,1.722,0.221,3.443,0.656,5.137
		C9.112,37.832,8.56,37.781,8,37.781c-2.916,0-5.657,1.174-7.719,3.305c-0.384,0.397-0.374,1.03,0.023,1.414
		c0.397,0.383,1.029,0.373,1.414-0.023C3.4,40.738,5.631,39.781,8,39.781c0.844,0,1.669,0.127,2.46,0.362l0.334,0.115
		c0.327,0.112,0.645,0.243,0.953,0.39c0.012,0.006,0.023,0.011,0.035,0.017c0.273,0.132,0.536,0.282,0.794,0.441
		c0.051,0.032,0.103,0.062,0.153,0.095c0.219,0.142,0.43,0.299,0.637,0.461c0.062,0.049,0.126,0.093,0.186,0.143
		c0.253,0.21,0.497,0.432,0.73,0.672L15,43.219l0.719-0.743c0.468-0.484,0.982-0.9,1.526-1.259l0.263-0.16
		c1.515-0.923,3.217-1.335,4.896-1.255c0.032,0.001,0.064,0.003,0.096,0.005c1.68,0.099,3.334,0.69,4.751,1.77l0.269,0.205h0.001
		c0.263,0.217,0.519,0.446,0.76,0.695L29,43.219l0.719-0.743c0.241-0.25,0.497-0.478,0.76-0.695h0.002l0.269-0.205
		c1.152-0.878,2.45-1.428,3.786-1.662c0.069-0.012,0.138-0.022,0.208-0.032c0.412-0.062,0.826-0.1,1.241-0.101
		c0.005,0,0.01-0.001,0.016-0.001s0.01,0.001,0.016,0.001c0.415,0.001,0.829,0.04,1.241,0.101c0.069,0.01,0.139,0.02,0.208,0.032
		c1.336,0.234,2.634,0.783,3.786,1.662l0.269,0.205h0.002c0.263,0.217,0.519,0.446,0.76,0.695L43,43.219l0.719-0.743
		c0.195-0.201,0.398-0.389,0.607-0.569c0.102-0.088,0.209-0.168,0.315-0.25c0.106-0.083,0.211-0.168,0.319-0.246
		c0.138-0.098,0.28-0.19,0.422-0.28c0.08-0.051,0.16-0.102,0.242-0.15c0.158-0.093,0.319-0.18,0.482-0.262
		c0.072-0.037,0.145-0.072,0.218-0.107c0.168-0.079,0.339-0.154,0.512-0.223c0.078-0.031,0.156-0.058,0.234-0.087
		c0.169-0.061,0.338-0.12,0.51-0.171c0.1-0.029,0.202-0.053,0.303-0.078c0.154-0.039,0.307-0.079,0.463-0.11
		c0.167-0.032,0.336-0.055,0.505-0.077c0.097-0.013,0.193-0.032,0.29-0.042c0.283-0.028,0.569-0.043,0.857-0.043
		c2.369,0,4.6,0.957,6.281,2.695c0.384,0.397,1.017,0.409,1.414,0.023c0.396-0.384,0.407-1.017,0.023-1.414
		C55.747,39.048,53.152,37.898,50.379,37.8z M11,32.781c0-10.477,8.523-19,19-19s19,8.523,19,19c0,1.737-0.24,3.463-0.715,5.14
		c-0.016,0.003-0.032,0.009-0.048,0.011c-0.455,0.076-0.901,0.184-1.339,0.318c-0.037,0.011-0.072,0.024-0.109,0.035
		c-0.753,0.238-1.479,0.554-2.165,0.956C45.527,37.209,46,35.014,46,32.781c0-8.822-7.178-16-16-16s-16,7.178-16,16
		c0,2.447,0.58,4.878,1.678,7.086c-0.231,0.171-0.459,0.348-0.678,0.538c-0.93-0.806-1.974-1.432-3.087-1.874
		C11.307,36.644,11,34.712,11,32.781z M35.016,37.827c-0.274,0.026-0.546,0.063-0.818,0.111c-0.113,0.019-0.224,0.044-0.337,0.067
		c-0.154,0.032-0.308,0.066-0.461,0.105c-0.171,0.043-0.339,0.091-0.507,0.142c-0.077,0.024-0.154,0.049-0.23,0.075
		c-1.018,0.337-1.985,0.82-2.87,1.455h-1.586c-1.18-0.846-2.504-1.43-3.905-1.74c-0.009-0.002-0.018-0.004-0.027-0.006
		c-0.741-0.162-1.5-0.254-2.275-0.254c-0.137,0-0.272,0.013-0.409,0.018c-0.057,0.002-0.113,0.004-0.17,0.008
		c-1.411,0.076-2.775,0.418-4.028,1.021C16.48,36.935,16,34.864,16,32.781c0-7.72,6.28-14,14-14s14,6.28,14,14
		c0,2.439-0.643,4.831-1.863,6.954c-0.877-0.619-1.832-1.093-2.838-1.421c-0.078-0.026-0.156-0.052-0.235-0.076
		c-0.161-0.048-0.323-0.092-0.486-0.133c-0.155-0.039-0.311-0.074-0.467-0.107c-0.109-0.022-0.217-0.044-0.327-0.063
		c-0.247-0.043-0.495-0.076-0.744-0.101c-0.034-0.003-0.067-0.008-0.1-0.011c-0.632-0.057-1.267-0.057-1.899,0.001
		C35.032,37.824,35.024,37.826,35.016,37.827z"/>
	<path d="M50,44.781c-2.589,0-5.04,0.925-7,2.624c-1.96-1.699-4.411-2.624-7-2.624s-5.04,0.925-7,2.624
		c-1.96-1.699-4.411-2.624-7-2.624s-5.04,0.925-7,2.624c-1.96-1.699-4.411-2.624-7-2.624c-2.916,0-5.657,1.174-7.719,3.305
		c-0.384,0.397-0.374,1.03,0.023,1.414c0.397,0.383,1.029,0.373,1.414-0.023C3.4,47.738,5.631,46.781,8,46.781
		s4.6,0.957,6.281,2.695L15,50.219l0.719-0.743c1.681-1.738,3.912-2.695,6.281-2.695s4.6,0.957,6.281,2.695L29,50.219l0.719-0.743
		c1.681-1.738,3.912-2.695,6.281-2.695s4.6,0.957,6.281,2.695L43,50.219l0.719-0.743c1.681-1.738,3.912-2.695,6.281-2.695
		s4.6,0.957,6.281,2.695c0.384,0.397,1.017,0.409,1.414,0.023c0.396-0.384,0.407-1.017,0.023-1.414
		C55.657,45.955,52.916,44.781,50,44.781z"/>
	<path d="M50,51.781c-2.589,0-5.04,0.925-7,2.624c-1.96-1.699-4.411-2.624-7-2.624s-5.04,0.925-7,2.624
		c-1.96-1.699-4.411-2.624-7-2.624s-5.04,0.925-7,2.624c-1.96-1.699-4.411-2.624-7-2.624c-2.916,0-5.657,1.174-7.719,3.305
		c-0.384,0.397-0.374,1.03,0.023,1.414c0.397,0.383,1.029,0.373,1.414-0.023C3.4,54.738,5.631,53.781,8,53.781
		s4.6,0.957,6.281,2.695L15,57.219l0.719-0.743c1.681-1.738,3.912-2.695,6.281-2.695s4.6,0.957,6.281,2.695L29,57.219l0.719-0.743
		c1.681-1.738,3.912-2.695,6.281-2.695s4.6,0.957,6.281,2.695L43,57.219l0.719-0.743c1.681-1.738,3.912-2.695,6.281-2.695
		s4.6,0.957,6.281,2.695c0.384,0.396,1.017,0.409,1.414,0.023c0.396-0.384,0.407-1.017,0.023-1.414
		C55.657,52.955,52.916,51.781,50,51.781z"/>
	</symbol>

	<symbol id="snow" viewBox="0 0 52 52">
		<path d="M51,25h-2.586l2.293-2.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L45.586,25h-5.172l2.293-2.293
	c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L37.586,25h-9.172l11-11H45c0.553,0,1-0.447,1-1s-0.447-1-1-1h-3.586
	l3.293-3.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L40,10.586V7c0-0.553-0.447-1-1-1s-1,0.447-1,1v5.586l-11,11
	v-9.172l3.707-3.707c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L27,11.586V6.414l3.707-3.707
	c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L27,3.586V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v2.586l-2.293-2.293
	c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L25,6.414v5.172l-2.293-2.293c-0.391-0.391-1.023-0.391-1.414,0
	s-0.391,1.023,0,1.414L25,14.414v9.172l-11-11V7c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.586L8.707,7.293
	c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L10.586,12H7c-0.553,0-1,0.447-1,1s0.447,1,1,1h5.586l11,11h-9.172
	l-3.707-3.707c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L11.586,25H6.414l-3.707-3.707
	c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L3.586,25H1c-0.553,0-1,0.447-1,1s0.447,1,1,1h2.586l-2.293,2.293
	c-0.391,0.391-0.391,1.023,0,1.414C1.488,30.902,1.744,31,2,31s0.512-0.098,0.707-0.293L6.414,27h5.172l-2.293,2.293
	c-0.391,0.391-0.391,1.023,0,1.414C9.488,30.902,9.744,31,10,31s0.512-0.098,0.707-0.293L14.414,27h9.172l-11,11H7
	c-0.553,0-1,0.447-1,1s0.447,1,1,1h3.586l-3.293,3.293c-0.391,0.391-0.391,1.023,0,1.414C7.488,44.902,7.744,45,8,45
	s0.512-0.098,0.707-0.293L12,41.414V45c0,0.553,0.447,1,1,1s1-0.447,1-1v-5.586l11-11v9.172l-3.707,3.707
	c-0.391,0.391-0.391,1.023,0,1.414C21.488,42.902,21.744,43,22,43s0.512-0.098,0.707-0.293L25,40.414v5.172l-3.707,3.707
	c-0.391,0.391-0.391,1.023,0,1.414C21.488,50.902,21.744,51,22,51s0.512-0.098,0.707-0.293L25,48.414V51c0,0.553,0.447,1,1,1
	s1-0.447,1-1v-2.586l2.293,2.293C29.488,50.902,29.744,51,30,51s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L27,45.586
	v-5.172l2.293,2.293C29.488,42.902,29.744,43,30,43s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L27,37.586v-9.172
	l11,11V45c0,0.553,0.447,1,1,1s1-0.447,1-1v-3.586l3.293,3.293C43.488,44.902,43.744,45,44,45s0.512-0.098,0.707-0.293
	c0.391-0.391,0.391-1.023,0-1.414L41.414,40H45c0.553,0,1-0.447,1-1s-0.447-1-1-1h-5.586l-11-11h9.172l3.707,3.707
	C41.488,30.902,41.744,31,42,31s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L40.414,27h5.172l3.707,3.707
	C49.488,30.902,49.744,31,50,31s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L48.414,27H51c0.553,0,1-0.447,1-1
	S51.553,25,51,25z"/>
	</symbol>

	<symbol id="thunderstorm" viewBox="0 0 59.536 59.536">
		<path d="M14.386,59.536L22.974,35h-6.208l8-16h-6.13L29.812,0H45.15l-6,10h3.895l-9,17h5.37L14.386,59.536z M20.002,33h5.792
	l-5.413,15.464L35.353,29h-4.63l9-17h-4.105l6-10H30.955l-8.823,15h5.87L20.002,33z"/>
	</symbol>

	<symbol id="rain" viewBox="0 0 51.194 51.194">
		<path d="M24.367,30.766c-0.481-0.269-1.092-0.093-1.359,0.39l-2.057,3.711c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711C25.025,31.642,24.85,31.033,24.367,30.766z"/>
	<path d="M27.122,23.734l-2.058,3.711c-0.268,0.483-0.093,1.092,0.39,1.359c0.154,0.085,0.32,0.125,0.484,0.125
		c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711c0.268-0.483,0.093-1.092-0.39-1.359C27.997,23.076,27.389,23.251,27.122,23.734z"/>
	<path d="M27.81,39.142c-0.484-0.269-1.091-0.094-1.36,0.39l-2.058,3.71c-0.268,0.483-0.093,1.092,0.39,1.359
		c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.692-0.186,0.876-0.515l2.058-3.71C28.468,40.018,28.293,39.409,27.81,39.142z"/>
	<path d="M31.923,31.72c-0.482-0.269-1.091-0.094-1.359,0.39l-2.057,3.71c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71C32.581,32.597,32.406,31.988,31.923,31.72z"/>
	<path d="M16.811,29.812c-0.482-0.269-1.092-0.094-1.359,0.39l-2.057,3.71c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71C17.469,30.688,17.295,30.079,16.811,29.812z"/>
	<path d="M12.699,37.233c-0.485-0.269-1.091-0.094-1.36,0.39l-2.058,3.71c-0.268,0.483-0.093,1.092,0.39,1.359
		c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.692-0.186,0.876-0.515l2.058-3.71C13.356,38.109,13.181,37.501,12.699,37.233z"/>
	<path d="M20.255,38.187c-0.485-0.269-1.092-0.094-1.36,0.39l-2.058,3.711c-0.268,0.483-0.093,1.092,0.39,1.359
		c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711C20.912,39.064,20.737,38.455,20.255,38.187z"/>
	<path d="M16.139,45.608c-0.482-0.269-1.092-0.093-1.359,0.39l-2.057,3.711c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711C16.798,46.484,16.623,45.876,16.139,45.608z"/>
	<path d="M20.925,22.39c-0.481-0.269-1.092-0.094-1.359,0.39l-2.057,3.71c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71C21.583,23.267,21.408,22.658,20.925,22.39z"/>
	<path d="M39.478,32.674c-0.481-0.268-1.092-0.093-1.359,0.39l-2.057,3.711c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711C40.136,33.55,39.962,32.942,39.478,32.674z"/>
	<path d="M43.594,25.253c-0.485-0.268-1.093-0.093-1.36,0.39l-2.058,3.711c-0.268,0.483-0.093,1.092,0.39,1.359
		c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711C44.251,26.129,44.076,25.521,43.594,25.253z"/>
	<path d="M33.681,13.961c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711
		c0.268-0.483,0.093-1.092-0.39-1.359c-0.484-0.268-1.093-0.094-1.36,0.39l-2.058,3.711C33.024,13.085,33.199,13.694,33.681,13.961z
		"/>
	<path d="M37.797,6.54c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711
		c0.268-0.483,0.093-1.092-0.391-1.359c-0.482-0.268-1.092-0.093-1.359,0.39l-2.057,3.711C37.138,5.664,37.313,6.273,37.797,6.54z"
		/>
	<path d="M36.038,24.299c-0.484-0.269-1.092-0.094-1.36,0.39l-2.058,3.71c-0.268,0.483-0.093,1.092,0.39,1.359
		c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.692-0.186,0.876-0.515l2.058-3.71C36.695,25.175,36.52,24.566,36.038,24.299z"/>
	<path d="M38.791,17.267l-2.057,3.71c-0.268,0.483-0.093,1.092,0.391,1.359c0.153,0.085,0.319,0.125,0.483,0.125
		c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71c0.268-0.483,0.093-1.092-0.391-1.359C39.669,16.609,39.058,16.784,38.791,17.267z"/>
	<path d="M26.127,13.007c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71
		c0.268-0.483,0.093-1.092-0.391-1.359c-0.481-0.269-1.092-0.094-1.359,0.39l-2.057,3.71C25.469,12.13,25.643,12.739,26.127,13.007z
		"/>
	<path d="M22.013,20.428c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71
		c0.268-0.483,0.093-1.092-0.391-1.359c-0.481-0.269-1.091-0.094-1.359,0.39l-2.057,3.71C21.355,19.552,21.53,20.161,22.013,20.428z
		"/>
	<path d="M10.627,26.383c-0.482-0.269-1.092-0.093-1.359,0.39l-2.057,3.711c-0.268,0.483-0.093,1.092,0.391,1.359
		c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711C11.285,27.259,11.11,26.651,10.627,26.383z"/>
	<path d="M11.714,24.422c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711
		c0.268-0.483,0.093-1.092-0.39-1.359c-0.484-0.269-1.093-0.094-1.36,0.39l-2.058,3.711C11.056,23.545,11.231,24.154,11.714,24.422z
		"/>
	<path d="M19.941,9.579c0.154,0.085,0.32,0.125,0.484,0.125c0.352,0,0.693-0.186,0.876-0.515l2.058-3.711
		c0.268-0.483,0.093-1.092-0.39-1.359c-0.485-0.269-1.093-0.094-1.36,0.39L19.552,8.22C19.284,8.703,19.459,9.312,19.941,9.579z"/>
	<path d="M15.829,17.001c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711
		c0.268-0.483,0.093-1.092-0.391-1.359c-0.482-0.269-1.091-0.093-1.359,0.39l-2.057,3.711
		C15.171,16.125,15.345,16.733,15.829,17.001z"/>
	<path d="M31.235,16.313l-2.057,3.711c-0.268,0.483-0.093,1.092,0.391,1.359c0.153,0.085,0.319,0.125,0.483,0.125
		c0.352,0,0.693-0.186,0.876-0.515l2.057-3.711c0.268-0.483,0.093-1.092-0.391-1.359C32.112,15.655,31.503,15.83,31.235,16.313z"/>
	<path d="M30.241,5.586c0.153,0.085,0.319,0.125,0.483,0.125c0.352,0,0.693-0.186,0.876-0.515l2.057-3.71
		c0.268-0.483,0.093-1.092-0.391-1.359c-0.481-0.269-1.092-0.094-1.359,0.39l-2.057,3.71C29.583,4.709,29.758,5.318,30.241,5.586z"
		/>
	</symbol>
</svg>

<div class="info is-animated">
  <svg class="icon" width="32" height="32">
    <use xlink:href="#refresh">
      </svg>
    <span class="message">Getting your current position, please wait...</span>
    </div>

  <div class="weather is-hidden">
    <div class="left">
      <div class="settings">
        <h2 class="title">Settings</h2>

        <label class="checkbox">
          <input type="radio" name="unit" value="celsius" checked> Celsius
        </label>

        <label class="checkbox">
          <input type="radio" name="unit" value="fahrenheit"> Fahrenheit
        </label>
      </div>

      <div class="row">
        <p class="date"></p>
        <button type="button" class="settings-toggle" title="Change settings" data-action="toggle">
          <svg class="icon" width="32" height="32">
            <use xlink:href="#cog">
              </svg>
            </button>
          </div>

        <h1 class="temperature"></h1>
        <p class="city">Loading...</p>
        <p class="climate"></p>
      </div>
      <div class="right">
        <h2 class="title">Weather</h2>
        <div class="row">
          <div class="condition">
            <span class="icon">
              <svg width="64" height="64">
                <use xlink:href="#light-rain" class="weather-icon">
                  </svg>
                </span>

              <p class="mood">Loading...</p>
              </div>
            <div class="condition">
              <span class="icon">
                <svg width="64" height="64">
                  <use xlink:href="#wind">
                    </svg>
                  </span>

                <p class="wind">Loading...</p>
                </div>
              <div class="condition">
                <span class="icon">
                  <svg width="64" height="64">
                    <use xlink:href="#direction">
                      </svg>
                    </span>

                  <p class="direction">Loading...</p>
                  </div>
                <div class="condition">
                  <span class="icon">
                    <svg width="64" height="64">
                      <use xlink:href="#clouds">
                        </svg>
                      </span>

                    <p class="clouds">Loading...</p>
                    </div>
                </div>
                <h2 class="title">Details</h2>
                <ul class="details">
                  <li class="detail">
                    <span class="icon">
                      <svg width="40" height="40">
                        <use xlink:href="#sunrise">
                          </svg>
                        </span>
                      <span class="sunrise">Loading...</span>
                      </li>
                  <li class="detail">
                    <span class="icon">
                      <svg width="40" height="40">
                        <use xlink:href="#sunset">
                          </svg>
                        </span>
                      <span class="sunset">Loading...</span>
                      </li>
                </ul>
              </div>
            </div>
              
            
!

CSS

              
                :root {
  --bg-color: rgb(236, 236, 236);
  --pink: rgb(242, 76, 142);
  --orange: rgb(247, 129, 103);
  --title-color: rgb(103, 103, 103);
  --text-color: rgb(144, 144, 144);
  --border-color: rgb(218, 218, 218);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;

  font-family: 'Open Sans', sans-serif;

  color: var(--text-color);

  background-color: var(--bg-color);
}

.row {
  display: flex;
  justify-content: space-between;
}

.icon {
  display: block;
  position: relative;
}

.icon::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: linear-gradient(to bottom right, var(--pink), var(--orange));
  
  content: '';
  mix-blend-mode: screen;
}

.title {
  padding-bottom: 1rem;

  font-weight: 300;
  
  border-bottom: 1px solid var(--border-color);
  
  color: var(--title-color);
}

.title:first-child {
  margin-top: 0;
}

.weather {
  display: flex;
  max-width: 60rem;
  width: 100%;

  box-shadow: 0 40px 35px -35px rgba(0, 0, 0, .2);
}

.left {
  display: flex;
  flex-direction: column;
  flex: 0 1 35%;
  padding: 2rem 3rem;
  position: relative;

  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;

  background-image: linear-gradient(to bottom right, var(--pink), var(--orange));
  color: white;

  overflow: hidden;
}

.date {
  color: rgba(255, 255, 255, .7);
}

.settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  padding: 2rem 2rem 2rem 3rem;
  box-sizing: border-box;

  background: white;

  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(0.45, 0.16, 0.74, 1.29);
}

.checkbox {
  display: block;
  margin-bottom: .5rem;
  
  color: var(--text-color);
}

.settings-toggle {
  padding: 0;
  margin: 0;

  background: transparent;
  color: white;
  
  border: none;

  -webkit-appearance: none;
  appearance: none;
  outline: none;

  transition: transform .2s linear;
}

.settings-open .settings-toggle {
  transform: rotate(40deg);
}

.settings-open .settings {
  transform: translateX(-1rem);
}

.temperature {
  margin: 13rem 0 0 0;

  font-weight: 300;
  font-size: 7rem;
  line-height: 1.1;
}

.city {
  margin: .5rem 0 0 0;

  font-size: 22px;
}

.climate {
  margin: 0;

  line-height: 2;
  
  color: rgba(255, 255, 255, .8);
}

.right {
  flex: 0 1 65%;
  padding: 2rem 3rem;

  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;

  background-color: white;
}

.condition {
  flex: 1 0 25%;

  text-align: center;
}

.details {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;

  list-style-type: none;
}

.detail {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.detail > .icon {
  margin-right: 1rem;
}

.info {
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: 1rem;
  display: flex;
  align-items: center;

  background-image: linear-gradient(to bottom right, var(--pink), var(--orange));
  color: white;
  
  border-radius: 5px;
  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, .2);
  
  text-indent: 1rem;
  
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.info.is-animated .icon {
  animation: rotate 2s linear infinite;
}

.info.is-hidden {
  opacity: 0;
  transform: translateX(2rem);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
              
            
!

JS

              
                'use strict';

  const leftSide = document.querySelector('.left'),
        rightSide = document.querySelector('.right'),
        userInfo = document.querySelector('.info'),
        settingsToggle = document.querySelector('[data-action="toggle"]');


  /**
   * Initializes the application.
   */
  function init() {
    setDate();
    setCheckboxes();
    
    if (localStorage.getItem('lat') && localStorage.getItem('long')) {
      getWeatherData();
    }

    getCoordinates()
      .then(getWeatherData)
      .catch(() => console.error('Could not get location'));
  }

  /**
   * Sets and formats the current date, like June 18, 2018
   */
  function setDate() {
    leftSide.querySelector('.date').textContent = dayjs().format('MMMM D, YYYY');
  }

  function setCheckboxes() {
    document.querySelectorAll('input[type="radio"][name="unit"]').forEach(checkbox => {
      if (localStorage.getItem('unit') === checkbox.value) {
        checkbox.checked = true;
      } else if (!localStorage.getItem('unit') && checkbox.value === 'celsius') {
        checkbox.checked = true;
      } else {
        checkbox.checked = false;
      }
    });
  }

  function updateInfo(message, hide, animate) {
    hide ? userInfo.classList.add('is-hidden') : userInfo.classList.remove('is-hidden');

    if (animate) {
      userInfo.classList.add('is-animated');
      userInfo.querySelector('use').setAttribute('xlink:href', 'icons.svg#refresh');
    } else {
      userInfo.classList.remove('is-animated');
      userInfo.querySelector('use').setAttribute('xlink:href', 'icons.svg#error');
    }

    userInfo.querySelector('.message').textContent = message;
  }

  /**
   * Gets the current weather via API call
   */
  function getWeatherData() {
    fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${localStorage.getItem('lat')}&lon=${localStorage.getItem('long')}`)
      .then(res => res.json())
      .then(render)
      .catch(error => updateInfo('Failed to get the current weather, please try again later.', false, false));
  }

  /**
   * Gets the current user's location and returns a promise.
   */
  function getCoordinates() {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition((pos) => {
        localStorage.setItem('lat', pos.coords.latitude);
        localStorage.setItem('long', pos.coords.longitude);

        updateInfo(null, true, true);

        resolve();
      }, error => updateInfo(error.message, false, false));
    });
  }

  /**
   * Renders the data into the app.
   * @param {*} data 
   */
  function render(data) {
    localStorage.setItem('temp', data.main.temp);

    leftSide.querySelector('.temperature').textContent = getTemperature();
    leftSide.querySelector('.city').textContent = data.name;
    leftSide.querySelector('.climate').textContent = data.weather[0].main;

    rightSide.querySelector('.mood').textContent = data.weather[0].description;
    rightSide.querySelector('.weather-icon').setAttribute('xlink:href', `#${data.weather[0].description.replace(' ', '-')}`);
    rightSide.querySelector('.wind').textContent = `${data.wind.speed} km/h`;
    rightSide.querySelector('.direction').textContent = getWindDirection(data.wind.deg);
    rightSide.querySelector('.clouds').textContent = `${data.clouds.all}% cloudy`;
    rightSide.querySelector('.sunrise').textContent = `Sunrise is at ${dayjs(data.sys.sunrise).format('h:m a')}`;
    rightSide.querySelector('.sunset').textContent = `Sunset is at ${dayjs(data.sys.sunset).format('h:m a')}`;
  }

  /**
   * Converts degrees in wind direction
   * @param {*} degree 
   */
  function getWindDirection(degree) {
    const value = Math.floor((degree / 22.5) + 0.5),
          directions = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW"];
    
    return directions[(value % 16)];
  }

  /**
   * Converts celsius to fahrenheit
   * @param {*} number 
   */
  function getTemperature() {
    if (localStorage.getItem('unit') === 'fahrenheit') {
      return `${parseInt(localStorage.getItem('temp') * 9 / 5 + 32)}°`;
    }

    return `${parseInt(localStorage.getItem('temp'))}°`;
  }
  
  /**
   * Sets the temperature unit to celius or fahrenheit and updates
   * the display.
   */
  function setUnit() {
    localStorage.setItem('unit', this.value);

    leftSide.querySelector('.temperature').textContent = getTemperature();
  }

  /**
   * Opens or closes the settings panel.
   */
  function toggleSettings() {
    leftSide.classList.toggle('settings-open');
  }

  
  // Event listeners
  settingsToggle.addEventListener('click', toggleSettings);
  document.addEventListener('DOMContentLoaded', init);
  document.querySelectorAll('input[type="radio"][name="unit"]').forEach(checkbox => checkbox.addEventListener('click', setUnit));
              
            
!
999px

Console