<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="index.pack.js"></script>
</head>
<body>
<div id="dice" class="dice">
<!-- <div class="dot"></div> -->
<div class="row-1">
<div id="dot-one" class="dot"></div>
<div id="dot-two" class="dot"></div>
<div id="dot-three" class="dot"></div>
</div>
<div class="row-2">
<div id="dot-four" class="dot"></div>
<div id="dot-five" class="dot"></div>
<div id="dot-six" class="dot"></div>
</div>
<div class="row-3">
<div id="dot-seven" class="dot"></div>
<div id="dot-eight" class="dot"></div>
<div id="dot-nine" class="dot"></div>
</div>
</div>
<div id="display-roll"></div>
</body>
</html>