body
{
	background: black;
	text-align: center;
}

.bodyafter
{
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

	background-repeat: no-repeat;
	background-attachment: fixed;
}

#introduction
{
	color: white;
	font-size: 30px;
}

#stripe
{
	background-color: #fec84e;
	background-image: linear-gradient(315deg, #fec84e 0%, #ffdea8 74%);
	height: 50px;
	text-align: center;
	color: black;
}

#solution {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    font-size: 20px;
    color: black;
    background: black;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

#solution:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: .5;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

#solution:active {
    color: #000
}

#solution:active:after {
    background: transparent;
}

#solution:hover:before {
    opacity: 20;
}

#solution:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffff99;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

button
{
	border-radius: 1%;
	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
	font-family: monospace;
	font-weight: 700;
	color: black;
	letter-spacing: 1px;
	font-size: 25px;
	transition: all .1s;
	outline-color: black;
}


#message
{
	border-radius: 5%;
	font-size: 30px;
}

#message_block
{
	border-radius: 5%;
	background: none;
	height: 100%;
	text-align: center;
	color: #ffcc5c;
	font-style: italic;
	font-size: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
}


button:hover
{
	color: red;
	background: black;
	transform:scale(1.3,1.3);
    -webkit-transform:scale(1.3,1.3);
    -moz-transform:scale(1.3,1.3);
}


table
{
	margin: 35px auto;
}

h1
{
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
	font-weight: normal;
	line-height: 1.1;
	font-size: 70px;
	text-align: center;
	color: black;
	
	margin: 0;
	text-transform: uppercase;
	padding: 35px 0;
  	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

}

.white
{
	background-color: white;
	width: 50px;
	height: 50px;
}

.black
{
	background-color: black;
	width: 50px;
	height: 50px;
}

.black_queen
{
	background-image: url(black_queen.jpg);
	background-size: 25px 25px; 
	background-position: center; 
	background-repeat: no-repeat;
}

.white_queen
{
	background-image: url(white_queen.jpg);
	background-size: 25px 25px; 
	background-position: center; 
	background-repeat: no-repeat;
}

td:hover
{
	background-color: green;
	opacity: 1
	background: green;
	transition: all .1s;
}

td:hover,
{

}

.lds-grid {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}