*{
  background-color: #200030;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
}

.score {
  justify-content: flex-start;
}

.title{
  position: absolute;
  margin-left: 470px;
}

.personalInfo{
  display: flex;
  flex-direction: column;
}

.name {
  font-family: sans-serif;
  color: #edef75;
}

.links{
  justify-content: flex-end;
}

#status {
  font-size: 35px;
  position: absolute;
  z-index: 2;
  width: 370px;
  opacity: .85;
  margin-top: 300px;
  padding: 30px;
  visibility: visible;
}



.links {
  font-family: sans-serif;
}

.website{
  color: #edef75;
}

.linkedin{
  color: #edef75;
}

.github{
  color: #edef75;
}

.pacman-page{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}

h1, h2 {
  color: #edef75;
  font-family: 'Bungee', cursive;
}

h2 {
  font-size: 17px;
}

h3 {
  color: #edef75;
  font-family: 'Bungee', cursive;
  font-size: 17px;
}

#pacman-board{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 1190px;
}

.pacman {
  width: 35px;
  height: 35px;
  background-image: url("pacmanTest2.gif");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

.pacmanDies {
  width: 35px;
  height: 35px;
  background-image: url("pacmanGone.gif");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes spin1 {
	0%  {transform: translate(0em, 0);}
	50% {transform: translate(5em, 0);}
}

.ghost {
  width: 35px;
  height: 35px;
  background-size: 27px;
  background-repeat: no-repeat;
  background-position: center;
}

.blinky {
  background-image: url("blinky.gif");
}

.pinky {
  background-image: url("pinky.gif");
}

.inky {
  background-image: url("inky.gif");
}

.clyde {
  background-image: url("clyde.gif");
}

.scaredghost {
  background-image: url("scaredghost.webp");
}

.wall {
  width: 35px;
  height: 35px;
  background-image: url("tile.png");
  background-size: cover;
  filter: hue-rotate(10deg) brightness(1.2);
  border-radius: 2.7px;
}

.coin {
  width: 35px;
  height: 35px;
  background-image: url("coin.png");
  background-size: 8.5px;
  background-repeat: no-repeat;
  background-position: center;
  /* filter: brightness(1.1); */
}

.pellet {
  width: 35px;
  height: 35px;
  background-image: url("pellet.png");
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center;
  /* filter: drop-shadow(3px 3px 4px blue) invert(30%); */
}

.ground {
  width: 35px;
  height: 35px;
  background-color: #200030;
}

.pinkground {
  width: 35px;
  height: 35px;
  background-color: pink;
}

.portalFirst {
  width: 35px;
  height: 35px;
  background-image: url("portalFirst.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* filter: hue-rotate(300deg); */
}

.portalSecond {
  width: 35px;
  height: 35px;
  background-image: url("portalSecond.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* filter: hue-rotate(30deg); */
}

.arrow {
  width: 35px;
  height: 35px;
  background-image: url("leftArrow.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .6;
  /* filter: hue-rotate(30deg); */
}

.game-over {
  color: lightgray;
  font-size: 100px;
  position: absolute;
  z-index: 1;
  margin: auto;
  align-self: center;
  margin-right: 800px;
  padding-left: 200px;
  padding-right: 200px;
}

@keyframes example {
    0%   {left:0px;}
    100%  {left:200px;}
}