/* PARAMETRES DE MISE EN PAGE GENERIQUES A TOUTES LES PAGES */
:root {
--main-bg-color-dark: #212140;
--main-bg-color-light: #B4B0FF;
--clubelek-violet-color: #d150ac;
--clubelek-rosa-color: #ef4178;
--clubelek-chair-color: #ffac78;
--clubelek-yellow-color: #fcd03d;
--clubelek-blue-color: #1baec2;
--clubelek-light-blue-color: #c6e1d3;

}

body {
font-family: sans-serif;
}

#header {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height:8%;
background-color: var(--main-bg-color-dark);
color: white;
}

#header p {
font-size:30px;
font-family:"Arial";
font-weight:bold;
}

#footer{
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
bottom: 0;
width: 100%;
height:8%;
background-color: var(--main-bg-color-dark);
color: white;
}

#footer img {
width: auto;
max-height: 80%;
margin-left: 5%;
margin-right: 5%;
}

.mainSection {
/*Ouais j'ai la flemme d'être propre, déso si un puriste passe par ici...*/
position: fixed;
display: flex;
top: 10%;
left: 1%;
width: 98%;
height: 80%;
}



/*PARAM SPECIFIQUES A LA MAIN PAGE*/

ul.activitySelector {
display: flex;
flex-wrap: wrap;
margin: auto;
list-style: none;
align-items: center;
justify-content: center;
text-align: center;
}

li.activitySelector a{
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
text-decoration: none;
color: black;
width: 300px;
min-height: 300px;
margin: 50px;
background-color: var(--main-bg-color-light);
transition: color 1s, background-color 1s;
}
li.activitySelector:hover a{
background-color: var(--main-bg-color-dark);
color: white;
}

li.activitySelector a h2 {
font-size: 30px;
text-align: center;
}

li.activitySelector:hover a h2 {
display: inline-block;
/*opacity: 0;*/
height: 100%;
}

li.activitySelector a img {
display: inline;
max-height: 210px;
max-width: 280px;
align-self: center;
}
li.activitySelector:hover a img {
display: none;
}

li.activitySelector a p {
display: none;
padding: 10px 10px;
text-align: justify;
color: var(--main-bg-color-light);
transition: color 1s;
}
li.activitySelector:hover a p {
display: inline-block;
color: white;
transition: color 1s;
}



/*PARAM SPECIFIQUES AUX PAGES D'ACTIVITES*/

.button {
border-radius:20px;
display:block;
cursor:pointer;
font-family:Arial;
font-size:25px;
font-weight:bold;
padding:30px;
margin: 0% 2%;
text-decoration:none;
}

#runButton {
	order: 3;
	background:linear-gradient(to bottom, #737375 5%, #5D5C5E 100%);
	border:3px solid #353436;
	color:#ffffff;
	text-shadow:0px 1px 0px #2E362B;
}
#runButton:active {
	position:relative;
	top:3px;
}

#connectButton {
	order: 1;
	background:linear-gradient(to bottom, #77B55B 5%, #568241 100%);
	border:3px solid #476B36;
	color:#ffffff;
	text-shadow:0px 1px 0px #2E362B;

}
#connectButton:active {
	position:relative;
	top:3px;
}

#animationArea {
	flex : 1;
	order: 2;
	margin: 2%;
}

#blocklyArea {
width:50%;
flex-wrap: nowrap;
}

#toolsArea {
float:right;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
text-align:center;
height:100%;
width:48%;
margin-right:2%;
}


/* PARAMS DES MODAL */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.consignes {
	display: none;
}
