

.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  /*height: 200vh;*/
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#161616 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#1f1f1f 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: b .2s infinite alternate;
  mix-blend-mode: lighten;
  opacity: .9;
  visibility: visible;
}
@keyframes b{
  100% {background-position: 50% 0, 60% 50%}
} 

.redbg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#280000 0 0.0002%) 50% 0/2500px 2500px,
    repeating-conic-gradient(#000 0 0.0001%,#2e0000 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: b .2s infinite alternate;
  mix-blend-mode: lighten;
  opacity: .9;
  visibility: visible;
}
@keyframes b{
  100% {background-position: 50% 0, 60% 50%}
} 


/* .bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
} */

/* @keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
} */


a {
    color: whitesmoke;
}

a:hover {
    filter: drop-shadow(0px 0px 3px whitesmoke);
}



body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2em;
    background-color: rgb(9, 9, 10); 
    color: whitesmoke;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.title {
  text-align: center;
}

.furbies {
    text-align: center;
    display: flex; 
    gap: 30px;
    max-width:100vw;
	vertical-align: center;
}


.furbies img {
    max-height: 45vh;
min-height: 20vh;
    filter: drop-shadow(1px 0px 0px whitesmoke) 
    drop-shadow(-1px 0px 0px whitesmoke) 
    drop-shadow(0px 1px 0px whitesmoke) 
    drop-shadow(0px -1px 0px whitesmoke);
    image-rendering: pixelated;
}

.furbies img:hover {
    filter: drop-shadow(3px 0px 0px whitesmoke) 
    drop-shadow(-3px 0px 0px whitesmoke) 
    drop-shadow(0px 3px 0px whitesmoke) 
    drop-shadow(0px -3px 0px whitesmoke)
    drop-shadow(0 0 300px whitesmoke);
    
}
