PHFIx code error i cant change font in button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image" href="src/icon.png">
<title>wâ†ch frêê Movies</title>
</head>
<style>
body {
font-family: 'Netflix Sans', 'Helvetica Neue', 'Segoe UI', Roboto, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
background-image: url('src/bg.png');
background-size: cover;
background-repeat: no-repeat;
}
.center {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 55%;
height: 60%;
}
.blink, #word {
font-size: 150px;
left: 50%;
justify-content: center;
color: white;
margin-top:10px;
font-family: 'Courier New', Courier, monospace;
padding-bottom: 0;
}
.btn {
margin: 0 auto;
width: 470px;
height: 60px;
padding: 6px 0 0 3px;
margin-top: 50px;
border: 1px solid #f31f1fe3;
border-radius: 10px;
background: none;
font-size: 12px;
letter-spacing: .25em;
font-weight: 600;
vertical-align: middle;
text-align: center;
transition: background .4s, color .4s;
cursor: pointer;
}
.btn:hover {
background: #e61a1ada;
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.25em);
}
.blink {
animation: blink 0.5s infinite;
}
@keyframes blink{
to { opacity: .0; }
}
.flex {
display: flex;
}
a:link {
text-decoration: none;
font-size: 40px;
}
</style>
<body>
<div class="center">
<div class="flex">
<p id="word"></p><p class="blink">|</p>
</div>
<div class="btn"><a href="signup.php">Start Watching</a></div>
</div>
</body>
<script>
const words = ["Welcome", "Dagos", "Bienvenue", "Willkommen", "Aloha", "fùnyìhng", "yÅkoso"];
let i = 0;
let timer;
<!--CCTO code pen-->
function typingEffect() {
let word = words.split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('word').innerHTML += word.shift();
} else {
deletingEffect();
return false;
};
timer = setTimeout(loopTyping, 150);
};
loopTyping();
};
function deletingEffect() {
let word = words.split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('word').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typingEffect();
return false;
};
timer = setTimeout(loopDeleting, 50);
};
loopDeleting();
};
typingEffect();
</script>
</html>