cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div class="container-screenshot">
 <div class="container-game">

  <svg width="368" height="399" xmlns="http://www.w3.org/2000/svg" class="stars"><g id="New-Colors" fill="none" fill-rule="evenodd"><g id="Game-v.2"><g id="starGroup"><g id="starsGroup1"><g id="starsGroup1-inner2"><path d="M290.676516 151.814835v8" id="Shape-Copy-3" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M237.751007 126.43861v8" id="Shape-Copy-7" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path id="Star-Copy" fill="#EFD358" d="M141.977118 238.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942984-.57295 1.763356-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-6" fill="#EFD358" d="M108.6175 123.43861l-3.52671 1.8541.673542-3.92705-2.85317-2.781153 3.942983-.57295 1.763356-3.572948 1.763358 3.572947 3.942983.57295-2.85317 2.781152.673544 3.92705z"/><path id="Star-Copy-3" fill="#EFD358" d="M306.943064 192.962454l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763353-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-2" fill="#EFD358" d="M259.309066 238.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763357-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-7" fill="#EFD358" d="M333.671405 117.43861l-3.526712 1.8541.673542-3.92705-2.85317-2.781153 3.942984-.57295 1.763354-3.572948 1.763355 3.572947 3.942983.57295-2.85317 2.781152.673542 3.92705z"/><path d="M286.676516 155.814835h8" id="Shape-Copy-4" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M233.751007 130.43861h8" id="Shape-Copy-8" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/></g><g id="starsGroup1-inner1"><path d="M44.205295 145.814835v8" id="Shape-Copy-5" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path id="Star" fill="#EFD358" d="M96.6175 204.962454l-3.52671 1.854102.673542-3.92705-2.85317-2.781154 3.942983-.57295 1.763356-3.572948 1.763358 3.57295 3.942983.572948-2.85317 2.781153.673544 3.92705z"/><path id="Star-Copy-5" fill="#EFD358" d="M6.576315 226.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-8" fill="#EFD358" d="M361.599395 250.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-4" fill="#EFD358" d="M169.958562 160.814835l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763355-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path d="M40.205295 149.814835h8" id="Shape-Copy-6" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/></g></g><g id="starsGroup3" opacity=".344599"><g id="starsGroup3-inner2"><path d="M290.676516 5.814835v8" id="Shape-Copy-3" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path id="Star-Copy" fill="#EFD358" d="M141.977118 92.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942984-.57295 1.763356-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-3" fill="#EFD358" d="M306.943064 46.962454l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763353-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-2" fill="#EFD358" d="M259.309066 92.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763357-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path d="M286.676516 9.814835h8" id="Shape-Copy-4" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/></g><g id="starsGroup3-inner1"><path d="M44.205295-.185165v8" id="Shape-Copy-5" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path id="Star" fill="#EFD358" d="M96.6175 58.962454l-3.52671 1.854102.673542-3.92705-2.85317-2.781154 3.942983-.57295 1.763356-3.572948 1.763358 3.57295 3.942983.572948-2.85317 2.781153.673544 3.92705z"/><path id="Star-Copy-5" fill="#EFD358" d="M6.576315 80.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-8" fill="#EFD358" d="M361.599395 104.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-4" fill="#EFD358" d="M169.958562 14.814835l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763355-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path d="M40.205295 3.814835h8" id="Shape-Copy-6" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/></g></g><g id="starsGroup2" opacity=".297894"><g id="starsGroup2-inner2" fill="#EFD358"><path id="Star-Copy-5" d="M6.576315 372.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-6" d="M108.6175 269.43861l-3.52671 1.8541.673542-3.92705-2.85317-2.781153 3.942983-.57295 1.763356-3.572948 1.763358 3.572947 3.942983.57295-2.85317 2.781152.673544 3.92705z"/><path id="Star-Copy-8" d="M361.599395 396.530192l-3.526712 1.854102.673542-3.92705-2.85317-2.781154 3.942984-.57295 1.763354-3.572948 1.763355 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-4" d="M169.958562 306.814835l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763355-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-7" d="M333.671405 263.43861l-3.526712 1.8541.673542-3.92705-2.85317-2.781153 3.942984-.57295 1.763354-3.572948 1.763355 3.572947 3.942983.57295-2.85317 2.781152.673542 3.92705z"/></g><g id="starsGroup2-inner1"><path d="M290.676516 297.814835v8" id="Shape-Copy-3" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M237.751007 272.43861v8" id="Shape-Copy-7" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M44.205295 291.814835v8" id="Shape-Copy-5" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path id="Star" fill="#EFD358" d="M96.6175 350.962454l-3.52671 1.854102.673542-3.92705-2.85317-2.781154 3.942983-.57295 1.763356-3.572948 1.763358 3.57295 3.942983.572948-2.85317 2.781153.673544 3.92705z"/><path id="Star-Copy" fill="#EFD358" d="M141.977118 384.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942984-.57295 1.763356-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673543 3.92705z"/><path id="Star-Copy-3" fill="#EFD358" d="M306.943064 338.962454l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763353-3.572948 1.763356 3.57295 3.942983.572948-2.85317 2.781153.673542 3.92705z"/><path id="Star-Copy-2" fill="#EFD358" d="M259.309066 384.530192l-3.52671 1.854102.67354-3.92705-2.85317-2.781154 3.942985-.57295 1.763357-3.572948 1.763356 3.57295 3.942984.572948-2.85317 2.781153.673542 3.92705z"/><path d="M286.676516 301.814835h8" id="Shape-Copy-4" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M233.751007 276.43861h8" id="Shape-Copy-8" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/><path d="M40.205295 295.814835h8" id="Shape-Copy-6" stroke="#EFD358" stroke-width="2" stroke-linecap="square"/></g></g></g></g></g></svg>

	 
	 <svg width="414" height="570" xmlns="http://www.w3.org/2000/svg" class="icon-lighthouse" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M534.183487 569.57c6.54241 0 11.852192-3.998784 11.852192-8.925857V458.38952c-7.65652 2.5885-14.89821 6.105288-21.17987 10.835992-27.769688 20.913284-72.796165 20.913284-100.56585 0-27.769687-20.913284-72.79616-20.913284-100.56585 0-27.769686 20.913284-72.796163 20.913284-100.56585 0-27.769685-20.913284-72.79616-20.913284-100.565848 0-27.769686 20.913284-72.796163 20.913284-100.56585 0-6.28166-4.730704-13.52335-8.247492-21.179866-10.83599v102.25462c0 4.927074 5.30978 8.925858 11.85219 8.925858h521.484596z" id="path-1"/><filter x="-1.5%" y="-10.3%" width="102.9%" height="113.8%" filterUnits="objectBoundingBox" id="filter-2"><feOffset dy="-4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.137254902   0 0 0 0 0.137254902   0 0 0 0 0.192156863  0 0 0 0.0758605072 0" in="shadowBlurOuter1"/></filter><path d="M98.938 57.85278H9.6794c-4.927 0-8.926-2.54746-8.926-5.686362V6.67636C.7534 3.537587 4.7524.99 9.6794.99H98.938c4.927 0 8.9258 2.547586 8.9258 5.68636v45.490122c0 3.138774-3.9988 5.68636-8.9258 5.68636v-.000063z" id="path-3"/><path d="M98.938 58.189684H9.6794c-4.927 0-8.926-2.562553-8.926-5.720052V6.710052C.7534 3.552682 4.7524.99 9.6794.99H98.938c4.927 0 8.9258 2.56268 8.9258 5.720052v45.759644c0 3.15737-3.9988 5.720052-8.9258 5.720052v-.000064z" id="path-5"/></defs><g id="New-Colors" fill="none" fill-rule="evenodd"><g id="Game-v.2"><g id="icon-lighthouse"><path id="needed" fill-opacity="0" fill="#D8D8D8" fill-rule="nonzero" d="M-2.200054 0h420.53568v569.57H-2.200054z"/><path id="Shape" fill="#E6E6E6" fill-rule="nonzero" d="M78.441346 402.0824V259.2687h-160.6654v142.8137"/><path d="M78.441346 259.2687h-160.6654c0-44.3704 35.9622-80.3327 80.3327-80.3327 44.3704 0 80.3327 35.9623 80.3327 80.3327z" id="Shape" fill="#DB162F" fill-rule="nonzero"/><path id="Rectangle-8-Copy" fill="#D3D3D3" d="M19.377325 259.276295v161.195272h-20V259.276295z"/><g id="Group"><path id="Rectangle-8" fill="#DB162F" d="M-3.90498 261.822128l82.36597 47.726894v17.967563l-83.552456-48.373948z"/><path id="Rectangle-8-Copy-2" fill="#DB162F" d="M-3.90498 339.87393l82.36597 47.726895v17.967563l-83.552455-48.37395z"/><path id="Rectangle-8-Copy-3" fill="#444" opacity=".152287" d="M0 341.727515l19.463304 11.70641v17.975392L0 360.366917z"/><path id="Rectangle-8-Copy-4" fill="#444" opacity=".152287" d="M0 263.59006l19.463304 11.70641v17.97539L0 282.229463z"/></g><path id="Shape" fill="#B1AFAF" fill-rule="nonzero" d="M123.070646 553.822l-44.6293-151.7396h-160.6654l-44.6293 151.7396z"/><g id="wave" fill-rule="nonzero" transform="translate(-127.7)"><use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/><use fill="#76B5B5" fill-rule="evenodd" xlink:href="#path-1"/></g><path id="fadeLayer" fill="#242331" fill-rule="nonzero" opacity=".567595" d="M.000054 0h420.53568v569.57H.000054z"/><path d="M277.716766 267.89762c3.257375-1.364955 6.866372-2.086604 10.670766-2.013806 14.86392.284434 27.10652 12.527034 27.390953 27.390953l1.30131 68.009002c.284434 14.863784-11.49848 26.646663-26.362398 26.362262-3.044362-.05823-5.978755-.618143-8.722968-1.599456L39.33785 326.446683l238.378914-58.549097v.000032z" id="light2" fill="#EFD358" fill-rule="nonzero" opacity=".803499"/><g id="Oval"><g id="Mask"><path d="M69.737946 342.90878h-89.2586c-4.927 0-8.926-2.54746-8.926-5.68636v-45.49006c0-3.138774 3.999-5.68636 8.926-5.68636h89.2586c4.927 0 8.9258 2.547586 8.9258 5.68636v45.490122c0 3.138774-3.9988 5.68636-8.9258 5.68636v-.000063z" id="path-1" fill="#444" fill-rule="nonzero"/><g id="Clipped" transform="translate(-29.2 285.056)"><mask id="mask-4" fill="#fff"><use xlink:href="#path-3"/></mask><use id="Mask" fill="#242331" fill-rule="nonzero" opacity=".57" xlink:href="#path-3"/><g id="clipped-inner" mask="url(#mask-4)"><mask id="mask-6" fill="#fff"><use xlink:href="#path-5"/></mask><g id="path-1"/><ellipse id="Oval" fill="#C6B050" fill-rule="nonzero" cx="95.8664" cy="45.6194" rx="26.7776" ry="26.7776"/></g></g></g></g></g></g></g></svg>
	 
	 
	 
  <div class="text-top">
   <h1 class="title">Lighthouse Hill</h1>
   <button>Start Game</button>
  </div>
	 <div class="modal modal-inactive">
		 <div class="modal-inner">
		 <svg width="42" height="40" class="icon-exit" xmlns="http://www.w3.org/2000/svg"><g id="New-Colors" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Message" stroke="#343434"><g id="ui-48px-outline-1_bold-remove"><path id="Shape" d="M41.299946 34l-14-14 14-14-6-6-14 14-14-14-6 6 14 14-14 14 6 6 14-14 14 14z"/></g></g></g></svg>
  <h2>Hi there!</h2>
  <p>My name is <span>Benjamin Modayil</span> and I’m a Front-End Designer/Developer.</p>
  <p>This “game” was initially created for my capstone project for my Web Design Minor at Cedarville University.</p>
  <p>My primary purpose was to take a deep-dive into JavaScript so I can learn more interactive ways of creating media for the Web.
  </p>
  <p>Currently, I’m revamping the original concept with a redesign as I was originally concerned with function over form.
  </p>
  <p>For any updates follow one of the links below:
  </p>
	 <ul>
	 <li><a href="https://dribbble.com/modayilme"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/549579/logo-dribbble.svg" alt="Dribbble Link" /><span>Dribbble</span></a></li>
		 <li><a href="https://twitter.com/modayilme"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/549579/logo-twitter.svg" alt="Twitter Link" /><span>Twitter</span></a></li>
	 <li><a href="https://www.instagram.com/modayilme/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/549579/logo-instagram.svg" alt="Instagram Link" /><span>Instagram</span></a></li>
	 <li><a href="https://codepen.io/modayilme/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/549579/logo-codepen.svg" alt="Codepen Link" /><span>Codepen</span></a></li></ul>
 </div>
		 </div>
 </div>
 
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700|Poiret+One|Raleway:400,500');
// @import "breakpoint";
@function rd($x, $y) {
	$size: percentage($x / $y);
	@return $size;
}
@function rem($x) {
	$size: ($x / 16);
	@return #{$size}rem;
}
@mixin fz($size) {
	font-size: #{$size}px; //Fallback in px
	font-size: rem($size);
}
%clearfix {
	&:after {
		content: " ";
		display: block;
		clear: both;
	}
}
*, *:before, *:after {
	box-sizing: border-box;
}
// start code

