@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  font-family: Roboto;
  font-weight: 900;
  font-style: bold;
  font-size: 4rem; 
  font-smooth: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  font-spacing: -20px;
}

.scanlines {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  opacity: .6;
  will-change: opacity;
  animation: opacity 3s linear infinite;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
    background-size: 100% 4px;
    will-change: background, background-size;
    animation: scanlines .2s linear infinite;
  }
}


/* Animations */
@keyframes noise {
  0%, 100% {background-position: 0 0;}
  10% {background-position: -5% -10%;}
  20% {background-position: -15% 5%;}
  30% {background-position: 7% -25%;}
  40% {background-position: 20% 25%;}
  50% {background-position: -25% 10%;}
  60% {background-position: 15% 5%;}
  70% {background-position: 0 15%;}
  80% {background-position: 25% 35%;}
  90% {background-position: -10% 10%;}
}

@keyframes opacity {
  0% {opacity: .6;}
  20% {opacity:.3;}
  35% {opacity:.5;}
  50% {opacity:.8;}
  60% {opacity:.4;}
  80% {opacity:.7;}
  100% {opacity:.6;}
}

@keyframes scanlines {
  from {
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
		background-size: 100% 4px;
  }
  to {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
		background-size: 100% 4px;
  }
}



@keyframes type {
  0%, 19% {opacity:0;}
  20%, 100% {opacity:1;}
}




body{
      overflow:hidden;
}
vibe{
    font-size: inherit;

    will-change: text-shadow;
    animation: rgbText 1s steps(9) 0s infinite alternate;
}
#contact{
  z-index:20!important;
  position:fixed;
  text-align:center;
  color:white;
  top:50%;
  left:50%;
  font-size: 100px;
  transform: translate(-50%, -50%);
  color: rbga(255,255,255,0.5);
  font-family: "TWK Lausanne", "Inter";
  width:100vw;
}
email{
  font-size: 30px!important;
  z-index: 10;
}
#container{
    background-color:#1a1a1a!important;
    width: 100vw; /* Sets the width of the rectangle */
    height: 120vh;/* Sets the height of the rectangle */
    position:absolute;
    overflow:hidden;
}

#texteffect{
     position:absolute;   
     width: 100%;
     height: 100%;
     overflow:hidden;
     
}

#background {
  filter:url('#noise');
  position: absolute;
  width: 110%;
  height: 130%;
  bottom: 0%;
  text-align:center;
  scrollbar-width: none;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  /* animation: vertical_move 5s linear infinite; */
}
@keyframes vertical_move {
  from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, -100%, 0);
    }
}

#noisegrad{
  filter:url('#noise');
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(102, 52, 229, 0.5) 50%, rgba(0, 0, 0, 1) 100%), url('noise');
  -webkit-font-smoothing: antialiased;
  position: absolute;
  width: 110%;
  height: 130%;
  left: -5px;
  bottom: -20%;
  text-align:center;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow:hidden;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#text {
  margin: 0;
  line-height: 2.5rem; 
  word-break: break-all;
  color:#6634E5;
}

html {
  filter: url('#contrast');
  height: 100%;
}