@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
}
body{
  width: auto;
  height: 100vh;
  background: #000;
  background-image: url(../img/SPBXqGY.jpg);
  cursor: url(../img/FBQaxLY.png), default;
  overflow:hidden;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  
}
.glitch{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:100px;
  font-family: 'Nosifer', cursive;
  font-weight:700;
  color: #fff;
}
  .text{
  color: #fff;
  font-size: 100px;
  letter-spacing: 14px;
}
.text::before,.text::after{
  display: flex;
  justify-content: center;
  align-items: center;
  content: "Friday惊悚文字";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%; 
 }
.text::before{
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}
.text::after{
  color: #3498db;
  animation: glitch-effect 2s infinite;
}
@keyframes glitch-effect{
  0%{
    left: -3px;
    top: -3px;
  }
  25%{
    left: 2px;
    top: 1px;
  }
  50%{
    left: -2px;
    top: 2px;
  }
  75%{
    left: 1px;
    top: -2px;
  }
  100%{
    left: 1px;
    top: -2px;
  }
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
  .glitch{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size:40px;
  font-weight:500;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
  .glitch{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight:500;
  }
  }