mezcel/celestial-navigation-calculate-and-determine-zn-azimuth.markdown

## celestial-navigation-calculate-and-determine-zn-azimuth.markdown

      
    Raw
  

              celestial-navigation-calculate-and-determine-zn-azimuth.markdown
            
          
    Celestial Navigation: Calculate and Determine Zn (azimuth)

Celestial Navigation: Calculate and Determine Zn (azimuth)

Determine Zn (azimuth)

Zn = Computed azimuth,The simplest definition of azimuth is the bearing of a heavenly body from a fixed point on land or at sea.  To be more precise, we might say azimuth is the bearing to the body's geographical position (the celestial coordinates of declination and hour angle reformulated as latitude and longitude).
Mathematically, the bearing is measured the shortest way from the poles, east or west of an observer's meridian to a maximum of l80°.  Hc = Computed altitude
Z  = cos-1[(sin(declination) – sin(Latitude) x sin(Hc)) / (cos(Latitude) x cos(Hc))]  

Or ...
Z = tan-1 (sin (LHA) / (cos (LHA) x sin(AP Latitude) - cos(AP Latitude) x tan(declination))

Determine Hc,  Computed altitude

Hc = sin-1[sin(declination) x sin(Latitude) + (cos(Latitude) x cos(declination) x cos(LHA)] 

Determine Local Apparent Noon using GHA

((Your Longitude – Sun GHA less than your Longitude) / 15) + GHA integral hour 
(Your Longitude – GHA less than your Longitude) 

LHA = Local Hour Angle In astro navigation, we need to know the position of a celestial body relative to our own position. 

Due to the Earth’s rotation, the Sun moves through 15o of longitude in 1 hour and it moves through 15 minutes of arc in 1 minute of time.
the angle between the meridian of the celestial object and the meridian of the observer,
LHA = GHA(of celestial object) - Longitude (of observer)

Rules for calculating LHA:

Long East,
LHA = GHA + LONG (- 360o as necessary)

Long West,
LHA = GHA – LONG (+ 360o as necessary)

A Pen by mezcel on CodePen.
License.

  
## index.html
	<body>
	  <div id="wrap">
		<div id="header">
		  <h1>Celestial Navigation: Calculate and Determine Zn (azimuth)</h1>
		</div>
		<div id="inputBox">
		  <form name="Calc_ZnInput">
			<h2>Inputs:</h2>
			<ul>
			  <li>
				<input type="button" value="demo entry: angle of declination" onClick="document.Calc_ZnInput.declination.value='4.69'">
				<br> angle of declination = <input type="textfield" name="declination" value="">
			  </li>
			  <li>
				<input type="button" value="demo entry: default Latitude" onClick="document.Calc_ZnInput.Latitude.value='30.121498'">
				<br> Latitude = <input type="textfield" name="Latitude" value="">
			  </li>
			  <li>
				<input type="button" value="demo entry: default LHA" onClick="document.Calc_ZnInput.LHA.value='1'">
				<br> LHA = <input type="textfield" name="LHA" value="">
			  </li>
			</ul>
		  </form>
		</div>
		<div id="outputBox">
		  <form name="Calc_ZnOutport">
			<h2>Outputs:</h2>
			<ul>
			  <li>
				<input type="button" value="CalculateHc from Inputs" onClick="document.Calc_ZnOutport.Hc.value=calculate_Hc(document.Calc_ZnInput.declination.value, document.Calc_ZnInput.Latitude.value, document.Calc_ZnInput.LHA.value);" />
				<br> Hc = <input type="textfield" name="Hc" value="">
			  </li>
			  <li>
				<input type="button" value="CalculateZn from Inputs and Hc" onClick="document.Calc_ZnOutport.Zn.value=calculate_Zn(document.Calc_ZnInput.declination.value, document.Calc_ZnInput.Latitude.value, document.Calc_ZnOutport.Hc.value);" />
				<br> Zn = <input type="textfield" name="Zn" value="">
			  </li>
			</ul>
		  </form>
		</div>
		<div id="footer">
		  <h1>Calculations</h1>
			<p>
			<h2>Determine Zn (azimuth)</h2>
			Zn = Computed azimuth,The simplest definition of azimuth is the bearing of a heavenly body from a fixed point on land or at sea. To be more precise, we might say azimuth is the bearing to the body's geographical position (the celestial coordinates of declination and hour angle reformulated as latitude and longitude).
			<br>
			Mathematically, the bearing is measured the shortest way from the poles, east or west of an observer's meridian to a maximum of l80°.  Hc = Computed altitude
			<br><br>
				Z  = cos-1[(sin(declination) – sin(Latitude) x sin(Hc)) / (cos(Latitude) x cos(Hc))]
			<br>
			Or ...
			<br>
				Z = tan-1 (sin (LHA) / (cos (LHA) x sin(AP Latitude) - cos(AP Latitude) x tan(declination))
			</p>

			<p>
			<h2> Determine Hc,  Computed altitude</h2>
				Hc = sin-1[sin(declination) x sin(Latitude) + (cos(Latitude) x cos(declination) x cos(LHA)]
			</p>

			<p>
			<h2> Determine Local Apparent Noon using GHA </h2>

				((Your Longitude – Sun GHA less than your Longitude) / 15) + GHA integral hour <br>
				(Your Longitude – GHA less than your Longitude)
			<br><br>
				LHA = Local Hour Angle In astro navigation, we need to know the position of a celestial body relative to our own position.
			<br>
			Due to the Earth’s rotation, the Sun moves through 15o of longitude in 1 hour and it moves through 15 minutes of arc in 1 minute of time. The angle between the meridian of the celestial object and the meridian of the observer,
			<br>
				LHA = GHA(of celestial object) - Longitude (of observer)
				</p>

				<p>
			<h2> Rules for calculating LHA:</h2>

			Long East,
			<br>
				LHA = GHA + LONG (- 360o as necessary)
			<br><br>
			Long West,
			<br>
				LHA = GHA – LONG (+ 360o as necessary)
				</p>
		</div>


		<div class="meteors">

		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>
		  <div class="meteor"></div>

		</div>

		<div class="stars">

		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>
		  <div class="star"></div>

		</div>

	</body>

## script.js

			/* my standard celestial nav calculations */
			function calculate_Hc(declination, Latitude, LHA) {
			  var Hc = Math.asin(Math.sin(declination) * Math.sin(Latitude) + (Math.cos(Latitude) * Math.cos(declination) * Math.cos(LHA)));
			  return Hc;
			}

			function calculate_Zn(declination, Latitude, Hc) {
			  var Zn = Math.acos((Math.sin(declination) - Math.sin(Latitude) * Math.sin(Hc)) / (Math.cos(Latitude) * Math.cos(Hc)));
			  return Zn;
			}

			/*
				Orionid meteor shower 😎 ☄️
				A PEN BY jh3y
				http://codepen.io/jh3y/pen/XjojOm
			*/
			'use strict';
			(function () {
				var reset = function reset(e) {
					e.target.className = '';
					setTimeout(function () {
						e.target.className = 'meteor';
					}, 0);
				};
				var meteors = document.querySelectorAll('.meteor');
				for (var i = 0; i < meteors.length; i++) {
					if (window.CP.shouldStopExecution(1)) {
						break;
					}
					meteors[i].addEventListener('animationend', reset);
				}
				window.CP.exitedLoop(1);
			}());

## style.css
			/* celsetial nav section*/
			body,
			html {
			  background: black;
			}

			#wrap {
			  width: 900px;
			  margin: 0 auto;
			  background: #99c;
			}

			#header {
			  padding: 5px 10px;
			  background: #ddd;
			}

			h1 {
			  margin: 0;
			  text-align: center;
			}

			#inputBox {
			  float: left;
			  width: 50%;
			  background: LightCyan;
			  height: 200px;
			}

			h2 {
			  margin: 0 0 1em;
			}

			#outputBox {
			  float: right;
			  width: 50%;
			  background: LavenderBlush;
			  height: 200px;
			}

			#footer {
			  clear: both;
			  padding: 5px 10px;
			  background: #cc9;
			}
			/*
				Orionid meteor shower 😎 ☄️
				A PEN BY jh3y
				http://codepen.io/jh3y/pen/XjojOm
			*/

			*{
			  box-sizing: border-box;
			  animation: fadeIn 0.5s;
			}

			.meteor {
			  border: 2px solid transparent;
			  border-bottom: 60px solid #fff;
			  position: absolute;
			  transform-origin: top right;
			  animation: shower 0.5s;
			  opacity: 0;
			}
			.meteor:after {
			  content: '';
			  position: absolute;
			  top: 58px;
			  left: 50%;
			  height: 4px;
			  width: 4px;
			  border-radius: 100%;
			  background: #fff;
			  transform: translateX(-50%);
			  box-shadow: 0 0 15px 0 #fff;
			}
			.star {
			  display: inline-block;
			  border-radius: 100%;
			  background-color: #ff0;
			  position: absolute;
			  opacity: 0.5;
			}
			.star:nth-child(0) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.919051151024178;
			  left: 95vw;
			  top: 96vh;
			}
			.star:nth-child(1) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.209021392045543;
			  left: 22vw;
			  top: 28vh;
			}
			.star:nth-child(2) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.939062716672197;
			  left: 49vw;
			  top: 26vh;
			}
			.star:nth-child(3) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.542630158364773;
			  left: 85vw;
			  top: 0vh;
			}
			.star:nth-child(4) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.658576191635802;
			  left: 26vw;
			  top: 32vh;
			}
			.star:nth-child(5) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.124432906508446;
			  left: 32vw;
			  top: 37vh;
			}
			.star:nth-child(6) {
			  height: 3px;
			  width: 3px;
			  opacity: 0.772838689619675;
			  left: 53vw;
			  top: 87vh;
			}
			.star:nth-child(7) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.74006663239561;
			  left: 44vw;
			  top: 25vh;
			}
			.star:nth-child(8) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.775946476263925;
			  left: 54vw;
			  top: 30vh;
			}
			.star:nth-child(9) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.869716696674004;
			  left: 88vw;
			  top: 8vh;
			}
			.star:nth-child(10) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.812722171656787;
			  left: 48vw;
			  top: 36vh;
			}
			.star:nth-child(11) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.74844204983674;
			  left: 96vw;
			  top: 78vh;
			}
			.star:nth-child(12) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.68167283362709;
			  left: 10vw;
			  top: 67vh;
			}
			.star:nth-child(13) {
			  height: 2px;
			  width: 2px;
			  opacity: 0.942958110710606;
			  left: 27vw;
			  top: 94vh;
			}
			.star:nth-child(14) {
			  height: 3px;
			  width: 3px;
			  opacity: 0.249342653434724;
			  left: 23vw;
			  top: 43vh;
			}
			.star:nth-child(15) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.251072004903108;
			  left: 65vw;
			  top: 85vh;
			}
			.star:nth-child(16) {
			  height: 1px;
			  width: 1px;
			  opacity: 0.311507098376751;
			  left: 33vw;
			  top: 20vh;
			}
			.star:nth-child(17) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.2003990476951;
			  left: 19vw;
			  top: 27vh;
			}
			.star:nth-child(18) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.605244268663228;
			  left: 64vw;
			  top: 40vh;
			}
			.star:nth-child(19) {
			  height: 3px;
			  width: 3px;
			  opacity: 0.942416806705296;
			  left: 82vw;
			  top: 59vh;
			}
			.star:nth-child(20) {
			  height: 4px;
			  width: 4px;
			  opacity: 0.697782858973369;
			  left: 61vw;
			  top: 81vh;
			}
			.meteor:nth-child(0) {
			  left: 56vw;
			  top: 57vh;
			  animation-delay: 3s;
			}
			.meteor:nth-child(1) {
			  left: 32vw;
			  top: 58vh;
			  animation-delay: 6s;
			}
			.meteor:nth-child(2) {
			  left: 1vw;
			  top: 57vh;
			  animation-delay: 4s;
			}
			.meteor:nth-child(3) {
			  left: 71vw;
			  top: 15vh;
			  animation-delay: 5s;
			}
			.meteor:nth-child(4) {
			  left: 99vw;
			  top: 87vh;
			  animation-delay: 11s;
			}
			.meteor:nth-child(5) {
			  left: 2vw;
			  top: 94vh;
			  animation-delay: 6s;
			}
			.meteor:nth-child(6) {
			  left: 26vw;
			  top: 44vh;
			  animation-delay: 15s;
			}
			.meteor:nth-child(7) {
			  left: 63vw;
			  top: 98vh;
			  animation-delay: 9s;
			}
			.meteor:nth-child(8) {
			  left: 16vw;
			  top: 49vh;
			  animation-delay: 13s;
			}
			.meteor:nth-child(9) {
			  left: 1vw;
			  top: 45vh;
			  animation-delay: 13s;
			}
			.meteor:nth-child(10) {
			  left: 41vw;
			  top: 14vh;
			  animation-delay: 15s;
			}


			body {
			  /* overflow: hidden; */
			  background: radial-gradient(ellipse farthest-corner at 10vw 95vw, #111 0%, #222 50%, #111 95%);

			}
			/*
			body:before {
			  content: '';
			  position: absolute;
			  bottom: 0;
			  width: 30vw;
			  height: 10vh;
			  left: 0;
			  background: #000;
			  z-index: 1;
			  border-radius: 50% 50% 0 0;
			}

			body:after {
			  content: '';
			  position: absolute;
			  bottom: 0;
			  right: 0;
			  width: 80vw;
			  height: 15vh;
			  background: #000;
			  z-index: 1;
			  border-radius: 50% 50% 0 0;
			}
			*/

			@-moz-keyframes fadeIn {
			  from {
				opacity: 0;
			  }
			  to {
				opacity: 1;
			  }
			}
			@-webkit-keyframes fadeIn {
			  from {
				opacity: 0;
			  }
			  to {
				opacity: 1;
			  }
			}
			@-o-keyframes fadeIn {
			  from {
				opacity: 0;
			  }
			  to {
				opacity: 1;
			  }
			}
			@keyframes fadeIn {
			  from {
				opacity: 0;
			  }
			  to {
				opacity: 1;
			  }
			}
			@-moz-keyframes shower {
			  0% {
				transform: rotate(30deg) scaleY(0);
				opacity: 0;
			  }
			  65% {
				transform: rotate(30deg) scaleY(1);
				opacity: 1;
			  }
			  100% {
				transform: rotate(30deg) scaleY(1) translateY(500%);
				opacity: 0;
			  }
			}
			@-webkit-keyframes shower {
			  0% {
				transform: rotate(30deg) scaleY(0);
				opacity: 0;
			  }
			  65% {
				transform: rotate(30deg) scaleY(1);
				opacity: 1;
			  }
			  100% {
				transform: rotate(30deg) scaleY(1) translateY(500%);
				opacity: 0;
			  }
			}
			@-o-keyframes shower {
			  0% {
				transform: rotate(30deg) scaleY(0);
				opacity: 0;
			  }
			  65% {
				transform: rotate(30deg) scaleY(1);
				opacity: 1;
			  }
			  100% {
				transform: rotate(30deg) scaleY(1) translateY(500%);
				opacity: 0;
			  }
			}
			@keyframes shower {
			  0% {
				transform: rotate(30deg) scaleY(0);
				opacity: 0;
			  }
			  65% {
				transform: rotate(30deg) scaleY(1);
				opacity: 1;
			  }
			  100% {
				transform: rotate(30deg) scaleY(1) translateY(500%);
				opacity: 0;
			  }
			}

		</style>
	<body>
	<div id="wrap">
	<div id="header">
	<h1>Celestial Navigation: Calculate and Determine Zn (azimuth)</h1>
	</div>
	<div id="inputBox">
	<form name="Calc_ZnInput">
	<h2>Inputs:</h2>
	<ul>
	<li>
	<input type="button" value="demo entry: angle of declination" onClick="document.Calc_ZnInput.declination.value='4.69'">
	<br> angle of declination = <input type="textfield" name="declination" value="">
	</li>
	<li>
	<input type="button" value="demo entry: default Latitude" onClick="document.Calc_ZnInput.Latitude.value='30.121498'">
	<br> Latitude = <input type="textfield" name="Latitude" value="">
	</li>
	<li>
	<input type="button" value="demo entry: default LHA" onClick="document.Calc_ZnInput.LHA.value='1'">
	<br> LHA = <input type="textfield" name="LHA" value="">
	</li>
	</ul>
	</form>
	</div>
	<div id="outputBox">
	<form name="Calc_ZnOutport">
	<h2>Outputs:</h2>
	<ul>
	<li>
	<input type="button" value="CalculateHc from Inputs" onClick="document.Calc_ZnOutport.Hc.value=calculate_Hc(document.Calc_ZnInput.declination.value, document.Calc_ZnInput.Latitude.value, document.Calc_ZnInput.LHA.value);" />
	<br> Hc = <input type="textfield" name="Hc" value="">
	</li>
	<li>
	<input type="button" value="CalculateZn from Inputs and Hc" onClick="document.Calc_ZnOutport.Zn.value=calculate_Zn(document.Calc_ZnInput.declination.value, document.Calc_ZnInput.Latitude.value, document.Calc_ZnOutport.Hc.value);" />
	<br> Zn = <input type="textfield" name="Zn" value="">
	</li>
	</ul>
	</form>
	</div>
	<div id="footer">
	<h1>Calculations</h1>
	<p>
	<h2>Determine Zn (azimuth)</h2>
	Zn = Computed azimuth,The simplest definition of azimuth is the bearing of a heavenly body from a fixed point on land or at sea. To be more precise, we might say azimuth is the bearing to the body's geographical position (the celestial coordinates of declination and hour angle reformulated as latitude and longitude).
	<br>
	Mathematically, the bearing is measured the shortest way from the poles, east or west of an observer's meridian to a maximum of l80°. Hc = Computed altitude
	<br><br>
	Z = cos-1[(sin(declination) – sin(Latitude) x sin(Hc)) / (cos(Latitude) x cos(Hc))]
	<br>
	Or ...
	<br>
	Z = tan-1 (sin (LHA) / (cos (LHA) x sin(AP Latitude) - cos(AP Latitude) x tan(declination))
	</p>

	<p>
	<h2> Determine Hc, Computed altitude</h2>
	Hc = sin-1[sin(declination) x sin(Latitude) + (cos(Latitude) x cos(declination) x cos(LHA)]
	</p>

	<p>
	<h2> Determine Local Apparent Noon using GHA </h2>

	((Your Longitude – Sun GHA less than your Longitude) / 15) + GHA integral hour <br>
	(Your Longitude – GHA less than your Longitude)
	<br><br>
	LHA = Local Hour Angle In astro navigation, we need to know the position of a celestial body relative to our own position.
	<br>
	Due to the Earth’s rotation, the Sun moves through 15o of longitude in 1 hour and it moves through 15 minutes of arc in 1 minute of time. The angle between the meridian of the celestial object and the meridian of the observer,
	<br>
	LHA = GHA(of celestial object) - Longitude (of observer)
	</p>

	<p>
	<h2> Rules for calculating LHA:</h2>

	Long East,
	<br>
	LHA = GHA + LONG (- 360o as necessary)
	<br><br>
	Long West,
	<br>
	LHA = GHA – LONG (+ 360o as necessary)
	</p>
	</div>


	<div class="meteors">

	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>
	<div class="meteor"></div>

	</div>

	<div class="stars">

	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>

	</div>

	</body>

	/* my standard celestial nav calculations */
	function calculate_Hc(declination, Latitude, LHA) {
	var Hc = Math.asin(Math.sin(declination) * Math.sin(Latitude) + (Math.cos(Latitude) * Math.cos(declination) * Math.cos(LHA)));
	return Hc;
	}

	function calculate_Zn(declination, Latitude, Hc) {
	var Zn = Math.acos((Math.sin(declination) - Math.sin(Latitude) * Math.sin(Hc)) / (Math.cos(Latitude) * Math.cos(Hc)));
	return Zn;
	}

	/*
	Orionid meteor shower 😎 ☄️
	A PEN BY jh3y
	http://codepen.io/jh3y/pen/XjojOm
	*/
	'use strict';
	(function () {
	var reset = function reset(e) {
	e.target.className = '';
	setTimeout(function () {
	e.target.className = 'meteor';
	}, 0);
	};
	var meteors = document.querySelectorAll('.meteor');
	for (var i = 0; i < meteors.length; i++) {
	if (window.CP.shouldStopExecution(1)) {
	break;
	}
	meteors[i].addEventListener('animationend', reset);
	}
	window.CP.exitedLoop(1);
	}());
	/* celsetial nav section*/
	body,
	html {
	background: black;
	}

	#wrap {
	width: 900px;
	margin: 0 auto;
	background: #99c;
	}

	#header {
	padding: 5px 10px;
	background: #ddd;
	}

	h1 {
	margin: 0;
	text-align: center;
	}

	#inputBox {
	float: left;
	width: 50%;
	background: LightCyan;
	height: 200px;
	}

	h2 {
	margin: 0 0 1em;
	}

	#outputBox {
	float: right;
	width: 50%;
	background: LavenderBlush;
	height: 200px;
	}

	#footer {
	clear: both;
	padding: 5px 10px;
	background: #cc9;
	}
	/*
	Orionid meteor shower 😎 ☄️
	A PEN BY jh3y
	http://codepen.io/jh3y/pen/XjojOm
	*/

	*{
	box-sizing: border-box;
	animation: fadeIn 0.5s;
	}

	.meteor {
	border: 2px solid transparent;
	border-bottom: 60px solid #fff;
	position: absolute;
	transform-origin: top right;
	animation: shower 0.5s;
	opacity: 0;
	}
	.meteor:after {
	content: '';
	position: absolute;
	top: 58px;
	left: 50%;
	height: 4px;
	width: 4px;
	border-radius: 100%;
	background: #fff;
	transform: translateX(-50%);
	box-shadow: 0 0 15px 0 #fff;
	}
	.star {
	display: inline-block;
	border-radius: 100%;
	background-color: #ff0;
	position: absolute;
	opacity: 0.5;
	}
	.star:nth-child(0) {
	height: 2px;
	width: 2px;
	opacity: 0.919051151024178;
	left: 95vw;
	top: 96vh;
	}
	.star:nth-child(1) {
	height: 4px;
	width: 4px;
	opacity: 0.209021392045543;
	left: 22vw;
	top: 28vh;
	}
	.star:nth-child(2) {
	height: 2px;
	width: 2px;
	opacity: 0.939062716672197;
	left: 49vw;
	top: 26vh;
	}
	.star:nth-child(3) {
	height: 2px;
	width: 2px;
	opacity: 0.542630158364773;
	left: 85vw;
	top: 0vh;
	}
	.star:nth-child(4) {
	height: 2px;
	width: 2px;
	opacity: 0.658576191635802;
	left: 26vw;
	top: 32vh;
	}
	.star:nth-child(5) {
	height: 1px;
	width: 1px;
	opacity: 0.124432906508446;
	left: 32vw;
	top: 37vh;
	}
	.star:nth-child(6) {
	height: 3px;
	width: 3px;
	opacity: 0.772838689619675;
	left: 53vw;
	top: 87vh;
	}
	.star:nth-child(7) {
	height: 1px;
	width: 1px;
	opacity: 0.74006663239561;
	left: 44vw;
	top: 25vh;
	}
	.star:nth-child(8) {
	height: 2px;
	width: 2px;
	opacity: 0.775946476263925;
	left: 54vw;
	top: 30vh;
	}
	.star:nth-child(9) {
	height: 4px;
	width: 4px;
	opacity: 0.869716696674004;
	left: 88vw;
	top: 8vh;
	}
	.star:nth-child(10) {
	height: 1px;
	width: 1px;
	opacity: 0.812722171656787;
	left: 48vw;
	top: 36vh;
	}
	.star:nth-child(11) {
	height: 4px;
	width: 4px;
	opacity: 0.74844204983674;
	left: 96vw;
	top: 78vh;
	}
	.star:nth-child(12) {
	height: 1px;
	width: 1px;
	opacity: 0.68167283362709;
	left: 10vw;
	top: 67vh;
	}
	.star:nth-child(13) {
	height: 2px;
	width: 2px;
	opacity: 0.942958110710606;
	left: 27vw;
	top: 94vh;
	}
	.star:nth-child(14) {
	height: 3px;
	width: 3px;
	opacity: 0.249342653434724;
	left: 23vw;
	top: 43vh;
	}
	.star:nth-child(15) {
	height: 1px;
	width: 1px;
	opacity: 0.251072004903108;
	left: 65vw;
	top: 85vh;
	}
	.star:nth-child(16) {
	height: 1px;
	width: 1px;
	opacity: 0.311507098376751;
	left: 33vw;
	top: 20vh;
	}
	.star:nth-child(17) {
	height: 4px;
	width: 4px;
	opacity: 0.2003990476951;
	left: 19vw;
	top: 27vh;
	}
	.star:nth-child(18) {
	height: 4px;
	width: 4px;
	opacity: 0.605244268663228;
	left: 64vw;
	top: 40vh;
	}
	.star:nth-child(19) {
	height: 3px;
	width: 3px;
	opacity: 0.942416806705296;
	left: 82vw;
	top: 59vh;
	}
	.star:nth-child(20) {
	height: 4px;
	width: 4px;
	opacity: 0.697782858973369;
	left: 61vw;
	top: 81vh;
	}
	.meteor:nth-child(0) {
	left: 56vw;
	top: 57vh;
	animation-delay: 3s;
	}
	.meteor:nth-child(1) {
	left: 32vw;
	top: 58vh;
	animation-delay: 6s;
	}
	.meteor:nth-child(2) {
	left: 1vw;
	top: 57vh;
	animation-delay: 4s;
	}
	.meteor:nth-child(3) {
	left: 71vw;
	top: 15vh;
	animation-delay: 5s;
	}
	.meteor:nth-child(4) {
	left: 99vw;
	top: 87vh;
	animation-delay: 11s;
	}
	.meteor:nth-child(5) {
	left: 2vw;
	top: 94vh;
	animation-delay: 6s;
	}
	.meteor:nth-child(6) {
	left: 26vw;
	top: 44vh;
	animation-delay: 15s;
	}
	.meteor:nth-child(7) {
	left: 63vw;
	top: 98vh;
	animation-delay: 9s;
	}
	.meteor:nth-child(8) {
	left: 16vw;
	top: 49vh;
	animation-delay: 13s;
	}
	.meteor:nth-child(9) {
	left: 1vw;
	top: 45vh;
	animation-delay: 13s;
	}
	.meteor:nth-child(10) {
	left: 41vw;
	top: 14vh;
	animation-delay: 15s;
	}


	body {
	/* overflow: hidden; */
	background: radial-gradient(ellipse farthest-corner at 10vw 95vw, #111 0%, #222 50%, #111 95%);

	}
	/*
	body:before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 30vw;
	height: 10vh;
	left: 0;
	background: #000;
	z-index: 1;
	border-radius: 50% 50% 0 0;
	}

	body:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80vw;
	height: 15vh;
	background: #000;
	z-index: 1;
	border-radius: 50% 50% 0 0;
	}
	*/

	@-moz-keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@-webkit-keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@-o-keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@keyframes fadeIn {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@-moz-keyframes shower {
	0% {
	transform: rotate(30deg) scaleY(0);
	opacity: 0;
	}
	65% {
	transform: rotate(30deg) scaleY(1);
	opacity: 1;
	}
	100% {
	transform: rotate(30deg) scaleY(1) translateY(500%);
	opacity: 0;
	}
	}
	@-webkit-keyframes shower {
	0% {
	transform: rotate(30deg) scaleY(0);
	opacity: 0;
	}
	65% {
	transform: rotate(30deg) scaleY(1);
	opacity: 1;
	}
	100% {
	transform: rotate(30deg) scaleY(1) translateY(500%);
	opacity: 0;
	}
	}
	@-o-keyframes shower {
	0% {
	transform: rotate(30deg) scaleY(0);
	opacity: 0;
	}
	65% {
	transform: rotate(30deg) scaleY(1);
	opacity: 1;
	}
	100% {
	transform: rotate(30deg) scaleY(1) translateY(500%);
	opacity: 0;
	}
	}
	@keyframes shower {
	0% {
	transform: rotate(30deg) scaleY(0);
	opacity: 0;
	}
	65% {
	transform: rotate(30deg) scaleY(1);
	opacity: 1;
	}
	100% {
	transform: rotate(30deg) scaleY(1) translateY(500%);
	opacity: 0;
	}
	}

	</style>