$c-night: #242331;
$c-black: #2A2A2A;
$c-yellow: #EFD358;
// social colors
$c-dribbble: #E54B87;
$c-twitter: #1DA1F2;
$c-instagram: #8a3ab9;
$c-codepen: #000000;

// fonts
$f-po: 'Poiret One', cursive;
$f-rale: 'Raleway', sans-serif;
$f-merri: 'Merriweather', serif;

.container-screenshot {
	padding: 2rem;
	background-color: $c-black;
}
.container-game {
	width: 414px;
	height: 680px;
	margin: 0 auto;
	overflow: hidden;
	background-color: $c-night;
	position: relative;
	-webkit-box-shadow: 3px 6px 5px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 3px 6px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 6px 5px 0px rgba(0, 0, 0, 0.2);
}

.text-top {
	padding-top: rem(168);
	position: absolute;
	z-index: 2;
	top: 0;
	width: 100%;
}

h1.title {
	color: white;
	@include fz(56);
	font-weight: 300;
	font-family: $f-po;
	text-align: center;
	margin-bottom: rem(328);
}
button {
	color: white;
	background-color: $c-black;
	@include fz(16);
	font-family: $f-rale;
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
	display: block;
	margin: 0 auto;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: rem(12) rem(29.92) rem(11.16);
	transition: all 0.25s ease-in-out;
	cursor: pointer;

	&:focus, &:hover {
		border: 1px solid $c-yellow;
		outline: 0px;
	}
}

