*{
	padding: 0;
	margin: 0;
}

html{
    padding: 5%;
    overflow: hidden;    
}

.container{
    display:flex;
    justify-content: center;
    align-items: center;
}

#turn{
    font-family: monospace;
    font-size: 8vh;
    text-align: center;

    position: absolute;
    height: 10vh;
    width: auto;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 16%;
}

.wrongTurn {
    color: red;
}

#chessBoard{
    display:flex;
    justify-content: center;
    align-items: center;
	width: 80vh;
	height: 80vh;
    padding-left: 50px;
}

.lightBox{
    width: 10vh;
    height: 10vh;
    background-color: rgb(240, 217, 181);
    display: block;
}

.box:hover{
    cursor: pointer;
    background-color: rgb(98, 209, 212);
}

.darkBox{
    width: 10vh;
    height: 10vh;
    background-color:rgb(181, 136, 99);
    display: block;
}

.activeSquare{
    cursor: pointer;
    background-color: rgb(44, 231, 20);
}

.availableSquares {
    background-image: url(../assets/green-circle.png);
  
    z-index: 3;
}


.availableSquares, .pieceInDanger, .enPassant, .castle {
    position: relative;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
  
    width: 5vh;
    height: 5vh;
  
    background-repeat: no-repeat;
    background-size: 100%;
}

.pieceInDanger, .enPassant, .castle {
    z-index: 4;
}

.availableSquares {
    background-image: url(../assets/green-circle.png);
    z-index: 3;
}

.pieceInDanger {
    background-image: url(../assets/red-circle.png);
}

.enPassant {
    background-image: url(../assets/red-circle.png);
}

.castle {
    background-image: url(../assets/blue-green-circle.png);
}

.lastLocation {
    background: radial-gradient(rgb(198, 240, 194) 0%, rgb(198, 240, 194) 50%, rgb(255, 255, 255) 100%);
}


/* for check... */
#check{
    max-height: 12h;
    width: 22vh;

    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 5.5%;
    left: 50%;

    z-index: 2;
}

#checkText, #checkmateText, #stalemateText {
    position: relative;

    font-size: 10vh;
    text-align: center;
}

#checkmateText {
    left: -50%;
}

#stalemateText{
    left: -32%;
}

/* show king in check - for a box with red corners when the piece is in danger */
.kingInCheck {
    background: radial-gradient(transparent 0%, transparent 79%, rgba(255, 11, 2, 0.8) 80%);
    z-index: 3;
}


/* for the ending of the game... */
#banner{
    max-height: 65vh;
    max-width: 155vh;

    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 62%;
    left: 50%;

    z-index: 2;
}

.winnerBanner{
    background-image: url(../assets/banner.png);
    background-repeat: no-repeat;
    background-size: 100%;

    height: 60vh;
    width: 150vh;

    position: relative;
    z-index: 3;
}

.winnerText{
    position: relative;

    font-size: 20vh;
    text-align: center;
}


/* for displaying things */
.is--hidden{
    display: none;
}