*{
 font-family: 'Montserrat', sans-serif !important; 
 font-family: "Funnel Display", serif;
  /*  font-family: "Quicksand", sans-serif !important;*/
}

body{
  background-color: #1b1c21ff !important;
}

/*###############HEADER###############*/
header.masthead {
  background-color:#1b1c21ff;
  height: 100vh;
  background-position: center top;

  padding-top: 6rem;
  padding-bottom: 6rem;
  align-items: center;
  display: flex;
} 

.masthead .container{
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.navbar .container{
  max-width: 100%;
  padding: 0px 50px 0px 50px;
}

section#contact {
  background-color: #1b1c21ff !important;
  background-image: none !important;
}
  

.logo-signe{
  display: flex;
  position: relative;
}

.logo-signe img{
  height: 100vh;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: -178px;
}

/*################MENU################*/
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top .nav-item .nav-link:hover,
#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top.navbar-shrink .nav-item .nav-link:hover {
  color: #fff;
  font-weight:bold;
  margin: 0 5px 0 5px;
}

#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top .nav-item .nav-link,
#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top.navbar-shrink .nav-item .nav-link {
  font-weight:normal;
  margin: 0 6px 0 6px;
}

#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top.navbar-shrink .nav-item .nav-link.active,
#mainNav.navbar.navbar-expand-lg.navbar-dark.fixed-top.navbar-shrink .nav-item .nav-link:hover
{
  color: #fff;
  font-weight:bold;
}



/*################A PROPOS################*/
#about .container{
  max-width: 90vw;
}

header.masthead .masthead-heading {
  margin-top: 4rem;
}

.competences, .competences img{
  width:120px;
  height: 1.4em;
}

#apropos{
  height:700px;
  background-repeat:  no-repeat;
  background-size:cover;
  background-color: #1b1c21ff !important;
}

#apropos p{
  font-size: 1.1rem;
  color: #fff;
  text-align: right;
}

#services {
  background-color: #1b1c21ff !important;
}

#services .container{
  z-index: 15;
  position: relative;
}


  /*######PORTFOLIO######*/ 

.section-heading.text-uppercase.titre-left{
  font-size: 6vw;
  font-weight: lighter;
  margin-left: 10%;
  color: #fff;
}

.section-heading.text-uppercase.titre-right{
  font-size: 6vw;
  font-weight: lighter;
  margin-right: 10%;
  color: #fff;
  text-align: right;
}


.trait-vertical{
  display: block;
  width: 1px;
  height: 5%;
  background-color: #fff;
  position: absolute;
}

.trait-vertical.left{
  left: 14%;
}
.trait-vertical.right{
  right: 14%;
}

/*#############PORTFOLIO##########*/

  #portfolio{
    background-color: #1b1c21ff !important;

    background-repeat:  no-repeat;
    background-size:cover;
    background-position: center -1130px;
  }

  #portfolio .portfolio-item .portfolio-link .portfolio-hover {
    display:none;
  }


  .fond-projet{
    color: #fff;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 20vw;
    display: block;
    position: absolute;
    opacity: 0.1;
    top: 1905px;
    left: 200px;
  }

  .fond-projet-2{
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 43vw;
    display: block;
    position: absolute !important;
    opacity: 0.3;
    top: 2000px;
  }

  .fond-projet-3{
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 10vw;
    display: block;
    position: absolute;
    opacity: 0.8;
    top: 2800px;
  }

/*#########BOUTON PORTFOLIO#########*/
  .btn-outline-primary{
    border: 1px solid transparent;
    background-color: transparent;
    width: 138px;
    border-radius: 20px;
    cursor: pointer;
    color: #fff;

    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;

    box-shadow: none;
  }

  .btn-primary, .btn-check:focus + .btn-primary, .btn-primary:focus,
  .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary,
  .btn-outline-primary:active, .btn-outline-primary.active,
  .btn-outline-primary.dropdown-toggle.show  {
    font-weight: bold;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    color: #1b1c21ff;
    width: 138px;
    box-shadow: none;
  }

  .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: none;
  }

  .btn-primary:hover, .btn-outline-primary:hover {
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 20px;
    color: #fff;
    background-color: #1b1c21ff;
  }


  #portfolio .portfolio-item {
    max-width: 26rem;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    transform: scale(0.9);
    margin: 0;
  }

  #portfolio .portfolio-item.show {
    opacity: 1;
    transform: scale(1);
    display: block;
  }

  #portfolio .portfolio-item.hide {
    display: none;
  }

  .filter-buttons {
    margin-bottom: 30px;
  }

  
  /*####DESACTIVATION TEXTE PORTFOLIO####*/
