:root {

	--body-background-color: rgb(85, 21, 149);
	--title-text-color:      rgb(255,255,64);

	--underTitle-text-color: rgb(255,255,128);

	--box-background-color:  rgb(108, 56, 201);
	--box-text-title-color:  rgb(64, 0,  125);
	--box-shadow-color:      rgb(52, 11, 82);

	--link-text-color:       rgb(255, 128,255);

	--footer-text-color:     rgb(255,255,128);

	--body-color:            rgb(64,64,125);

}

html {
/*  font-size: 20px;*/
/*  line-height: 1.45;*/
}

body {
	background-color:var(--body-background-color);
    background-image:url(bg2.png);
	/*background-size: 100% 100%;*/
	
    color: var(--body-color);
    font-family: sans-serif;

	margin: 0;

	margin-inline : auto;

}

/*liens*/
a {
	color:var(--link-text-color);
/*	text-shadow: var(--box-shadow-color) 1px 1px 0px;*/
    text-decoration: underline dotted;


/*  	font-family: monospace;*/
}

h1 {
    font-family: monospace;
	text-align: center;
	font-size: 100px;
	margin: 0;
	color: var(--title-text-color);
    text-shadow: var(--box-shadow-color) 2px 2px 4px;
}

h2 {
	text-align: center;
/*	color: rgb(128,255,255);*/
	color: var(--title-text-color);
    text-shadow: var(--box-shadow-color) 2px 2px 4px;
}

h3 {
	color: var(--title-text-color);
    text-shadow: var(--box-shadow-color) 1px 1px 4px;
}

p {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}

img {
	display :      block;
	margin-right : auto;
	margin-left  : auto;
}

/*boîte à titre*/
header {
	display: flex;
	justify-content: center;
}

/*boîtes en bas*/
footer {
/*	margin-top : 80px;*/
    color: var(--footer-text-color);
/*	border: 1px solid orange;*/
	background-color: var(--box-background-color);
	height: 40px;

	display: flex;
	justify-content: center;
	list-style: none;
	padding: 10px;

}

/*boîte à liste*/
ul {
	padding-left : 10px;
/*	line-height: 1.45;*/
} 

/*éléments de la liste*/
li {
	margin-bottom : 8px;
}

/* pour mettre les boîtes au centre */
.centeredBox {

	width: auto;
	display: flex;
	justify-content: center;

	margin-left :  10px;
	margin-right : 10px;

	/*align-items: center;*/
	/*flex-wrap: wrap;*/
	/*flex-direction: row;*/
	/*align-content: center;*/
	/*align-items: flex-start;*/
}

.titleBox {

	margin-top: 20px;



	display: flex;
	justify-content: center;
	width: auto;

	background-color: var(--box-background-color);
	box-shadow: 6px 6px 0px var(--box-shadow-color);
	border-radius: 15px;
	padding : 10px 30px 10px 30px;

}

.descriBox {

	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;

	padding-left: 10px;
	padding-right: 10px;

	color: var(--underTitle-text-color);
    text-shadow: var(--box-shadow-color) 1px 1px 4px;
	background-color: var(--box-background-color);
	max-width: 65ch;

	border-radius: 15px;

	box-shadow: 6px 6px 0px var(--box-shadow-color);


}

/*colonnes*/
.column {
	width: 280px; 
	/*margin : 10px;*/
	/*border: 5px solid orange;*/
}

/*boîtes de liens*/
.link_box {

	margin : 5px 15px 10px 15px;
	/*margin-left: 10px;*/
	/*margin-right: 10px;*/

	padding: 5px 20px 10px 20px;
	background-color: var(--box-background-color);
	border-radius: 6px;

	/*border: 1px solid rgb(255,140,160);*/
	box-shadow: 6px 6px 0px var(--box-shadow-color);

}

/*images dans des cadres*/
.canvas {

	margin-top: 10px;
	margin-bottom: 10px;
	border: 10px solid rgb(255, 255, 128);
	border-style: groove;
	box-shadow: 2px 2px 10px var(--box-shadow-color);
	width: 60%;

}

.plafonnier {
	position: absolute;
	top: 0;
	right: 20px;
}

.tabouret {
	position: absolute;
	bottom: auto;
	left: 40px;
}

/*border: 2px solid rebeccapurple;*/