//modal
.modal {
	position: absolute;
	top: 0;
	z-index: 3;
	background-color: white;
	height: 100%;
	transition: all 0.8s ease-in-out;

	h2 {
		@include fz(56);
		font-family: $f-rale;
		font-weight: 400;
		margin-bottom: 1rem;
		padding: rem(30) rd(35, 414) rem(0);
	}
	p {
		@include fz(16);
		font-family: $f-merri;
		font-weight: 400;
		line-height: 1.5;
		padding: rem(0) rd(35, 414) rem(0);

		span {
			font-weight: 600;
		}
	}

	ul {
		padding-left: 0;
		@extend %clearfix;
		margin: 0;
		position: absolute;
		bottom: 4px;
	}
	li {
		list-style: none;
		float: left;
		height: 48px;
		width: 50%;

		&:nth-of-type(1) {
			background-color: $c-dribbble;
		}
		&:nth-of-type(2) {
			background-color: $c-twitter;
			a {
				img {
					top: 2px;
					position: relative;
				}
				span {
					top: -3px;
				}
			}
		}
		&:nth-of-type(3) {
			background-color: $c-instagram;
		}
		&:nth-of-type(4) {
			background-color: $c-codepen;
		}
	}
	img {
		// padding: rem(8.8) rem(0) rem(8.62) rem(25.3);
	}
	a {
		color: white;
		text-decoration: none;
		display: block;
		padding: rem(8);
		padding-left: 1.5rem;
		font-family: $f-rale;
		@include fz(18);
		font-weight: 500;
		&:nth-of-type(1) {
			span {
					top: -8px;
			}
		}	
		span {
			// padding: rem(16.6) rem(24) rem(11.7);
			padding-left: rem(24);
			display: inline-block;
			position: relative;

			
		}
		&:hover {
			text-decoration: underline;
		}
		&:nth-of-type(even) {
			clear: right;
		}
	}
}

