pacman.css

body {
  text-align: center;
  background-color: rgb(15, 24, 59);
  display: block;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  font-family: "Macondo", cursive;
}

h1 {
  padding-bottom: 10px;

  color: rgb(111, 183, 205);
  text-align: center;
  text-decoration: double;
  font-family: "Macondo", cursive;
  font-size: 100px;
}

h1 {
  animation: colorFade 10s infinite;
}

@keyframes colorFade {
  0% {
    filter: drop-shadow(6px 6px 6px rgb(255, 150, 255));
  }
  20% {
    filter: drop-shadow(6px 6px 6px rgb(255, 150, 100));
  }
  40% {
    filter: drop-shadow(6px 6px 6px rgb(255, 200, 200));
  }
  60% {
    filter: drop-shadow(6px 6px 6px rgb(255, 150, 250));
  }
  80% {
    filter: drop-shadow(6px 6px 6px rgb(100, 110, 255));
  }
}

.buttons {
  padding: 4em;
  /* display: flex; */
  justify-content: space-around;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.commandGuide {
  padding: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  margin: auto;
  color: rgb(111, 183, 205);
}

input {
  padding: 1em;
  height: fit-content;
}

p {
  word-wrap: normal;
  padding: 5px;
  color: rgb(111, 183, 205);
}

/* Styling for glow button effect */
@import url("https://fonts.googleapis.com/css?family=Raleway");

:root {
  --glow-color: hsl(186 100% 69%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.35em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-family: "Macondo", cursive;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 1em;

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  /* animation: border-flicker 2s linear infinite; */
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

/* .faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
} */

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: 1em;
  }
  body {
    font-size: 80px;
  }
}

/* @media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: 30px;
  }
  body {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
} */

/* Board and box */

.board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin: auto;
  border: 2px solid rgb(243, 238, 242);
  /* width: 50%; */
  max-width: 550px;
  min-width: 550px;
  background-color: rgb(180, 229, 240);
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

.box {
  border: 3px solid rgb(65, 227, 235);
  height: 100px;
  width: 100px;
  font-family: sans-serif;
  font-size: 75px;
  text-align: center;
}