/*citation css */
body{
  background-color: black;
}



.box {
    margin-top: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  padding-left: 10vw;
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}
.item:nth-child(1n) {
  width: 100%;
  padding-bottom: 12vh;
}
.item:nth-child(3n) {
  width: 100%;
}

.item + .item {
padding-left: 10vw;
}
/*glitch css */
.glitch {
  color: rgb(223, 191, 191);
  position: relative;
  font-size: 5vw;
  // margin: 70px 200px;
  animation: glitch 5s 5s infinite;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: -5px 0 magenta;
  /* background: black; */
  overflow: hidden;
  top: 0;
  animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -5px 0 lightgreen;
  /* background: black; */
  overflow: hidden;
  top: 0;
  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}

@keyframes glitch {
  1%{
    transform: rotateX(10deg) skewX(90deg);
  }
  2%{
    transform: rotateX(0deg) skewX(0deg);
  }
}
.glow {
  @extend .glitch;
  text-shadow: 0 0 1000px rgb(223, 191, 191);
  color: transparent;
  position: absolute;
  top: 0;
}
p {
  white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 60%;
}
ul.a {
  list-style-type: circle;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 1.1vw;
    color: white;
    text-transform: uppercase;
    letter-spacing: .13em;
     line-height: 1.8;
    animation: glitch-2 5s 5.02s infinite;
}
.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: 1.1vw;
  color: white;

  letter-spacing: .1em;
  text-align: center;
  position: absolute;

  animation: glitch-2 5s 5.02s infinite;
}