html,
body{
  font-family: 'Play', sans-serif !important; 
  margin: 0;
   background:
      radial-gradient(circle at top left,#5b21b6 0%,transparent 30%),
      radial-gradient(circle at bottom right,#0ea5e9 0%,transparent 30%),
      #050816;
  background-color:#000 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.container-fluid{
  width: 100%;
  height: 100%;
}

.game-well{
    position: relative;
	background-color: #000;
	margin: auto;
	margin-top: 100px;
	margin-bottom: 100px;
	width: 450px;
	height: 450px;
	padding: 10px;
	border-style: solid;
	border-width: thin;
    border-radius: 30px;
}

.right-shadow{
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.25), 0 0 60px rgba(139, 92, 246, 0.15);
}

.symbolOptions{
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
}

.mid-center{
  margin: 0;
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  
  color:#c0b4b4;
}
h1.game-title {
    color: #fff;
    text-align: center;
    color: #fcf9ff;
    font-size: 32px;
    font-weight: 700;
    
	letter-spacing: 2px;
}
.symbolOptions > button{
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  top: 40%;
}

.symbolOptions >button:hover{
 font-size: 22px;
}

button{
 border: 0 !important;
  -webkit-appearance: none;
  background-color: transparent;
}

button:focus{
  outline: none !important;
  background-color: transparent!important;
} 

button::-moz-focus-inner {
  border: 0;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.score-board{
 position: relative;
 color: #fff;
 height: 100px;
 
 text-transform: uppercase;
background: rgba(255, 255, 255, 0.07);
border-radius: 18px;
padding: 12px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.board-container{
  display: none;
  height: 100%;
}

.player-and-stats{
  margin-bottom: 5px;
}

.player{
  text-align: left;
  padding-left: 5px !important;
  margin-left: 5px;
}

.stats{
  text-align: center;
  border-radius: 5px;
}

.player, .stats{
  height: 35px;
}


h6.player2-score.score {
    color: #0c8ac2;
    font-weight: 600;
    font-size: larger;
}
.x-gradient-color{
  background: #121212; /* For browsers that do not support gradients */
  
}
 h6.player1-score.score {
    color: #b7acca;
    font-weight: 600;
    font-size: larger;
}

.fa-times{
  color: #c084fc;  
  transition: 0.3s ease-in;

}

.fa-circle-o{
  color: #38bdf8;
  transition: 0.3s ease-in;
}

.o-gradient-color{
  background: #121212; /* For browsers that do not support gradients */
  
 }

.black-gradient{
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.fa-gradient{
  
  -webkit-text-fill-color: transparent;
}

.text-shadow{ 
  text-shadow: 0 0 15px #c084fc !important;
  -webkit-text-shadow: 12px 5px 5px ##c084fc !important;;
}

.text-shadow2{ 
  text-shadow: 0 0 15px #38bdf8 !important;
  -webkit-text-shadow: 12px 5px 5px #ccc !important;;
}

.statuses{
  height: 20px;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  margin: 30px;
  color:#fff;
}

.boxList{
  width: 100%;
  height: 240px;
  padding-left: 0 !important;
  list-style: none;
  position: relative;
}

li{
  position: relative;
  
  width: 33.33%;
  height: 33.33%;
  float:left;
  text-align: center;
  border-style: solid;
  border-top:none;
  border-left:none;
  border-width: thin;
  border-color: #ccc;
  box-sizing: border-box;
  padding: 10px;
}

li > i{
  pointer-events:none
}


li:nth-child(3n) { 
  border-right:none;
}

li:nth-last-child(-n+3){
  border-bottom:none;
}

footer{
  margin-top: 10px;
  text-align: center;
  color: #66a1ee;
}

a:link {
  text-decoration: none !important;
  outline:none;
  border:0;
  color: #66eece !important;
}
a:visited{
 color: #66eece !important;
}

/*any devices smaller than a tablet*/
@media only screen and  (max-width:550px) {
  .game-well{
    width: 100%; 
    margin-top: 70px;
  }
}