style.css

* {
  box-sizing: border-box;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shadow-pop-tr-yellow {
  0% {
    box-shadow: 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0)
  }
  100% {
    box-shadow: 1px -1px #edc405, 2px -2px #edc405, 3px -3px #edc405, 4px -4px #edc405, 5px -5px #edc405, 6px -6px #edc405, 7px -7px #edc405, 8px -8px #edc405;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px)
  }
}

@keyframes shadow-pop-tr-yellow {
  0% {
    box-shadow: 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405, 0 0 #edc405;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0)
  }
  100% {
    box-shadow: 1px -1px #edc405, 2px -2px #edc405, 3px -3px #edc405, 4px -4px #edc405, 5px -5px #edc405, 6px -6px #edc405, 7px -7px #edc405, 8px -8px #edc405;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px)
  }
}
@-webkit-keyframes shadow-pop-tr-blue {
  0% {
    box-shadow: 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0)
  }
  100% {
    box-shadow: 1px -1px #3c4adf, 2px -2px #3c4adf, 3px -3px #3c4adf, 4px -4px #3c4adf, 5px -5px #3c4adf, 6px -6px #3c4adf, 7px -7px #3c4adf, 8px -8px #3c4adf;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px)
  }
}

@keyframes shadow-pop-tr-blue {
  0% {
    box-shadow: 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf, 0 0 #3c4adf;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0)
  }
  100% {
    box-shadow: 1px -1px #3c4adf, 2px -2px #3c4adf, 3px -3px #3c4adf, 4px -4px #3c4adf, 5px -5px #3c4adf, 6px -6px #3c4adf, 7px -7px #3c4adf, 8px -8px #3c4adf;
    -webkit-transform: translateX(-8px) translateY(8px);
    transform: translateX(-8px) translateY(8px)
  }
}
body {
  font-family: 'Rubik Mono One',
  sans-serif;
  color: whitesmoke;
  background-color: black;
}
.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
aside {
  width: 15%;
  display: flex;
  margin: 0 20px;
}
main {
  width: 560px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.meta-game-board {
  background-color: whitesmoke;
}
.game-board {
  height: 180px;
  width: 180px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  transition: all linear 0.4s;
}
.meta-game-board div:nth-child(7),
.meta-game-board div:nth-child(8),
.meta-game-board div:nth-child(9){
  margin-bottom: 0;
}
.game-square {
  height: 60px;
  width: 60px;
  border: 3px solid papayawhip;
  background-color: black;
  transition: all linear 0.4s;
}
.shadow-pop-tr-yellow:hover {
  -webkit-animation: shadow-pop-tr-yellow .3s cubic-bezier(.47, 0.000, .745, .715) both;
  animation: shadow-pop-tr-yellow .3s cubic-bezier(.47, 0.000, .745, .715) both;
}
.shadow-pop-tr-blue:hover {
  -webkit-animation: shadow-pop-tr-blue .3s cubic-bezier(.47, 0.000, .745, .715) both;
  animation: shadow-pop-tr-blue .3s cubic-bezier(.47, 0.000, .745, .715) both;
}
header {
  margin: 0 auto;
  text-align: center;
  flex-direction: column;
  display: flex;
  margin: 20px 0;
}
footer {
  margin: 0 auto;
  text-align: center;
  margin: 15px;
}
.options-bar {
  margin-right: 35px;
  display: flex;
  justify-content: center;
}
.options-bar div {
  padding: 1em;
}
.options-bar :first-child:hover,
.options-bar :last-child:hover {
  background-color: #3c4adf;
  color: #edc405;
  border-radius: 5%;
}
button {
  border: none;
  font-family: 'Rubik Mono One',
  sans-serif;
}
.blue-player{
  background-color: #3c4adf;
}
.yellow-player{
  background-color: #edc405;
}
.blue-text-gradient {
  background: -webkit-linear-gradient(whitesmoke, #3c4adf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.yellow-text-gradient {
  background: -webkit-linear-gradient(papayawhip, #edc405);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.blue-win{
  background: linear-gradient( #3c4adf, whitesmoke);
  transition: all linear 4s;
}
.yellow-win{
  background: linear-gradient(#edc405, papayawhip);
  transition: all linear 4s;
}
.yellow-player-sideboard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}
.blue-player-sideboard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}
.blue-player-sideboard span,
.yellow-player-sideboard span {
  font-size: 2em;
  margin-top: 1em;
}
h2 {
  font-size: 1.6em;
}
h3 {
  font-size: 1.4em;
}
.instructions{
  background-color: whitesmoke;
  color: black;
  text-align: center;
  padding: 10px;
  width: 560px;
}
.unfocus {
  opacity: 0.6;
}
.hidden {
  display: none;
}
a {
  text-decoration: none;
  color: inherit;
}
 /* gradients  */
.yellow-border-gradient {
  position: relative;
  border-top: 3px solid #edc405;
}
.yellow-border-gradient:before,
.yellow-border-gradient:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#edc405), to(transparent));
  background-image: -webkit-linear-gradient(#edc405, transparent);
  background-image: -moz-linear-gradient(#edc405, transparent);
  background-image: -o-linear-gradient(#edc405, transparent);
  background-image: linear-gradient(#edc405, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.yellow-border-gradient:before {
  left: -3px;
}
.yellow-border-gradient:after {
  right: -3px;
}
.blue-border-gradient {
  position: relative;
  border-top: 3px solid #3c4adf;
}
.blue-border-gradient:before,
.blue-border-gradient:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c4adf), to(transparent));
  background-image: -webkit-linear-gradient(#3c4adf, transparent);
  background-image: -moz-linear-gradient(#3c4adf, transparent);
  background-image: -o-linear-gradient(#3c4adf, transparent);
  background-image: linear-gradient(#3c4adf, transparent);
  top: -3px;
  bottom: -3px;
  width: 3px;
}
.blue-border-gradient:before {
  left: -3px;
}
.blue-border-gradient:after {
  right: -3px;
}

/* shimmer */
.shimmer-yellow-blue:hover {
  text-align: center;
  color: rgba(55, 156, 245, 0.1);
  background: -webkit-gradient(linear, left top, right top, from(#fcf069), to(#fcf069), color-stop(0.5, #fcf069));
  background: -moz-gradient(linear, left top, right top, from(#fcf069), to(#fcf069), color-stop(0.5, #fcf069));
  background: gradient(linear, left top, right top, from(#fcf069), to(#fcf069), color-stop(0.5, #fcf069));
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #5764f9;
}