<!DOCTYPE html>
<html>
<head>
<title>Cool Dots </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit&display=swap">
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #17202A;
}
.dot-matrix {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: radial-gradient(#212F3D 5%, transparent 7%);
background-position: 0 0;
background-size: 1.8rem 1.8rem;
z-index: -1;
}
h1 {
font-size: 3rem;
color: #273746;
font-family: 'Outfit', Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="dot-matrix"></div>
<h1>Dots are cool</h1>
</body>
</html>