body {
  background:#0f172a;
  color:white;
  text-align:center;
  font-family:Arial;
}

.board {
  position:relative;
  width:300px;
  height:300px;
  margin:20px auto;
  background:gold;
  border-radius:50%;
}

.display {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:red;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  border-radius:15px;
}

.num {
  position:absolute;
  width:50px;
  height:50px;
  background:#1e40af;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
}

.n1{top:40px;left:40px}
.n2{top:40px;right:40px}
.n3{bottom:40px;left:40px}
.n4{bottom:40px;right:40px}

.op {
  position:absolute;
  width:60px;
  height:60px;
  background:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
}

.top{top:0;left:50%;transform:translateX(-50%)}
.bottom{bottom:0;left:50%;transform:translateX(-50%)}
.left{left:0;top:50%;transform:translateY(-50%)}
.right{right:0;top:50%;transform:translateY(-50%)}