game.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: emulogic ;
  src: url("./fonts/Emulogic-zrEw.ttf");
}
@font-face {
  font-family: Pranshu font;
  src: url(./fonts/PixeloidSans-mLxMm.ttf);
}
body{
  background-color: black;
}
.boxStart{
  position: relative;
  height:200px;
  width:200px;
  border: 1px solid red;
  background-color: black;
}
.ghost{
  position: absolute;
  height: 100%;
  width:80%;
  top:0;
  left:10%;
  border:1px solid black;
  border-radius: 20px;
  background-color: green;
  z-index: 3;
}
.btn{
  color: white;
  font-size: 2em;
  /* width:50%; */
  /* display: block; */
  padding:20px;
  /* font-family: Pranshu font; */
  font-family: emulogic ;


  /* margin: auto; */
}
.btn:hover{
  cursor: pointer;
  transform: scale(1.2);
}
.eyes{
  position: absolute;
  display: inline-block;
  height: 30%;
  width: 30%;
  border-radius: 50%;
  bottom: 45%;
  background-color: white;
}
.eyeleft {
  left: 10%;
}
.eyeright {
  right:10%;
}
.eyes:after{
  position: absolute;
  bottom: 35%;
  content: " ";
  background-color: black;
  height: 50%;
  width: 50%;
  left:20%;
  border-radius: 50%;
}

.pacman{
  z-index: 2;
  position: absolute;
  height: 80%;
  width:80%;
  top:10%;
  left:10%;
  border-radius: 50%;
  background-color: yellow;
}

.eye {
  position: absolute;
  left: 20%;
  top:20%;
  width:20%;
  background-color: black;
  border-radius: 50%;
  height: 20%;
}
.mouth{
  position: absolute;
  left: 60%;
  bottom:35%;
  width: 40%;
  background-color: black;
  height: 10%;
}

.dot{
  position: absolute;
  left: 35%;
  top:35%;
  width: 25%;
  height: 25%;
  background-color: white;
  border-radius: 50%;
}
.superdot{
  position: absolute;
  left: 25%;
  top:25%;
  width: 50%;
  height: 50%;
  background-color: red;
  border-radius: 50%;
}

.wall{
  border: 1px solid #1E63FF;
  width: 100%;
  height:100%;
}
.hideout {
  background-color: #333;
  width: 100%;
  height:100%; 
}
.grid{
  /* margin: auto; */
  /* padding-top: 40px; */
  justify-content: center;
  display: grid;
  cursor: grab;
  background-color: black;
  overflow: hidden;
}
.box{
  font-size: 3rem;
  text-align: center;
  position: relative;
}

.scoreBoard{
  background-color: black;
  text-align: center;
  font-size: 2em;
  color:white;
  font-family: Pranshu font;
  padding-bottom: 20px;
  /* padding: 20px; */
}
#border1{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 96%;
  height: 96%;
  border: 3px solid #1E63FF;
  border-radius: 2%;
}
#border2{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 98%;
  height: 99%;
  border: 2px solid #1E63FF;
  border-radius: 2%;
}
.container{
  padding-top: 7px;
  display: flex;
  justify-content: center;
}
#username{
  position: absolute;
  font-family: emulogic ;
  top: 4%;
  left: 4%;
  color: #FFD81F;
  
}