Want to add $GLOBALS variable in my wordpress plugins but its dont work

Recently I am making a wordpress shortcode plugin . This is a responsive shortcode plugin. I want to customize the css from the user input declare by the user. so i have to make a $GLOBALS variable for this atts but its dont work. Someone please help me out from this problem because i cant figure out whats wrong.

    <?php 

function gs_tabs_shortcode($atts, $content= null){
    $GLOBALS['tab_count'] = 0;
    extract(shortcode_atts(array(
      'fontcolor' => '', 
      'tabcolor' => '',
      'contcolor' => '',
      'contfontc' => ''
      ), $atts) );
    $x = $GLOBALS['tab_count'];

     //__User input bind in supper globar array__//
     $GLOBALS['styls'][$x] = array( 'fontcolor' => $fontcolor, 
                                    'tabcolor' => $tabcolor,
                                    'contcolor' => $contcolor,
                                    'contfontc' => $contfontc);
     $GLOBALS['tab_count']++;

    do_shortcode( $content );


    if ( is_array( $GLOBALS['tabs'] ) ) {


        foreach ($GLOBALS['tabs'] as $tab ) {
            $tabs[]= '<li> <i class="fa fa-'.$tab['icon'].' fa-lg "></i>  '.$tab['title'].'  </li>';
            $tabcontent[]= '<div><p> '.$tab['content'].' </p></div>';
        }

        $return = '<div id="horizontalTab">';
        $return .= '<ul class="resp-tabs-list">'.implode( "\n", $tabs ).'</ul>';

        $return .= '<div class="resp-tabs-container">'.implode("\n", $tabcontent).'</div>';
        $return .= '</div>';

    }
    return $return;

}
add_shortcode('gs_tabs', 'gs_tabs_shortcode');

function gs_tabs_shortcode_nested( $atts, $content= null ){
  extract(shortcode_atts(array(
      'title' => '', 
      'icon' => ''
      ), $atts) );

  $x = $GLOBALS['tab_count'];
  $content = do_shortcode($content);
  //__User input bind in supper globar array__//
  $GLOBALS['tabs'][$x] = array( 'title' => $title, 
                                'content' => $content,
                                'icon' => $icon);
  $GLOBALS['tab_count']++;
}
add_shortcode('gs_item','gs_tabs_shortcode_nested');



//customize userdata 
    function my_custom_fonts() {



        if (is_array( $GLOBALS['styls'] ) ) {

            foreach ( $GLOBALS['styls'] as $style ) {
                $opt= '<style>
                .resp-tab-item {
                  background: '.$style['tabcolor'].';
                  color:'.$style['fontcolor'].';
                } 
              </style>';
              echo $opt;
            }

        }


    }
    add_action('wp_head', 'my_custom_fonts');

 ?>

This is my customize css function

//customize userdata 
    function my_custom_fonts() {

        if (is_array( $GLOBALS['styls'] ) ) {

            foreach ( $GLOBALS['styls'] as $style ) {
                $opt= '<style>
                .resp-tab-item {
                  background: '.$style['tabcolor'].';
                  color:'.$style['fontcolor'].';
                } 
              </style>';
              echo $opt;
            }
        }

    }
    add_action('wp_head', 'my_custom_fonts');

User going to declare ther style like

[gs_tabs fontcolor="black" tabcolor="blue"  ]

[gs_item title="item1" icon="camera-retro"]this is item 1[/gs_item]
[gs_item title="item2"  ]this is item 2[/gs_item]
[gs_item title="item3" icon="binoculars"]this is item 3[/gs_item]

[/gs_tabs]

via Chebli Mohamed