:root {
    --accentColor: greenyellow;

    --fontColor: #bfcfc3;
    --decorColor: #252525;
    --hoverColor: rgb(122, 166, 133);

    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: rgb(61 61 61);
    --btn-bg-2: rgb(16, 16, 16);
    --btn-bg-color: rgb(255, 255, 255);
}

body {
    font-family: "Unbounded", sans-serif;
    font-weight: 500;
    font-size: 16px;
    overflow-x: hidden;
    color: white;
    text-align: center;
    background: url("../static/img/Grid.jpg") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 0.92s infinite;
    -moz-animation: bg-scrolling-reverse 0.92s infinite;
    -o-animation: bg-scrolling-reverse 0.92s infinite;
    animation: bg-scrolling-reverse 0.92s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}


@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}




.accent-word {
    transition: color 0.2s ease;
}


.between-section-padding {
    margin-top: 100px !important;
}

.section-padding {
    padding: 50px 50px;
}



@keyframes move-it {
  0% {
    background-position: initial;
  }
  100% {
    background-position: 100px 0px;
  }
}

@keyframes move-it-dark {
  0% {
    background-position: initial;
  }
  100% {
    background-position: -100px 0px;
  }
}

.lines-background {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
    45deg,
    #000000,
    #101010 5%,
    #101010 5%,
    #000000 10%
    );
    background-size: 100px 100px;
    animation: move-it 2s linear infinite;
}

.lines-background-dark {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
  45deg,
  #000000,
  #070707 5%,
  #070707 5%,
  #000000 10%
  );
  background-size: 100px 100px;
  animation: move-it-dark 2s linear infinite;
}

html {
    scroll-behavior: smooth;
}