.example::-webkit-scrollbar {
    display: none;
  }

html {
  background-color: #31364c;
}

body {
  background-color: #31364c;
}

.ligne {
  border-radius: 10px;
  margin-left: 5%;
  width: 20%;
  height: 10px;
  background-image: linear-gradient(to right,
      #78d7dd,
      #84d2d4,
      #91cbc9,
      #98c8c3,
      #a4c2b9,
      #b2bcae,
      #bcb7a6,
      #c9b19b,
      #d5ab91,
      #e1a688,
      #e7a382,
      #fe9870);
  margin-top: 2rem;
}
.tr{
  font-size: 35px;
}

.tro{
    font-size: 22px;
  }
  


.of{
    overflow-x: visible;
}

.bf h2::before{
    content: url("data:image/svg+xml,%3Csvg width='191' height='9' viewBox='0 0 191 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4.46297' y1='5.46335' x2='140' y2='3.53703' stroke='%231C5998' stroke-opacity='0.5' stroke-width='7' stroke-linecap='round' stroke-dasharray='14 28 42 56'/%3E%3C/svg%3E ");
    display: block;
    position: relative;
    left: 50%;
    bottom: 10px;

}

.mg{
    margin-left: 20%;
    margin-top: 5%;
}


@media (max-width: 576px) {
    .tr{
        font-size: 2vh;
    }
    
    .of{
        overflow: auto;
    }
    
    }
    
    @media (max-width:992px){
        .of{
            overflow: auto;
        }

        .placeholder{
            width: 100%;
        }
        html{
        scroll-padding-top: 250px;
        }

        .mg{
            margin-left: 0;
            margin-top: 5%;
        }

        .footer-text{
            display: flex;
            justify-content: center;
        }
    }

    @media (min-width:768px) and (max-width:992px){
        .footer-text{
            display: flex;
            flex-direction: column;
        }
    }

    @media  (max-width:2000px){
        .of{
            overflow: auto;
        }

    }

    @media (min-width:768px) and (max-width:992px){
        .tro{
            font-size: 30px;
        }
    }