*,

*::after,

*::before {

	box-sizing: border-box;

}



html {

	background: #000;

}



body {

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	height: 100vh;

	overflow: hidden;

	color: #fff;

	color: var(--color-text);

	background-color: #000;

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

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}



/* Color schemes */

.demo-1 {

	--color-text: #fff;

	--color-bg: #000;

	--color-link: #8fe8ff;

	--color-link-hover: #fff;

	--color-info: #72af3a;

	--color-nav: #fff;

}



.demo-2 {

	--color-text: #fff;

    --color-bg: #000;

    --color-link: #9cf9db;

    --color-link-hover: #fff;

    --color-info: #f3a145;

    --color-nav: #fff;

}



.demo-3 {

	--color-text: #fff;

	--color-bg: #a9b1b7;

	--color-link: #201b18;

	--color-link-hover: #224d94;

	--color-info: #fff473;

	--color-nav: #fff;

}



.demo-4 {

	--color-text: #81838c;

    --color-bg: #000;

    --color-link: #96e23e;

    --color-link-hover: #fff;

    --color-info: #ea7836;

    --color-nav: #fff;

}



.demo-5 {

    --color-text: #fff;

    --color-bg: #000;

    --color-link: #fff;

    --color-link-hover: #2a3cbb;

    --color-info: #f7fb40;

    --color-nav: #fff;

}



/* Fade effect */

.js body {

	opacity: 0;

	transition: opacity 0.3s;		

}



.js body.render {

	opacity: 1;

}



/* Page Loader */

.js .loading::before {

	content: '';

	position: fixed;

	z-index: 100000;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: var(--color-bg);

}



.js .loading::after {

	content: '';

	position: fixed;

	z-index: 100000;

	top: 50%;

	left: 50%;

	width: 60px;

	height: 60px;

	margin: -30px 0 0 -30px;

	pointer-events: none;

	border-radius: 50%;

	opacity: 0.4;

	background: var(--color-link);

	animation: loaderAnim 0.7s linear infinite alternate forwards;

}



@keyframes loaderAnim {

	to {

		opacity: 1;

		transform: scale3d(0.5,0.5,1);

	}

}



a {

	text-decoration: none;

	color: #5d93d8;

	color: var(--color-link);

	outline: none;

}



a:hover,

a:focus {

	color: #423c2b;

	color: var(--color-link-hover);

	outline: none;

}



.hidden {

	position: absolute;

	overflow: hidden;

	width: 0;

	height: 0;

	pointer-events: none;

}



.message {

	background: var(--color-text);

	color: var(--color-bg);

	text-align: center;

	padding: 1em;

	display: none;

	position: relative;

	z-index: 100;

}



/* Icons */

.icon {

	display: block;

	width: 1.5em;

	height: 1.5em;

	margin: 0 auto;

	fill: currentColor;

}



main {

	position: relative;

	width: 100%;;margin:0 auto;align-items:center;justify-content:center

}



.content {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	min-height: 100vh;

	margin: 0 auto;

}



.content--fixed {

	position: fixed;

	z-index: 10000;

	top: 0;

	left: 0;

	display: grid;

	align-content: space-between;

	width: 100%;

	max-width: none;

	height: 100vh;

	padding: 1.5em;

	pointer-events: none;

	grid-template-columns: 50% 50%;

	grid-template-rows: auto auto 4em;

	grid-template-areas: 'header ...'

	'... ...'

	'github demos';

}



.content--fixed a {

	pointer-events: auto;

}



/* Header */

.codrops-header {

	position: relative;

	z-index: 100;

	display: flex;

	flex-direction: row;

	align-items: flex-start;

	align-items: center;

	align-self: start;

	grid-area: header;

	justify-self: start;

}



.codrops-header__title {

	font-size: 1em;

	font-weight: bold;

	margin: 0;

	padding: 0.75em 0;

}



.info {

	margin: 0 0 0 1.25em;

	font-style: italic;

	color: var(--color-info);

	font-weight: bold;

}



.github {

	display: block;

	align-self: end;

	grid-area: github;

	justify-self: start;

}



.demos {

	position: relative;

	display: block;

	align-self: end;

	text-align: center;

	grid-area: demos;

}



.demo {

	margin: 0 0 0 0.15em;

}



.demo:hover,

.demo:focus {

	opacity: 0.5;

}



.demo span {

	white-space: nowrap;

	text-transform: lowercase;

	pointer-events: none;

}



.demo span::before {

	content: '#';

}



a.demo--current {

	pointer-events: none;

}



/* Top Navigation Style */

.codrops-links {

	position: relative;

	display: flex;

	justify-content: center;

	margin: 0 1em 0 0;

	text-align: center;

	white-space: nowrap;

}



.codrops-icon {

	display: inline-block;

	margin: 0.15em;

	padding: 0.25em;

}



.scene {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	pointer-events: none;

	z-index: 1;

}



@media screen and (min-width: 55em) {

	.demos {

		display: flex;

		justify-self: end;

	}

	.demo {

		display: block;

		width: 17px;

		height: 17px;

		margin: 0 4px;

		border-radius: 50%;

		background: var(--color-link);

	}

	a.demo--current {

		background: var(--color-link-hover);

	}

	.demo span {

		position: absolute;

		line-height: 1;

		right: 100%;

		display: none;

		margin: 0 1em 0 0;

	}

	.demo--current span {

		display: block;

	}

}



@media screen and (max-width: 55em) {

	.message {

		display: block;

	}

	.content--fixed {

		position: relative;

		z-index: 1000;

		display: block;

		padding: 0.85em;

	}

	.codrops-header {

		flex-direction: column;

		align-items: center;

	}

	.codrops-header__title {

		font-weight: bold;

		padding-bottom: 0.25em;

		text-align: center;

	}

	.github {

		display: block;

		margin: 1em auto;

	}

	.codrops-links {

		margin: 0;

	}

}