Mix-blend-mode not working?! (HELP)

HTML-CSS
7 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
            function myFun(){
            var randcol= "";
            var allchar="0123456789ABCDEF";
            for(var i=0; i<6; i++){
               randcol += allchar[Math.floor(Math.random()*16)];


            }

             document.body.style.backgroundColor= "#"+randcol;

            }
    </script>


<title></title>




<style type="text/css">
@charset "UTF-8";

body {
	font-family: Helvetica;
	background-color:#ae2902;
	color:#f9f9f4;
    mix-blend-mode: difference;

	padding: 0;
	margin: 0;
	text-align: center;
	font-size:2em;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translatex(-50%) translatey(-50%);
	
}
</style>
</head>
<body>
<h1 onclick="javascript:myFun()">covey.moda</h1>


</body>
</html>