* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

a {
    color: #FFF;
    text-decoration: red wavy underline;
}

audio {
    display: none;
}

img {
    position: absolute;
}

.background {
    z-index: 1;
    position: fixed;
    background-image: url("src/DSC040322.webp");
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    transform: scale(1.1);
    display: flex;
	justify-content: center;
	align-items: center;
}

.content {
    z-index: 9999;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
	justify-content: center;
	align-items: center;
}

.foreground span {
    filter: blur(6px);
  }

.foreground {
    margin: 0vmin;
    padding: 0;
    z-index: 9999;
    position: fixed;
    font-size: 1.25em;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
    font-family: 'Special Elite';
    font-weight: 200;
    transform: translate(0, -2.5vmin);
}

.lights {
    width: 55vmin;
    height: 40vmin;
    transform: translate(-5vmin, -5vmin);
}


.light {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    -webkit-animation: 'screen'  infinite;
    animation: 'screen' infinite;
    background: -webkit-radial-gradient(center, ellipse cover,  #FFF 0%,rgba(0,0,0,0) 100%);
    box-shadow:0px 0px 5px 0px #FFF;
}    
  
  @keyframes screen {
    from {
      opacity: 0;
    }
  
    25%{
      opacity: 0.3;
    }
  
    50%{
      opacity: 0.75;
    }
  
    75%{
      opacity: 1;
  
    }
  
    to{
      opacity: 0;
    }
  }