html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "PP Neue Montreal Medium", "PP Neue Montreal Medium Placeholder", sans-serif;
  font-size: 16px; 
  color: #fff;
  max-width: 100vw;
  overflow-x: hidden;
}

ol,ul {
  list-style:none;
  margin: 0;
}


.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  padding: 1rem 2rem;
  box-sizing: border-box;
  z-index: 100;
  text-transform: uppercase;
}

.head a {
  color: #fff;
  font-size: 2rem;
  margin-right: 2rem;
  text-decoration: none;
  font-weight: bold;
}

.container {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  max-width: 100vw;
  position: relative;
  overflow-x: hidden;
}

#home {
  /*background-image: url('https://i.imgur.com/xJDy9fs.jpg');*/
  background-image: url('https://i.imgur.com/k0WlHMY.jpg');
  overflow: hidden;
  --marquee-width: 100vw;
  /* animation: shake .1s infinite; */
}

#music {
  background-image: url('https://i.imgur.com/TqiVKXR.jpg');
  font-weight: bold;
}

#art {
  /*background-image: url('https://i.imgur.com/08UGF69.jpg');*/
  
  /*background-image: url();*/
}

.marquee, .marquee2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: bold;
    overflow: hidden;
    /* font-family: sofia-pro, sans-serif; */
    animation: scrolling 30s infinite linear;
    color: #333;
}

.marquee span, .marquee2 span {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    /*transform: translate3d(var(--move-initial), 0, 0);*/
    /*animation: marquee 5s linear infinite;*/
    /*animation-play-state: running;*/
}

.marquee span, .marquee2 span {
    font-size: 10vw;
    padding: 0 2vw;
    font-style: italic;
}

#music a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  padding: 1rem 2rem;
  border: solid .5rem #ffffff;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

#music a:hover {
  transition: 2s ease all;
  color: red;
  border: solid 1.5rem red;
  font-size: 16rem;
}

#music a:active {
  transform: rotate(180deg);
}

#about svg {
  position: absolute;
  top: 50%;
  left: 50%;
  widows: 50%;
  height: 50%;
  transform: translate(-50%,-50%);
}

.glitch::before {
  /* ... anything needed to make it identical */

  /* variation */
  left: 2px;
  text-shadow: -1px 0 red;
  
  /* important: opaque background masks the original */
  background: black;
}
.glitch::after {
  /* ... anything needed to make it identical */

  /* variation */
  left: -2px;
  text-shadow: -1px 0 blue;
  
  /* important: opaque background masks the original */
  background: black;
}

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

.marquee2 span {
  animation-delay: 2.5s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes scrolling{
  0%{
    transform: translate(0, -50%);
  }
  100%{
    transform: translate(-100vw, -50%);
  }
}

@keyframes noise-anim {
  0% {
    clip-path: inset(40% 0 61% 0);
  }
  20% {
    clip-path: inset(92% 0 1% 0);
  }
  40% {
    clip-path: inset(43% 0 1% 0);
  }
  60% {
    clip-path: inset(25% 0 58% 0);
  }
  80% {
    clip-path: inset(54% 0 7% 0);
  }
  100% {
    clip-path: inset(58% 0 43% 0);
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}