/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

   html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
   body{line-height:1}
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
   nav ul{list-style:none}
   blockquote,q{quotes:none}
   blockquote:before,blockquote:after,q:before,q:after{content:none}
   a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
   mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
   del{text-decoration:line-through}
   abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
   table{border-collapse:collapse;border-spacing:0}
   hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
   input,select{vertical-align:middle}
   li{list-style:none}
   
   
   /* =============================================================================
      My CSS
      ========================================================================== */
   
   /* ---- base ----*/ 
   
   .custom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Ajustez cette valeur selon vos besoins */
    width: 1; /* Prend toute la largeur du conteneur */
    max-width: 960px; /* Largeur maximale */
    margin: auto; /* Centre le conteneur dans la colonne */
}

svg {
  position: absolute;
  
  z-index: 100px;
    display: block;
    font: 10.5em 'Montserrat';
    
    
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1) {
    stroke: #08abeb;
    animation-delay: -1s;
}

.text-copy:nth-child(2) {
    stroke: #840037;
    animation-delay: -2s;
}

.text-copy:nth-child(3) {
    stroke: #BD0034;
    animation-delay: -3s;
}

.text-copy:nth-child(4) {
    stroke: #BD0034;
    animation-delay: -4s;
}

.text-copy:nth-child(5) {
    stroke: #FDB731;
    animation-delay: -5s;
}

@keyframes stroke-offset {
    100% { stroke-dashoffset: -35%; }
}

   
   /* Conteneur principal */
   
   
   /* Animation d'apparition */
   @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
   }
   
   #particles-js{
   z-index: 0;
   }
   html{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
   
   body{
     font:normal 75% Arial, Helvetica, sans-serif;
   }
   
   canvas{
     display:block;
     vertical-align:bottom;
   }
   
   
   /* ---- stats.js ---- */
   
   /* 🌟 RESPONSIVE DESIGN 🌟 */
   @media screen and (max-width: 480px) {
       .login-container {
           padding: 1.5rem;
           width: 90%;
       }
   
       .input-group input {
           font-size: 14px;
           padding: 10px;
       }
   
       .btn {
           font-size: 16px;
           padding: 10px;
       }
   }
   
   @media screen and (max-width: 768px) {
       body {
           padding: 10px;
       }
   
       .login-container {
           width: 80%;
       }
   }
   
   /* ---- particles.js container ---- */
   
   #particles-js{
     width: 100%;
     height: 100%;
     background-color: #13385a79;
     background-image: url('');
     background-size: cover;
     background-position: 50% 50%;
     background-repeat: no-repeat;
   }