.board {
	/* min-height: 630px; */
	/* border: 6px solid; */
	/* min-width: 900px; */
	position: relative;
}

.board-background-image{
	position: absolute;
	width: auto;
	height: auto;
}

.board-background{
	position: absolute;
	border-top: none;
	margin-left: 7%;
	margin-top: 2%;
	width: 85%;
	height: 85%;
	background-color: lightgray;
}

.board-main {
	position: absolute;
	display: flex;
	border-top: none;
	margin-left: 10%;
	margin-top: 1.5%;
	width: 80.5%;
	height: 80%; /* One colum approx 97px */
}

.board-foreground{
	position: relative;
	width: auto;
	height: auto;
	z-index: 1;
}

.board-foreground img {
	position: relative;
	width:100%;
	height:auto;
	z-index: 1;
}

.board-foreground img:hover {
	cursor: pointer;
}

.board-col {
	width: 10%
	border: 10px solid black;
	border-top: none;
	border-bottom: none;
	display: flex;
	flex-grow: 1;
	flex: 1;
	flex-direction: column-reverse;
	align-items: center;
	/* box-shadow: inset 0px -2px 15px 0px rgba(0,0,0,0.75); */
}

.board-col:hover {
	background-color: rgba(0,0,0,0.15); /* 10% Black overlay */
	cursor: pointer;
}

.board-col > .chip{ /* Tag for the image */
	width: 80%;
	height: auto;
    animation: slide-down 0.6s ease;
    margin-left: -5px;
    margin-right: -5px;
	margin-bottom: -5px;
	margin-top: 5px;
}


/* Highlighted chip */
.board-col > .chipwinning { 
	width: 80%;
	height: auto;
    margin-left: -5px;
    margin-right: -5px;
	margin-bottom: -5px;
	margin-top: 5px;
	animation: highlight-winning 1.0s ease;
	z-index: 2; /* Above all */
}

/* Define animations */
@keyframes slide-down {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(0);
		}
}

@keyframes slide-left {
    0% {
        transform: translateX(-150px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes highlight-winning {
    0% {
		transform: scale(2,2);
    }
    100% {
		transform: scale(1,1);
    }
}

.controls{
	font-weight: 800;
	border-radius: 2px;
	display: inline-block;
	width: 100%;
}

.up {
	min-height: 290px;
}

.verticalspace {
	padding-bottom: 15px;
	padding-top: 15px;
	margin-bottom: 15px;
	margin-top: 15px;
}
.controls > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0px;
	padding: 10px;
	max-width: 310px;
	resize: none;
}

.controls .lefticon {
	height: 30px;
	width: auto;
}

.controls .stopper {
	height: 100%;
	width: 15px;
}

.controls .play {
	background-color: #3bc492;
	min-height: 60px;
}

.controls .play:hover {
	background-color: #48F0B2;
	cursor: pointer;
}

.controls .player1 {
	background-color: #3d3d3d;
	min-height: 60px;
}

.controls .player2 {
	background-color: #3d3d3d;
	min-height: 60px;
}

.controls .arrows {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.controls .arrow {
	height: 10px;
	width: auto;
	margin: 5px;
}

.controls .player2:hover {
	background-color: #4d4d4d;
	cursor: pointer;
}

.controls .textarea {
	font-size: 20px;
	color: white;
	text-align: center;
}
.controls .subtext {
	font-size: 15px;
	color: white;
	text-align: center;
}

.controls .vsdiv{
	margin: 0px;
	padding: 0px;
}

.controls .textareavs {
	font-size:20px;
	color: #3d3d3d;
	text-align: center;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
}

.controls .indicon {
	height: 65px;
	width: auto;
	animation: slide-left 0.3s ease;
}

.controls .turnindicator {
	margin-top: 15px;
	align-items: center;
	flex-direction: column;
	background-color: lightgray;
}

.winnerspacer {
	/* width: 100%; */
	/* width: 896px; */
	margin-top: 15px;
	min-height: 55px;
}

.winner {
	position: relative; 
	font-size:30px;
	color: #3d3d3d;
	text-align: center;
	font-weight: 900;
	letter-spacing: 5px;
	text-transform: uppercase;
	animation: winner-text 1s ease-out;
	width: 100%;
	z-index: 5;
}

@keyframes winner-text {
    0% {
        transform: translateY(-250px);
    }
    100% {
        transform: translateY(0);
    }
}