html, body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;

  background-image: url("img/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: calc(50% - -6px) calc(50% - 90px)
  
}




background-ring {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)) blur(3px);
     
  
}

#main{

}		
		
.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

.glow {
  
  color: #fdff84;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fdff84, 0 0 20px #fdff84, 0 0 30px #fa9140, 0 0 40px #fa9140, 0 0 50px #fa9140, 0 0 60px #fa9140, 0 0 70px #fa9140;
  }
  to {
    text-shadow: 0 0 20px #fdff84, 0 0 30px #fff567, 0 0 40px #fff567, 0 0 50px #fff567, 0 0 60px #fff567, 0 0 70px #fff567, 0 0 80px #fff567;
  }
}