* {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 0px;
}
h1 {
  background-color: #9c7ab3;
  color: white;
  margin-bottom: 25px;
  padding: 15px;
  text-align: center;
  font-size: 2.5em;
}
h2 {
  background-color: #9c7ab3;
  color: white;
  margin: 0px;
  padding: 10px;
  text-align: center;
  font-size: 1.8em;
}
h3 {
  font-size: 1.5em;
  padding-top: 10px;
  margin: 0px;
  border-bottom: 4px double black;
}
p {
  font-size: 1.2em;
  margin: 10px;
}
#board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  width: 200px;
  height: 200px;
  margin: 5% auto 0px auto;
}
.grid-item {
  height: 25px;
  border: 1px solid black;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#keyboard {
  margin: auto;
  text-align: center;
}
.key, #reset, #save {
  display: inline-block;
  padding: 10px;
  margin: 1px;
  background-color: #e9d5f6;
  border: 1px outset #9c7ab3;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
.key:hover, #reset:hover, #save:hover {
  background-color: #9c7ab3;
  border: 1px solid #69467c;
}
#reset:hover, #save:hover {
  color: white;
}
#leader {
  margin: 20px 100% 0px 0px;
  width: 90%;
  height: 500px;
  border: 4px solid #9c7ab3;
}
#leaderboard {
  background-color: white;
  color: black;
  //margin 4px;
  //padding: 10px;
  display: inline-block;
  width: 96%;
}
#leaderboard h2 {
  padding-top: 10px;
}
h2 .emptyMsg {
  font-size: 1.5rem;
  margin: auto;
  padding: 0px;
}
.flexbox:after {
  content: "";
  display: table;
  clear: both;
}
.column1 {
  float: left;
  width: 50%;
}
.column2 {
  float: left;
  width: 50%;
}
#message {
   padding: 10px;
   text-align: center;
   font-size: 24px;
}
@keyframes pop {
  0% { transform: scale(1); background-color: #e9d5f6;}
  50% { transform: scale(1.1); background-color: #e9d5f6;}
  100% { transform: scale(1); background-color: #e9d5f6;}
}
@keyframes flip {
  0% { transform: rotateX(0); background-color: #e9d5f6;}
  45% { transform: rotateX(90deg); background-color: #e9d5f6;}
  55% { transform: rotateX(90deg); background-color: #e9d5f6;}
  100% { transform: rotateX(0); background-color: #e9d5f6;}
}
.pop {
  animation: pop 0.1s linear;
}
.flip {
  animation: flip 0.5s ease-in;
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@media (max-width:975px) {
.column1 {
  width: 100%;
}
.column2 {
  width: 100%;
  float: none;
}
#leader {
  margin: 20px auto;
  text-align: center;
  width: 80%;
  height: 500px;
  border: 4px solid #9c7ab3;
}
#leaderboard {
  background-color: white;
  color: black;
  //margin 4px;
  //padding: 10px;
  display: inline-block;
  width: 96%;
}
h2 {
  padding-top: 10px;
  font-size: 1.6em;
}
h2 .emptyMsg {
  font-size: 1rem;
}
.emptyMsg {
  font-size: 1rem;
}
}