.item1{
  background-image: url(../assets/img/portfolio/2.jpg);
  background-position: center 5%;
  background-size: 113%;
    height: 339px;
  position: relative;
}

.item2{
  background-image: url(../assets/img/portfolio/3-2.jpg);
  background-position: center 10%;
  background-size: 109%;
    height: 339px;
  position: relative;
}

.item3{
  background-image: url(../assets/img/portfolio/carte_orizhon_2.jpg);
  background-size: cover;
    height: 339px;
  position: relative;
}

.item4{
  background-image: url(../assets/img/portfolio/4.jpg);
  background-position: center 32%;
  background-size: 111%;
    height: 339px;
  position: relative;
}

.item5{
  background-image: url(../assets/img/portfolio/1.jpg);
  background-position: center 24%;
  background-size: 117%;
    height: 339px;
  position: relative;
}

.item6{
  background-image: url(../assets/img/portfolio/5_2.jpg);
  background-size: cover;
  background-position: center;
    height: 339px;
  position: relative;
}

.item7{
  background-image: url(../assets/img/portfolio/6_2.jpg);
  background-size: cover;
  background-position: center;
    height: 339px;
  position: relative;
}

.item8{
  background-image: url(../assets/img/portfolio/7_2.jpg);
  background-size: 153%;
  background-position: 2% 50%;
  background-repeat: no-repeat;
    height: 339px;
  position: relative;
}

.item9{
  background-image: url(../assets/img/portfolio/5.jpg);
  background-size: 112%;
  background-position: center 30%;
    height: 339px;
  position: relative;
}

.item10{
  background-image: url(../assets/img/portfolio/10.jpg);
  background-size: 116%;
  background-position: center 22%;
    height: 339px;
  position: relative;
}

.item11{
  background-image: url(../assets/img/portfolio/9.jpg);
  background-size: 111%;
  background-position: center 22%;
    height: 339px;
  position: relative;
}

.item12{
  background-image: url(../assets/img/portfolio/6.jpg);
  background-size: 111%;
  background-position: center 22%;
    height: 339px;
  position: relative;
}

.item13{
  background-image: url(../assets/img/portfolio/7.jpg);
  background-size: 111%;
  background-position: center 22%;
    height: 339px;
  position: relative;
}

.item14{
  background-image: url(../assets/img/portfolio/8.jpg);
  background-size: 111%;
  background-position: center 22%;
    height: 339px;
  position: relative;
}

.item15{
  background-image: url(../assets/img/portfolio/195.jpg);
  background-size: 188%;
  background-position: 84% 69%;
    height: 339px;
  position: relative;
}

.item16{
  background-image: url(../assets/img/portfolio/logo_factory.jpg);
  background-size: 267%;
  background-position: 88% 50%;
    height: 339px;
  position: relative;
}

.item17{
  background-image: url(../assets/img/portfolio/logo_studiotheque.jpg);
  background-size: 324%;
  background-position: 92% -11%;
    height: 339px;
  position: relative;
}

.item18{
  background-image: url(../assets/img/portfolio/planche-couleur-19072023.jpg);
  background-size: 225%;
  background-position: 99% 2%;
    height: 339px;
  position: relative;
}


.portfolio-item .link1{
  background-color: transparent;
  height:0;
  width: 100%;
  transition: all 0.3s ease-in-out;
  position: absolute !important;
  bottom: 0;
} 


div > .portfolio-item:hover .link1{
  background-color: #00000099;
  height: 100%;
} 

.portfolio-caption-heading{
  display: none;
}

.portfolio-modal{
  overflow-y: hidden;
}

.portfolio-modal .modal-content .img-fluid {
  max-height: 100vh;
  margin-top: 40px;
}

