/*
 * Custom CSS
 */

:root {
  --bs-body-bg: var(--bs-tranparent);
  --bs-primary-bg: #f00;
  height: 100%;
  background-image: url('images/UntitledTestcard.png');
  background-size:     cover;
  background-repeat:   no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.content {
  background: var(--bs-gray-100) 50%;
  box-shadow: 0px 0px 100px #000;
}

.top-margin {
  margin-top: 25vh;
}

.bluesky {
  background-color: #228DFF;
}
.tiktok {
  background-color: #ff0050;
}

@font-face {
    font-family: 'SFPro'; /*a name to be used later*/
    src: url('/SFPRODISPLAYMEDIUM.OTF'); /*URL to font*/
}

#logo {
  font-family: 'SFPro';
  font-stretch: condensed;
  font-weight: bold;
  width: fit-content;
}

.glitch {
  color: black;
  font-size: 7.5vw;
  position: relative;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip-path: inset(9% 0 83% 0);
  }
  5% {
    clip-path: inset(54% 0 30% 0);
  }
  10% {
    clip-path: inset(17% 0 81% 0);
  }
  15% {
    clip-path: inset(93% 0 3% 0);
  }
  20% {
    clip-path: inset(91% 0 6% 0);
  }
  25% {
    clip-path: inset(34% 0 9% 0);
  }
  30% {
    clip-path: inset(48% 0 42% 0);
  }
  35% {
    clip-path: inset(92% 0 2% 0);
  }
  40% {
    clip-path: inset(16% 0 38% 0);
  }
  45% {
    clip-path: inset(46% 0 10% 0);
  }
  50% {
    clip-path: inset(21% 0 41% 0);
  }
  55% {
    clip-path: inset(32% 0 24% 0);
  }
  60% {
    clip-path: inset(25% 0 53% 0);
  }
  65% {
    clip-path: inset(92% 0 4% 0);
  }
  70% {
    clip-path: inset(32% 0 64% 0);
  }
  75% {
    clip-path: inset(41% 0 56% 0);
  }
  80% {
    clip-path: inset(2% 0 80% 0);
  }
  85% {
    clip-path: inset(93% 0 7% 0);
  }
  90% {
    clip-path: inset(42% 0 1% 0);
  }
  95% {
    clip-path: inset(14% 0 62% 0);
  }
  100% {
    clip-path: inset(8% 0 44% 0);
  }
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: black;
  background: var(--bs-gray-100) 50%;
  overflow: hidden;
  animation: noise-anim 2s infinite linear alternate-reverse;
}


.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: black;
  background: var(--bs-gray-100) 50%;
  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
}