﻿:root {
	--bg-space: #212121;
	--bg-star: #ffc107;
}
#blinking-star {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: var(--bg-space);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -9999;
}
#blinking-star figure {
	margin: 0;
}
#blinking-star .star {
	display: block;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 48px;
	height: 48px;
	background: var(--bg-star);
	overflow: hidden;
	z-index: 2;
	animation: glitter 4.5s linear 0s infinite normal;
	-webkit-animation: glitter 4.5s linear 0s infinite normal;
	-moz-animation: glitter 4.5s linear 0s infinite normal;
	-ms-animation: glitter 4.5s linear 0s infinite normal;
	-o-animation: glitter 4.5s linear 0s infinite normal;
}
#blinking-star .star-top, .star-bottom{
	position: relative;
	display: block;
}
#blinking-star .star-top:before, 
#blinking-star .star-top:after,
#blinking-star .star-bottom:before,
#blinking-star .star-bottom:after {
	content: "";
	width: 48px;
	height: 48px;
	background: var(--bg-space);
	border-radius: 25%;
	position: absolute;
}
/*CSS3 pseudo class for positioning curves*/
#blinking-star .star-top:before {
	top: -24px;
	left: -24px;
}
#blinking-star .star-top:after {
	bottom: -24px;
	left: 24px;
}
#blinking-star .star-bottom:before {
	top: 24px;
	left: -24px;
}
#blinking-star .star-bottom:after {
	top: 24px;
	left: 24px;
}
/*css3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
	0%   { -webkit-transform: scale(1.0); opacity: 1; }
	25%  { -webkit-transform: scale(0.5); opacity: 0; }
	50%  { -webkit-transform: scale(1.0); opacity: 1; }
	75%  { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0%   { -moz-transform: scale(1.0); opacity: 1; }
	25%  { -moz-transform: scale(0.5); opacity: 0; }
	50%  { -moz-transform: scale(1.0); opacity: 1; }
	75%  { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}