.modal-inner {
	position: relative;
	height: 93.75%;
}
.modal-inactive {
	transform: translate(0, 100%);
}

.icon-exit {
	cursor: pointer;
	position: absolute;
	right: 33px;
	transform: scale(0.8);
	transition: all 0.3s ease-in-out;
	
	&:hover {
		transform: scale(1);
	}
}

// lighthouse and animations
.icon-lighthouse {
	position: absolute;
	bottom: 0;
	left: 0;
}
#icon-lighthouse {
	position: absolute;
	bottom: 0;
}
#Clipped {
	transform-origin: center;
	overflow: hidden;
}
#clipped-inner {
	// animation: clipped 20s both infinite ease-in-out;
}
@keyframes clipped {
	0% {
	}

	25% {
		transform: translate(-29.2px, 280px);
	}
	75% {
		transform: translate(-29.2px, 285px);
	}
	100% {
	}
}

#light2 {
	transform-origin: left;
	animation: light 18.5s both infinite ease-in-out;
	opacity: 0.8;
}
@keyframes light {
	0% {
		opacity: 0.7;
		transform: rotate(0deg) scale(1.1);
	}

	25% {
		transform: rotate(-5deg) scale(1.1);
		// opacity: 1;
	}
	75% {
		transform: translate(10px, -13px) rotate(8deg) scale(1.3);
		// opacity: 1;
	}
	100% {
		opacity: 0.7;
		transform: rotate(0deg) scale(1.1);
	}
}

