html,body{
  margin:0;
  overflow:hidden;
  height:100%;
  background:black;
}

.container{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  background: radial-gradient(black,black);
}


.black-parade{
  width:100%;
  height:100%;
  position:absolute;
}

.black-parade:before{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.5));
  
}

.black-parade .row{
   display:flex;
   justify-content:space-between;
   width:100%;
}

.black-parade .row:nth-child(2){
  position:absolute;
  top:-10px;
  left:-15%;
  width:130%;
}

.main-parade{
  width:300px;
  position:absolute;
}

.main-face{
  height:100%;
  width:100%;
  position:fixed;
  z-index:10;
  display:flex;
  align-items:flex-end;
}

.container:before, .main-face:before, .main-face:after{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
}

.container:before{
  background: rgba(0,0,0,0.5);
}

.main-face:before{
  background:radial-gradient(circle at 50% 100%,transparent,black 35%);
  opacity:0.8;
  animation: changeShadow 5s infinite alternate-reverse;
  transition: opacity;
}

.main-face:after{
  background:radial-gradient(circle at 50% 100%,rgba(255,255,0,0.2),rgba(255,165,0.2) 15%,transparent 45%);
  opacity:0.5;
  animation: changeGlow 5s infinite alternate-reverse;
  transition: opacity;
}

.main-face svg{
  max-height:170%;
  min-height:170%;
}

.symbols{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
}

.symbols svg g{
  fill:rgba(0,0,0,0);
}



@media only screen and (orientation:portrait){
    
  .black-parade{
    width:140%;
  }
  
  .main-face svg{
    max-height:none;
    min-height:auto;
    min-width:350px;
  }
}


/*@media only screen and (orientation:portrait) and (min-width: 374px) and (max-width: 374px) and (min-width: 811px) and (max-width: 813px)
  
    
  .black-parade{
    width:200%;
  }
  
  .main-face{
    width:130%;
  }
}*/

@keyframes changeGlow{  
  0%,20%{
    opacity:0.5;
  }
  
  50%{
    opacity:0.95;
  }

  80%,100%{
    opacity:0.5;
  }
  
}

@keyframes changeShadow{  
  0%,20%{
    opacity:0.95;
  }
  
  50%{
    opacity:0.6;
  }

  80%,100%{
    opacity:0.95;
  }
  
}