/* preventing from overflow */
html, body {overflow-x: hidden;}
* {box-sizing: border-box;}

body {
	margin: 0; padding: 0;
	display:flex;
    flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: rgb(3, 117, 3);
}

a {text-decoration: none;}
a:link {color:#4499FF;}
a:visited {font-family:"verdana"; font-size:14pt; color:#4499FF;} 
a:hover {color:#b70000; text-decoration:none;} /* B70000 = rouge */

nav{
    align-self: flex-start;
    min-height: 20px;
    font-size: 18px;
    padding: 10px 0 0 10px;
    font-family: "comic sans MS", georgia;
}
  
main {
    display: flex;
    flex-direction: row;
    justify-content: center; align-items: center;
    margin: auto;
	max-height: 100vh;
}

/* -------- part 1/2  (boutons, echiquier, numero du coup)  --------- */
.gameView{
	display: flex;
	justify-content: center;
	align-items: center; 
}
aside{ /* container des 3 boutons à gauche du plateau */
    display: flex;
    flex-direction: column;
    min-height: 95vmin;
    justify-content: space-between;
}
#buttonsMenu{
    display: flex;
    flex-direction: column;
}
button{
	margin-bottom: 10px;
	background-color: rgb(17, 146, 189);
	color: white;
	border-radius: 5px;
	margin: 10px;
} 
.disable{background-color: rgb(5, 84, 104); color: rgb(156, 156, 152); font-style: italic;}

#compteurCoups{
    text-align: center;
    margin-bottom: 40px;
}


/* table id="plateau" */ 
#plateau{
	border-collapse: collapse; 
	background-image: url('../images/marbre.png');
	border-radius: 8px;
}

#plateau td, #plateau th{
	width:9vmin; line-height: 9vmin;
	border: 0;
	text-align: center;
}
#plateau td{font-size: 9vmin;}
#plateau th{font-size: 2vmin; color: rgb(20, 100, 180);}


/* colorisation des cases "noires" */
@layer Global{
	#plateau tbody tr:nth-of-type(2n+1) td:nth-of-type(2n){background-color: #1117;}
	#plateau tbody tr:nth-of-type(2n) td:nth-of-type(2n+1):not(td:nth-of-type(9)){background-color: #1117;}
}

.origineYellow{background-color: rgb(221, 221, 114);}
.destinationYellow{background-color: rgb(219, 219, 87);}


/* --- echec   --- */
.red{color: red;}
.view table+div{margin-top: 20px; display: flex; color: bisque;}
/* --- echec et mat  --- */
#mat{opacity: 0;font-size: 3vmin; color: red;}



/* ------- part 2/2 : Affichage des coups joués ---------  */ 
.movesGlobalContainer{ /* parent de 2 sections */
	font-size: 2vmin;
	margin-left: 50px;
	max-height: 150vh;
	display: flex;
	flex-direction: column;
}


/* section 1 - titre uniquement*/
.section1Title{
	text-align: center;
	background: yellowgreen;
}
#h1{font-size: 2vmin; font-weight: bold;}
.section1Title #h1+p{font-size: 1.2vmin;}

/* section 2 - container qui contient les 2 <table> reels moves  */
.containerMovesTable{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

/* pour les 2 <table> */
.containerMovesTable table{width: 180px;}
.containerMovesTable table:nth-child(1){margin-right: 60px;}

.containerMovesTable th{text-align: right;}

.containerMovesTable tbody td{
	color: white; 
	text-align: right;
}

.containerMovesTable tbody td:nth-of-type(1){color: rgb(197, 197, 189);}
.containerMovesTable tbody td:nth-of-type(2n+1) span{color: black;} 

.containerMovesTable tbody td:nth-of-type(1).tablemovesActive{color: red;}


/* --- media query --- */
@media screen and (max-width: 1000px){
	main{flex-direction: column;}
	.movesGlobalContainer{display: none;}
}

@media screen and (max-width: 500px){
    .view{flex-direction: column;}
	aside{flex-direction: row; min-height: 60px;}
	#buttonsMenu{flex-direction: row;}
	#compteurCoups{
		margin-bottom: 2px; width: 120px;
		text-align: left;
		height: 20px;
		margin-top: 20px;;
	}
	.brCompteur{display: none;}
}