@font-face {
  font-family: 'ArcadeClassic';
  src: url('assets/ArcadeClassic.woff2') format('woff2'),
      url('assets/ArcadeClassic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body{
  font-family: 'Verdana';
  letter-spacing: .1rem;
  background-image: url('./assets/img/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}
.game {
  position: relative;
  width: fit-content;
  background-color: #ffffff;
  margin-right: 50px;
  margin-top: 20px;
}
.shade{
  position: absolute;
  z-index: 1;
  width: 12%;
  height: 4.7%;
  background: #ffffff;
}
.shade:first-of-type{
  background: linear-gradient(to left, rgba(0,0,0,0) 10%, #ffffff, 30%);
 top: 38.3%; 
 left: -10%;
}
.shade:nth-of-type(2){
  background: linear-gradient(to right, rgba(0,0,0,0)10%, #ffffff, 30%);
  top: 38.3%;
  right: -10%;
 }
.container {
  width: 466px;
  height: 512px;
  margin: 42px auto 8px auto;
  display: grid;
  grid-template: repeat(31, 16.5px) /repeat(28, 16.6px);
  background-image: url('assets/img/pacman-board.png');
  background-size:100%;
  background-repeat: no-repeat;
}
.ghost, .ghostBase{
  opacity: 1;
  overflow: visible;
}
img:nth-of-type(2),
img:nth-of-type(3),
img:nth-of-type(4){
  /* visibility: hidden; */
}

.ghost img, .ghostBase img{
  transform: translate(-4px, -4px);
  width: 35px;
  height: 35px;
}
.empty.pacman{
  background-size: 19px 19px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.pacman-left{
  background-image: url('assets/img/pacman-left.png');
}
.pacman-right{
  background-image: url('assets/img/pacman-right.png');
}
.pacman-up{
  background-image: url('assets/img/pacman-up.png');
}
.pacman-down{
  background-image: url('assets/img/pacman-down.png');
}
.pacman::after{
  content:' ';
  color: rgb(0, 211, 197);
  position: relative;
  top: -13.4px;
  right: -19.2px;
  font-size: 1rem;
}
.dot{
  background-image: url('assets/img/dot-pacman.png');
  background-size: 10px 10px;
  background-position: center center;
  background-repeat: no-repeat;
}
.big-dot{
  background-image: url('assets/img/big-dot-pacman.png');
  background-size: 23px 23px;
  background-position: center center;
  background-repeat: no-repeat;
}
 .gameOn, .gameover{
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.gameover {
  flex-direction: column;
  display: none;
}
.blink{
  filter: grayscale(100%) invert(100%);
}

h1{
  padding: 20px;
  color: yellow;
  font-size: 2rem;
}
h2{
  padding: 20px;
  color: #fff;
  font-size: 2rem;
}
p{
  text-align: center;
  padding: 20px;
  color: #fff;
  font-size: 2rem;
}
img{
  width:100%;
}
.preload{
  display: none;
}

.train{
  display: flex;
  font-display: row;
  justify-content: center;
  width: 150px;
  margin-bottom: 150px;
}
.train img{
  margin: -5px -5px -5px -5px;
  max-width: 100px;
  height: auto;
}

.gameOn p{
  color: #002f5b;
}
.title h2{
  width: 600px;
  font-size: 25px;
  text-align: center;
  color: #002f5b;
  margin-bottom: 70px;
}