/* 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*/

#runButton {
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:20px;
	border:3px solid #4b8f29;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:25px;
	font-weight:bold;
	padding:30px;
	margin: 0% 2%;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}

#runButton:hover {
	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
	background-color:#72b352;
}
#runButton:active {
	position:relative;
	top:3px;
}

#blocklyArea {
width:50%;
height:100%;
float:left;
}

#toolsArea {
float:right;
height:100%;
width:48%;
margin-right:2%;
text-align:center;
}
