/* 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;
	background-color: grey;
	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%;
}
