@font-face {
          font-family: 'Poppins'; 
          src: url('../fonts/Poppins.ttf') format('truetype'); 
          font-weight: normal;
          font-style: normal;
        }

          
        @font-face {
            font-family: 'Poppins2'; 
            src: url('../fonts/Poppins2.ttf') format('truetype'); 
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Poppins3'; 
            src: url('../fonts/Poppins3.ttf') format('truetype'); 
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Poppins3i'; 
            src: url('../fonts/Poppins3i.ttf') format('truetype'); 
            font-weight: normal;
            font-style: normal;
        }
        
        
        
        body{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          background-color: #191919;
          color: white;
          font-family: Arial;
          
        }

        .title {
          text-align: center;
          font-size: 50px;
          color: #17b6ff;
          font-family: 'Poppins';
          
        }

        .subtitle {
          margin-left: 30px;
          font-size: 30px;
          color: #ffffff;
          font-family: "Poppins2";
        }

        .conteneur-horloge {
          margin-left: 30px;
          font-size: 25px;
          font-family: "Poppins3i";
        }

        .graphique {
          display: flex;
          justify-content: center;
          margin-top: 50px;
         
        }

        .conteneur-graphique{
          display: flex;
          justify-content: center;
        }

        .boutonGraphique {
          margin-right:20px;
          background-color: rgb(50, 50, 50);
          color: white;
          padding: 12.5px 20px;
          font-size: 20px;
          border: none;
          border-radius: 15px;
          font-family: "Poppins3";;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        .boutonGraphique:hover {  
          background-color: #3188c3;
          color: rgb(255, 255, 255);  
        }

        .conteneur-jauges {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 25px;
        }

        .jauge{
          flex: 0 1 calc(33% - 20px); 
          max-width: 400px; 
          text-align: center;
        }

        .boutonAcceuil {
          margin-left: 50px;
          margin-top: 50px;
          background-color: rgb(50, 50, 50);
          color: white;
          padding: 10px 15px;
          font-size: 20px;
          border: none;
          border-radius: 100px;
          font-family: "Poppins3";;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .boutonAcceuil:hover {  
          background-color: #ffffff;   
          color: rgb(50, 50, 50); 
        }