body {
	background: #000;
}

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.element {
  width: 50%;
  height: auto;
}

@media (min-width: 768px) {
  .element {
    width: 33.33%;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .element {
    width: 25%;
    height: auto;
  }
}

.container {
  position: fixed;
    bottom: 280px;
    left: 50%;
    transform: translateX(-50%);
}
.object {
	margin: auto;
	width: 300px;
	height: 500px;
	background: black;
	border-radius: 45% 45% 0 0;
	position: relative;
  top: 240px;
  animation: setBackground 100ms linear 4s;
  animation-fill-mode: forwards; 
}
.object:before {
	content: " ";
  display: block;
  width: 11px;
  height: 185px;
  position: absolute;
  top: -55px;
  left: 50%;
  background: inherit;
  animation-fill-mode: forwards;
  border-radius: 100%;
}
.object:after {
	content: " ";
  display: block;
  width: 0;
  height: 0;
  border: 240px solid transparent;
  border-radius: 160px;
  border-left-color: transparent;
  border-bottom-color: black;
  position: absolute;
  bottom: -35px;
  left: -86px;
  animation: setborder 100ms linear 4s;
  animation-fill-mode: forwards; 
}
.object .eye {
	background: #FFF;
  width: 80px;
  height: 87px;
  margin-right: 50%;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
  top: -19px;
  left: 25%;
  display: inline-block;
}
.object .eye .eyelashes span{
	height: 29px;
  width: 5px;
  display: block;
  background: #000;
  position: relative;
  z-index: 0
}
.object .eye .eyelashes .eyelashe-1 {
  transform: rotate(143deg);
  position: absolute;
  top: -13px;
  left: 0px;
}
.object .eye .eyelashes .eyelashe-2 {
  transform: rotate(173deg);
  position: absolute;
  top: -28px;
  left: 28px;
}
.object .eye .eyelashes .eyelashe-3 {
  transform: rotate(196deg);
  position: absolute;
  top: -25px;
  left: 55px;
}
.object .eye .circle-black {
	background: #333;
  width: 50px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 14px;
  animation: eyemove 3s 2s ease-in-out  infinite alternate;
}
.object .eye .circle-white {
  background: linear-gradient(45deg, #FFF, #928d8d);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 15px;
  opacity: 1;
  animation: lenseyemove 3s 2s ease-in-out  infinite alternate;
}
.container-candle {
	position: relative;
  top: -225px;
  left: 16px;
  animation: boxcandle 3s ease-in-out  1s;
  animation-fill-mode: forwards; 
  opacity: 0
}
.candle-effect {
	position: absolute;
	top: 200px;
	left: 100px;
	animation: filcker 1s linear infinite;
}
.effect {
	box-shadow: 2px 2px 2px red;
}
.candle {
	position: absolute;
	bottom: 0;
	border-radius: 50% 0 50% 50%;
	transform: rotate(-45deg);
}
.darkslateblue {
	width: 80px;
  height: 80px;
  background: #673AB7;
  box-shadow: 0px 0px 10px 5px #673AB7;
}
.darkbule {
	left: 10px;
  width: 60px;
  height: 60px;
  background: #3F51B5;
  box-shadow: 0px 0px 12px 6px #3F51B5;
}
.cadetblue {
	left: 18px;
  width: 45px;
  height: 45px;
  background: #2196F3;
  box-shadow: 0px 0px 9px 4px #2196F3;
}
.white {
	left: 22px;
	width: 35px;
	height: 35px;
	background: rgb(255, 255, 255);
	box-shadow: 0px 0px 9px 4px rgb(255, 255, 255);
}

.blue {
  left: 32px;
  width: 15px;
  display: none;
  height: 15px;
  bottom: -50px;
  background: rgb(0, 0, 139);
  box-shadow: 0px 0px 15px 10px rgb(0, 0, 139);
}
.black {
	left: 20px;
	display: none;
  width: 40px;
  height: 40px;
  bottom: -50px;
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}
.base {
	border-radius: 50%;
	position: absolute;
}
.light-about-darkslateblue {
	position: absolute;
  width: 300px;
  left: -13px;
  height: 300px;
  border: 2px solid darkslateblue;
  box-shadow: 0 0 5px 5px darkslateblue;
  border-radius: 50%;
  filter: blur(20px);
	animation: filcker 1s linear infinite;
}
.light-about-cornflowerblue {
	position: absolute;
  width: 260px;
  left: 5px;
  top: 30px;
  height: 260px;
  border: 2px solid cornflowerblue;
  box-shadow: 0 0 5px 5px cornflowerblue;
  border-radius: 50%;
  filter: blur(20px);
  animation: filcker 1s linear infinite;
}
@keyframes filcker {
	0%{transform: rotate(-1deg);}
	20%{transform: rotate(2deg) scaleY(1.2)}
	40%{transform: rotate(-1deg);}
	60%{transform: rotate(1deg);}
	80%{transform: rotate(-1deg) scaleY(1.2);}
	100%{transform: rotate(1deg);}
}
@keyframes eyemove {
	0%{top:20px;}
	20%{top:0px;}
	40%{top:0px;}
	60%{top:20px;}
	80%{top:20px;}
	100%{top:20px;}
}
@keyframes lenseyemove {
	0%{top:20px;}
	20%{top:0px;}
	40%{top:0px;}
	60%{top:20px;}
	80%{top:20px;}
	100%{top:20px;}
}
@keyframes setBackground {
    form {  background: black; } 
    to {  background: #2196f3; } 
}
@keyframes setborder {
   form {  border-bottom-color: transparent; } 
    to {  border-bottom-color: #2196f3; } 
}
@keyframes boxcandle {
    form { opacity: 0  }
    to { opacity: 1 }
}