.modal-content{
  background-color: #f3f3f3;
}

.portfolio-modal .modal-content {
  padding-top: 0;
  padding-bottom: 0;
}

.modal-body h2{
  margin-bottom:70px;
}

.portfolio-modal .close-modal {
  position: fixed;
  top: 3.5rem;
  right: 4.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background-color: transparent;
  z-index:9999;
}

.portfolio-modal .modal-dialog {
  margin: 0rem;
}



/*####TIMELINE####*/
#about{
  background-color: #1b1c21ff;
}

.timeline > li .timeline-image.fin {
  margin-left: -86px;
  margin-top: 123px;
}

.timeline > li .timeline-image.fin img {
  width:50px;
  left: -4px;
  position: relative;
}

.timeline-heading h4{
  color: #fff !important;
}

.timeline .text-muted {
  color: #c0c0c0 !important;
}



.rounded-circle{
  width:90%;
  margin-top:15%;
  border-radius: 0% !important;
}

.timeline {
  margin-top: 70px;
}

.timeline::before {
  top: -66px;
  width: 4px;
  margin-left: -7.5px;
  background-color: #fff;
}

.timeline > li .timeline-image {
  color: transparent;
  border: 7px solid transparent;
  background-color: transparent;
}


.modal-content .container{
  height:100vh;
  align-items: center;
  display: flex;
}

.footer{
  background-color: #1b1c21ff !important;
  color:#fff;
}


/*######FORMULAIRE######*/
#contactForm {
  width: 40vw;
  margin: auto;
}

section#contact form#contactForm .form-group-textarea textarea {
  height: 89%;
}

.form-group .h4{
  color:#fff;
  font-size: 1rem;
}

#form-submit {
  width:20%;
}

#form-submit{
  background-color: #fff;
  color:#1b1c21ff;
  border:0;
}

#form-submit:hover{
  background-color: #071a31;
  color:#fff;
 }

 #msgSubmit{
  color: #fff !important;
  margin-top: 100px;
 }

 section#contact form#contactForm .form-group input.form-control,
 #email{
   height:20px;
 }



/*####TABLETTE####*/
@media (min-width: 992px) {
    #mainNav.navbar-shrink {
      background-color: #1b1c21ff;
    }

  #mainNav .navbar-brand img {
    height: 4rem;
    transition: height 0.3s ease-in-out;
  }

  #mainNav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #mainNav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img {
    height: 3.5rem;
  }
}

@media (max-width: 992px) {
  header.masthead {
    height: 60vh;
  }

  .masthead .container{
    max-width: 60vw;
    position: relative;
    left: 0vw;
    top: 9vh;
  }

  .rounded-circle {
    width: 70%;
    margin-top: 15%;
    border-radius: 0% !important;
  }

  .button {
    width: 80%;
  }

  #mainNav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #1b1c21ff;
  }

  #mainNav .navbar-brand img {
    height: 3.5rem;
  }

  .timeline > li .timeline-image.rond_g {
    width: 190px;
    margin-left: -119px;
  }
  
  .timeline > li .timeline-image.rond_d {
    width: 190px;
    margin-left: -74px;
  }

  .timeline > li .timeline-image.fin {
    margin-left: -51px;
    margin-top: 54px;
  }

  #portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
    font-size: 1rem;
  }

  #about .container {
    max-width: 98vw;
  }

  #contactForm {
    width: 80vw;
    margin: auto;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  header.masthead {
      height: 100vh;
  }

  #portfolio .container {
      max-width: 85%;
  }
  
  #portfolio .portfolio-item .portfolio-link {
    height: 30vh;
  }

  .timeline > li {
    min-height: 100px;
    margin-bottom: 50px;
  }

  .timeline > li .timeline-image.fin {
    margin-left: -51px;
    margin-top: 54px;
  }

  #contactForm {
    width: 80vw;
    margin: auto;
  }

}

