:root {
  --gradient1: rgb(61, 195, 195);
  --gradient2: rgb(242, 209, 80);
  --gradient3: rgb(231, 156, 65);
  --bodyTextcolor: rgb(55, 60, 71);
  --boxBorder: rgb(124, 122, 155);
  --gameBackground: rgb(255, 254, 253);
  --buttonBackground: rgb(248, 229, 151);
  --controlsGrey: rgb(153, 153, 153);
  --square1: rgb(61, 195, 195); 
  --square2: rgb(255, 225, 103); 
  --square3: rgb(247, 156, 46); 
  --square4: rgb(237, 85, 106); 
  --square5: rgb(52, 170, 86); 
  --square6: rgb(187, 76, 170); 
  --square7: rgb(140, 149, 154); 
  --square8: rgb(55, 105, 163); 

}
html {
  font-family: "Quicksand", sans-serif;
  font-size: 19px;
}
body{
  background: linear-gradient(
    120deg, 
    var(--gradient1) 0%, 
    var(--gradient2) 50%,
    var(--gradient3)  100%
    );
    padding: 30px 0 30px 0;
}
main {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background-color: var(--gameBackground);
  color: var(--bodyTextcolor);
  letter-spacing: 2px;
  box-shadow: 0px 5px 6px 0px rgb(200, 154, 69);
}
h1 {
  margin: 0;
}

#score {
  font-size: 1.7rem;
  font-weight: 500;
  margin: 1rem 0;
}
button {
  font-family: "Quicksand", sans-serif;
  border-radius: 5px;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  background: var(--buttonBackground);
  box-shadow: 0px 3px 4px 0px #b4b0b0;
  color: var(--bodyTextcolor)
}
ul {
  display: grid;
  grid-template-columns: repeat(4, 95px);
  grid-template-rows: repeat(4, 95px);
  gap: 10px;
  padding: 0;
}
li {
  list-style: none;
  border: 0.5px solid var(--boxBorder);
  border-radius: 10px;
  cursor: pointer;
}
/* .shake {
  animation: shake 0.1s;
} */
.pop {
  animation: pop 0.5s;
}
/* @keyframes shake {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(-1deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(1deg);}
  100% {transform: rotate(0deg);}
} */
@keyframes pop {
  0% {transform: scale(1);}
  40% {transform: scale(1.04);}
  100% {transform: scale(1);}
}