body {
  image-rendering: pixelated;
  background: url(/images/pBG1.png);
  background-position: 0 -3vw;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Verdana;
  color: black;
  overflow: hidden;
}

@keyframes vaguoutline {
  
  0%    {filter: opacity(10%)brightness(0.6)contrast(2.4)hue-rotate(217deg)saturate(9.9);
        left: 32.9vw; top: 25.5vw;}
  25%   {filter: opacity(50%)brightness(0.8)contrast(3.6)hue-rotate(217deg)saturate(7);
        left: 32.2vw; top: 25.5vw;}
  50%   {filter: opacity(10%)brightness(0.1)contrast(2.4)hue-rotate(20deg)saturate(9.9); 
        left: 34vw; top: 25.2vw;}
  75%   {filter: opacity(30%)brightness(0.6)contrast(2.4)hue-rotate(217deg)saturate(9.9);
        left: 32.9vw; top: 25.1vw;}
  100%  {filter: opacity(50%)brightness(0.7)contrast(3.4)hue-rotate(20deg)saturate(7); 
        left: 34vw; top: 25.6vw;}
}

stikeri {
  width: 15.5%;
  position: absolute;
  top: 25.6vw;
  left: 33.3vw;
  user-select: none;
}
stikeri:hover{
  filter: brightness(150%);
}
stikeri:active{
  filter: contrast(200%);
}
daff:hover{
  filter: brightness(150%);
}
daff:active{
  filter: contrast(200%);
}
val:hover{
  filter: brightness(150%);
}
val:active{
  filter: contrast(200%);
}
s1:hover{
  filter: brightness(150%);
}
s1:active{
  filter: contrast(200%);
}
s2:hover{
  filter: brightness(150%);
}
s2:active{
  filter: contrast(200%);
}
s3:hover{
  filter: brightness(150%);
}
s3:active{
  filter: contrast(200%);
}

st3 {
  width: 15.5%;
  position: absolute;
  top: 27vw;
  left: 33vw;
  transform-origin: 25% 50%;
  animation-delay: -0.5s;
  animation: vaguoutline 1.2s steps(1, start);
  animation-iteration-count: infinite;
  user-select: none;
}
st2 {
  width: 15.5%;
  position: absolute;
  top: 27vw;
  left: 32vw;
  transform-origin: 25% 50%;
  animation: vaguoutline 1s steps(1, start);
  animation-iteration-count: infinite;
  user-select: none;
}

daff{
  width: 11.5%;
  visibility: hidden;
  position: absolute;
  top: 19vw;
  left: 52vw;
  user-select: none;
}
@keyframes daffvaloutline{
  0% {filter: hue-rotate(200deg) saturate(500) brightness(100);}
  50% {filter: hue-rotate(50deg) saturate(500) brightness(100);}
  100% {filter: hue-rotate(200deg) saturate(500) brightness(100);}
}

daffO{
  width: 11.5%;
  visibility: hidden;
  transform-origin: 50% 50%;
  transform: scale(110%, 102%);
  position: absolute;
  top: 19vw;
  left: 52vw;
  animation: daffvaloutline 7s;
  animation-iteration-count: infinite;
  user-select: none;
}
valO{
  width: 8%;
  visibility: hidden;
  transform-origin: 50% 50%;
  transform: scale(110%, 102%);
  position: absolute;
  top: 19vw;
  left: 30vw;
  animation: daffvaloutline 7s;
  animation-iteration-count: infinite;
  user-select: none;
}
val{
  width: 8%;
  visibility: hidden;
  position: absolute;
  top: 19vw;
  left: 30vw;
  user-select: none;
}

s1{
  transform-origin: 50% 50%;
  visibility: hidden;
  position: absolute;
  width: 13%;
  top: 22vw;
  left: 65vw;
  user-select: none;
}
s1O{
  visibility: hidden;
  transform-origin: 50% 50%;
  transform: scale(110%, 102%);
  position: absolute;
  width: 13%;
  top: 22vw;
  left: 65vw; 
  animation: s1OAnim 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  user-select: none;
}
s2O{
  visibility: hidden;
  transform-origin: 50% 50%;
  transform: scale(110%, 102%);
  position: absolute;
  width: 13%;
  top: 18vw;
  left: 40vw; 
  animation: s2OAnim 6s;
  animation-delay: -0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  user-select: none;
}
s3O{
  visibility: hidden;
  transform-origin: 50% 50%;
  transform: scale(110%, 102%);
  position: absolute;
  width: 12%;
  top: 16vw;
  left: 15vw; 
  animation: s3OAnim 6s;
  animation-delay: -1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  user-select: none;
}
@keyframes s1OAnim{
  0% {filter: hue-rotate(0deg) saturate(200) brightness(100);}
  33% {filter: hue-rotate(0deg) saturate(200) brightness(0);}
  66% {filter: hue-rotate(0deg) saturate(200) brightness(0);}
  100% {filter: hue-rotate(0deg) saturate(200) brightness(100);}
}
@keyframes s2OAnim{
  0% {filter: hue-rotate(5deg) saturate(5) brightness(100);}
  33% {filter: hue-rotate(5deg) saturate(5) brightness(0);}
  66% {filter: hue-rotate(5deg) saturate(6) brightness(0);}
  100% {filter: hue-rotate(6deg) saturate(6) brightness(100);}
}
@keyframes s3OAnim{
  0% {filter: hue-rotate(100deg) saturate(200) brightness(100);}
  33% {filter: hue-rotate(100deg) saturate(200) brightness(0);}
  66% {filter: hue-rotate(100deg) saturate(200) brightness(0);}
  100% {filter: hue-rotate(100deg) saturate(200) brightness(100);}
}
s2{
  transform-origin: 50% 50%;
  visibility: hidden;
  position: absolute;
  width: 13%;
  top: 18vw;
  left: 40vw;
  user-select: none;
}
s2O{
  
}
s3{
  transform-origin: 50% 50%;
  visibility: hidden;
  position: absolute;
  width: 12%;
  top: 16vw;
  left: 15vw;
  user-select: none;
}

@media only screen and (max-width: 600px){
  body{
   background-position: 40% 15%;
   background-size: 400vw;
  }
  stikeri{
    width: 50%;
    top: 102vw;
    left: 25vw;
  }
  st2{
    width: 53%;
    transform: translate(-9vw, 74vw);
  }
  st3{
    width: 53%;
    transform: translate(-9vw, 74vw);
  }
  daff{
    width: 40%;
    top: 63vw;
  }
  daffO{
    width: 40%;
    top: 63vw;
  }
  val{
    width: 27%;
    left: 13vw;
    top: 65vw;
  }
  valO{
    width: 27%;
    left: 13vw;
    top: 65vw;
  }
  s1{
    width: 40%;
    top: 102vw;
    left: 57vw;
  }
  s1O{
    width: 40%;
    top: 102vw;
    left: 57vw;
  }
  s2{
    width: 40%;
    top: 102vw;
    left: 30vw;
  }
  s2O{
    width: 40%;
    top: 102vw;
    left: 30vw;
  }
  s3{
    width: 37%;
    top: 95vw;
    left: 8vw;
  }
  s3O{
    width: 37%;
    top: 95vw;
    left: 8vw;
  }
  
}