/*####MOBILE####*/
@media (max-width: 575.98px) {

  
  #mainNav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #1b1c21ff;
  }

    #mainNav .navbar-brand img {
      height: 3.5rem;
    }
  
    #mainNav .navbar-nav .nav-item .nav-link {
      font-size: 1.5rem;
    }

    .navbar-nav.text-uppercase.ms-auto.py-4.py-lg-0{
        height: 100vh;
    }

    .button {
      width: 80%;
    }

    .trait-vertical{
      display: none;
    }

    header.masthead {
      background-position: 1% center;
    }

    .masthead .container {
      max-width: 90vw;
      position: relative;
      left: 0vw;
    }

    .mb-4 {
      margin-bottom: 0.5rem !important;
    }

    .portfolio-caption-heading {
      font-size: 1rem;
    }
    
    .portfolio-modal .close-modal {
      position: fixed;
      top: 2.5rem;
      right: 2.5rem;
      width: 2rem;
      height: 2rem;
      cursor: pointer;
      background-color: transparent;
    }

    .rounded-circle{
      width: 100%;
    }

    .timeline > li .timeline-image.rond_g {
      width: 90px;
      margin-left: 10px;
    }
    
    .timeline > li .timeline-image.rond_d {
      width: 90px;
      margin-left: 10px;
    }

    .timeline > li .timeline-image.fin {
      margin-left: -1px;
      margin-top: 10px;
    }

    .timeline > li .timeline-image.fin img {
      width:60px;
    }
    
    #about .container{
      max-width: 100vw;
    }

    .timeline-heading .subheading, .timeline-heading h4{
      font-size: 19px;
    } 

    #contactForm {
      width: 90vw;
      margin: auto;
    }

    #form-submit {
      width: 40%;
    }
    
}

/*########DESKTOP########*/
@media (min-width: 1200px) {

  header.masthead .masthead-heading.integrateur {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    margin: 11px 0 0 -74px;
  }

  header.masthead .masthead-heading.webdesigner {
    font-size: 224px;
    text-align: left;
    margin-left: -51px;
    opacity: 0.7;
  }

  header.masthead .masthead-heading.ux-ui {
    font-size: 600px;
    text-align: right;
    margin-right: -116px;
    opacity: 0.1;
  }



.timeline > li .timeline-image.rond_g {
  width: 160px;
  margin-left: -120px;
  margin-top: -47px;
}

.timeline > li .timeline-image.rond_d {
  width: 160px;
  margin-left: -52px;
  margin-top: -47px;
}

.progressbar_marge{
  Margin-top:40px;
}

.droite_anim{
  transform:TranslateX(900px);
}

.gauche_anim{
  transform:TranslateX(-900px);
}

}

@media (min-width: 768px) {
  
  .timeline > li {
    margin-bottom: 0px;
  }
  
  }



/*########BARRE DE COMPETENCES########*/
.progress {
  height: 20px;
  overflow: hidden;
  background-color: #ffffff;
  width: 86%;
  margin: auto;
}
.progress-bar {
  font-size: 15px;
  color: #FFF;
  text-align: center;
  background-color: #000;
}

.progress1{
  width: 85%;
}

.progress2{
  width: 85%;
}

.progress3{
  width: 60%;
}

.progress4{
  width: 80%;
}

.progress5{
  width: 40%;
}

.progress6{
  width: 40%;
}

.progress-bar-striped {
  background-image: none;
  background-size: 20px 20px;
  border: 2px solid #fff;
}
@keyframes progress-bar-stripes {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}

.titre_comp{
  display:flex;
}

.titre_comp h4{
  width:67%;
  color: #fff;
  text-transform: uppercase;
}

.titre_comp p{
  width:33%;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  color: #fff;
}


.help-block.with-errors {
  color: #fff;
}




/*############GLITCH###############*/

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}









.font2 {
  animation: font 5s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #770fbc;
    filter: blur(3px);
  }

  30% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #0f88ac;
    filter: blur(2px);
  }

  70% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #770fbc;
    filter: blur(6px);
  }
}


.glitch2 span {
  animation: paths 5s step-end infinite;
}

.glitch2::before {
  animation: paths 4s step-end infinite, opacity 7s step-end infinite,
    font2 10s step-end infinite, movement 12s step-end infinite;
}

.glitch2::after {
  animation: paths 4s step-end infinite, opacity 7s step-end infinite,
    font2 9s step-end infinite, movement 10s step-end infinite;
}