.loader-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
background-color: black;
}

.loader {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
text-align: center;
box-shadow: none;
border: 10px solid rgba(255, 215, 0, 0.8);
border-radius: 100%;
animation: shadow 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader #particles-js {
position: absolute;
width: 100%;
height: 100%;
filter: drop-shadow(0px 0px 2px gold);
}
.loader:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
box-shadow: inset 0px 0px 40px 5px gold;
border-radius: 100%;
}
.loader:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
box-shadow: inset 0px 0px 0px 8px rgba(18, 17, 142, 0.38);
border-radius: 100%;
}
.loader canvas {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 100%;
}
.loader--face {
position: absolute;
width: 100px;
height: 100px;
}
.loader--face--eyes {
position: absolute;
top: 15%;
left: 50%;
display: flex;
margin: auto;
transform: translateX(-50%);
}
.loader--face--eyes span {
margin-right: 10px;
margin-left: 10px;
width: 12px;
height: 12px;
background-color: gold;
box-shadow: 0px 0px 40px 5px gold;
border-radius: 100%;
}
.loader--face--smile {
transform-origin: center center;
animation: rotate 2s linear infinite;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}
.loader--face--smile circle {
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-dasharray: 150, 200;
stroke-dashoffset: -10;
stroke-linecap: round;
}

@keyframes shadow {
0% {
  box-shadow: 0px 0px 40px 2px gold;
}
50% {
  box-shadow: 0px 0px 40px 0 gold;
}
100% {
  box-shadow: 0px 0px 40px 2px gold;
}

}

@keyframes rotate {
100% {
  transform: rotate(360deg);
}
}
@keyframes dash {
0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35;
}
100% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -124;
}
}

/* .loaded .loader-wrapper {

  -webkit-transition: all 0.3s 1s ease-out;
          transition: all 0.3s 1s ease-out;
}
.loaded .loader-wrapper {
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} */

.loaded .loader--face--eyes img {
  -webkit-transition: all 0.5s 2s ease-out;
  transition: all 0.5s 2s ease-out;
  transform: scale(1.8);
  /* width: 100px; */
}

/* .loaded #loader {
  opacity: 0;
}

.loaded .loader-wrapper {
  visibility: hidden;
} */