css.css

*{
    overflow:hidden;
    box-sizing:border-box;
    padding:0;
    border:0;
    margin:0;
}
body{
    background: url(resources/bg2.png),linear-gradient(-90deg, #0c1735, #070e21);
    background-repeat:no-repeat;
    background-size:20% ,100%;
    background-position:5% , center;
}
footer{
	display:flex;
	width:100vw;
	height:5vh;
	padding:0 20vw;
	margin:1vh;
	bottom:0;
	position:absolute;
}
#b1, #b2{
    flex:33.3%;
    border-radius:2.5vh;
    color:white;
    background-color:#a59e9e73;
    font-size:1.4rem;
    font-weight:690;
}
#point{
	text-align:center;
	margin-top:1vh;
	color:white;
	flex:33.3%;
	font-size:1.3rem;
}
#score, #time{
	font-weight:bold;
	color:gold;
}
.grid {
	margin:auto;
	margin-top:2px;
    display: flex;
    flex-wrap: wrap;
    width: 560px;
    background-color:black;
    height: 560px;
}
  
.grid div {
    width: 20px;
    height: 20px;
}

.food {
   background:url(resources/food.png);
  background-size:100%;
}

.wall0 {
    background:url(resources/wall.jpeg) ;
    background-size:95%;
}
.wall1 {
    background:url(resources/wall1.jpeg) ;
    background-size:95%;
}
.wall2 {
    background:url(resources/wall2.jpeg) ;
    background-size:100%;
}

.pill {
    background:url(resources/pill.gif);
    background-size:110%;
}

.pac {
    background:url(resources/pac.gif);
    background-size:95%;
}

.g1 {
    background:url(resources/g1.png);
    background-size:95%;
}

.g2 {
    background:url(resources/g2.png);
    background-size:95%;
}

.g3 {
    background:url(resources/g3.png);
    background-size:95%;
}

.g4 {
    background:url(resources/g4.png);
    background-size:95%;
}

.scared-ghost {
    background:url(resources/gr.png);
    background-size:95%;
}
.gameover {
	background:url(resources/gameover.png);
    width:100%;
    height:90vh;
    position:absolute;
    background-repeat:no-repeat;
    background-position:90% 55%;
    filter:drop-shadow(10px 7px 7px black);
}

.win {
	background:url(resources/win.png);
    width:100%;
    height:90vh;
    background-repeat:no-repeat;
    background-position:90% 55%;
    position:absolute;
    filter:drop-shadow(10px 10px 10px black);
}

.gamepaused{
	background:url(resources/gamepaused.png);
    width:100%;
    height:90vh;
    background-repeat:no-repeat;
    background-position:90% 55%;
    position:absolute;
    filter:drop-shadow(10px 10px 10px black);
}