.page {
  display: flex;
  flex-direction: column;
  background-color: #000;
  border: 15px solid #c0c0c0;
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.6), inset 2px 2px 3px rgba(255, 255, 255, 0.6), 4px 4px 6px rgba(0, 0, 0, 0.6), -4px -4px 6px rgba(255, 255, 255, 0.6);
}

body {
  font-family: "Farro", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #f1f1f1;
  background-color: #c0c0c0;
}

.progress,
.menu {
  margin: auto;
  flex-direction: row;
}

.cylinderSet,
.buttonSet {
  display: inline-block;
  text-align: center;
  margin-bottom: 3%;
}

.menu button {
  align-items: center;
  font-size: 1.2rem;
  text-align: center;
  background-color: #c0c0c0;
  border: solid #000;
  border-width: 10px 10px 10px 10px;
  border-top-color: #e6e6e6;
  border-left-color: #e9e9e9;
  border-bottom-color: #757575;
  border-right-color: #505050;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-family: monospace;
  font-weight: bold;
  color: black;
  padding: 5px 5px;
  width: 60px;
  height: 60px;
}

button:active {
  transform: translate(2px, 4px);
}

.optionText {
  display: inline-block;
  vertical-align: middle;
  background-color: #000000;
  border: ridge #e6e6e6;
  border-width: 10px 10px 10px 10px;
  margin: 0;
  text-align: center;
  height: 30px;
  width: 110px;
  color: rgb(7, 161, 7);
  font-family: monospace;
  font-size: 1.5rem;
  text-transform: uppercase;
}

h1 {
  margin-bottom: 2%;
  font-size: 3rem;
  text-align: center;
}

.gameContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game {
  width: 414px;
  transform-origin: center center;
}

#gameBoard {
  width: 414px;
  background-color: #8a8681ce;
  margin: auto;
  margin-bottom: 3%;
  box-shadow: inset 5px 0 10px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61;
}

.gameRow {
  padding: 0;
  margin: 0;
  height: 49px;
}

.gameCell {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: #e6e6e6;
  border: solid #000;
  border-top-color: #f1f1f1;
  border-left-color: #e9e9e9;
  border-bottom-color: #757575;
  border-right-color: #505050;
  box-shadow: inset -5px 0 10px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61;
}

.ball {
  position: relative;
  border-radius: 50%;
  height: 38px;
  width: 38px;
  margin: 2px;
  padding: 0;
}

@keyframes ball-animation {
  20%,
  80% {
    transform: scaleY(0.98) scaleX(1.01);
  }
  48%,
  68% {
    transform: scaleY(0.95) scaleX(1.04);
  }
  0%,
  100% {
    transform: scale(1);
  }
  from {
    transform: translateY(1px);
  }
  to {
    transform: translateY(3px);
  }
}

.selectedBall {
  animation: ball-animation 0.6s infinite;
}

.ballYellow {
  background: radial-gradient(circle at 10px 10px, rgb(255, 255, 0), rgb(45, 45, 1));
}

.ballGreen {
  background: radial-gradient(circle at 10px 10px, rgb(8, 167, 8), rgb(0, 5, 0));
}

.ballBrown {
  background: radial-gradient(circle at 10px 10px, rgb(163, 92, 92), rgb(59, 2, 2) 70%);
}

.ballPink {
  background: radial-gradient(circle at 10px 10px, rgb(255, 105, 180), rgb(86, 11, 46));
}

.ballBlue {
  background: radial-gradient(circle at 10px 10px, rgb(105, 105, 235), rgb(1, 1, 27));
}

.ballLightBlue {
  background: radial-gradient(circle at 10px 10px, rgb(135, 206, 250), rgb(11, 11, 83));
}

.ballRed {
  background: radial-gradient(circle at 10px 10px, rgb(255, 0, 0), rgb(45, 0, 0) 70%);
}

@media only screen and (max-width: 650px) {
  .menu,
  .progress,
  .gameContainer {
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    justify-content: center;
  }

  .gameContainer {
    transform: scale(80%);
  }

  h1,
  .cylinderSet,
  .buttonSet {
    transform: scale(87%);
  }
}