style.css

/* CSS files add styling rules to your content */

body {
  font-family: "Press Start 2P", helvetica, arial, sans-serif;
  margin: 2em;
  background-color: #CDFEEF;
  color: #14213d;
}

h1 {
  font-family: "Press Start 2P", verdana, arial, sans-serif;
  color: #e63946;
  
}

button {
  padding: 10px;
  border-radius: 15px;
}

#gameButtonArea > button {
  width: 200px;
  height: 200px;
  margin: 2px;
}

.hidden {
  display: none;
}

#button1 {
  background: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2Ffinn200x200.jpg?v=1616267310197");
}

#button2 {
  background: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2FJake200x200.png?v=1616275230552");
}

#button3 {
  background: pink;
  background-size: 100%;
  background-image: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2FPB400x400.png?v=1616275581662");
}

#button4 {
  background: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2FMarceline200x200.jpg?v=1616278390762");
}
#button5 {
  background: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2FLemongrab200x200.png?v=1616280412714");
}
#button6 {
  background: url("https://cdn.glitch.com/2421ee91-303d-4cb6-b184-1d6e0223af1d%2FGunter200x200.png?v=1616280731837");
}

#button1:active, #button1.lit {
  background: #0077b6;
  
}

#button2:active, #button2.lit {
  background: orange;
}

#button3:active, #button3.lit {
  background: #ff5c8a;
}

#button4:active, #button4.lit{
  background: #7c0006;
}

#button5:active, #button5.lit{
  background: #eeef20;
}
#button6:active, #button6.lit{
  background: black;
}