#wave {
	transform-origin: left;
	position: absolute;
	bottom: 0;
	-webkit-box-shadow: 0px -5px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -5px 16px 0px rgba(0,0,0,0.75);
box-shadow: 0px -5px 16px 0px rgba(0,0,0,0.75);
	animation: wave 20s both infinite ease-in-out;
}

@keyframes wave {
	0% {
		opacity: 1;
	}

	50% {
		transform: scale(1.2) translateY(-10px);
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

.stars {
	margin: 0 auto;
	display: block;
}
#starsGroup1, #starsGroup2, #starsGroup3 {
	opacity: 1;
}
#starsGroup1-inner1 {
	animation: starsFade 15s 2s both infinite ease-in-out;
}

#starsGroup1-inner2 {
	animation: starsFade 15s both infinite ease-in-out;
}
#starsGroup2-inner1 {
	animation: starsFade 18s 1s both infinite ease-in-out;
}

#starsGroup2-inner2 {
	animation: starsFade 15s 2s both infinite ease-in-out;
}

#starsGroup3-inner1 {
	animation: starsFade 15s 1s both infinite ease-in-out;
}

#starsGroup3-inner2 {
	animation: starsFade 17s 3s both infinite ease-in-out;
}

@keyframes starsFade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}

            
          
!
            
              function hasClass(ele, cls) {
	return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}

function addClass(ele, cls) {
	if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
	if (hasClass(ele, cls)) {
		var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
		ele.className = ele.className.replace(reg, " ");
	}
}

var red = "#AA3C3A";
var orange = "#FFC855";
var black = "#2A2A2A";
var blue = "#7379D4";
var green = "#488B45";
var purple = "#7b1fa2";
var white = "#fafafa";

var button = document.querySelector('button');
var iconExit = document.querySelector('.icon-exit');
var modal = document.querySelector('.modal');

button.onclick = function() {
	modal.classList.remove('modal-inactive');
}

iconExit.onclick = function() {
	modal.classList.add('modal-inactive');
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console