The :hover effect

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
      @media all and (min-width: 1200px) and (max-width: 2000px) {
span:hover{  font-size:100px;font-family:Segoe Script;       }
}

span {  font-size:30px;      }
</style>
</head>
<body>


<span id='sp'>Let's get BIG</span>

<script>

sp.onmouseover=()=>{
if(window.innerWidth>1200){
sp.innerHTML="Let's get BIG and CRAZY";
}
}
sp.onmouseout=()=>{
if(window.innerWidth>1200){
sp.innerHTML="Let's get BIG";
}
}

</script>
</body>
</htm>