@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
}


body {
   background-repeat: no-repeat;
   background-position: center top;
   background-image: url("images/ciel.gif");
   background-attachment: fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

}

#container {
	font-family: "Roboto", sans-serif;
	width: 50%;
	max-width: 800px;
	overflow: hidden;
	margin: 3em auto;
	text-align: center;
}

/********************** header *****************************/


header h1 {
	font-family: "Caveat", cursive;
	font-size: 72px;
	line-height: 72px;
	color: white;
	text-align: center;
	font-weight: 800;
}

header h2 {
	font-family: "Caveat", cursive;
	font-size: 56px;
	line-height: 56px;
	color: white;
	text-align: center;
	font-weight: 400;
	margin-bottom: 24px;
}

/********************** section *****************************/


main {
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	border-radius: 24px;
   border-radius: 24px;
}

section {
	width: 30%;
	float: left;
	margin: 5%;
	padding: 0 5%;
}

section h2 {
	font-family: "Roboto", sans-serif;
	font-size: 1.5em;
	font-weight: 800;
	color: deeppink;
	margin: 1em auto 0.5em auto;
}


section p {
margin-bottom: 1em;
}


section a {
	color: white;
	text-decoration: none;
	border-radius: 48px;
	background-color: hotpink;
	display: block;
	padding: 0.8em 20%;

}


section a:hover {
	color: #fff; /* Base text color, often white for contrast */
	font-size: 1em;
	text-shadow:
	0 0 5px #fff,
	0 0 10px #fff,
	0 0 15px #fff;
}

/********************** class *****************************/

.icon-nom {
	height: 4em;
	background-color: whitesmoke;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-left: 3%;
	border-top-left-radius: 24px;
  	border-top-right-radius: 24px;
}

.icon-nom h3{
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	font-weight: 600;
	line-height: 1em;
	color: black;
}

.ligne-bas {
	height: 3em;
	background-color: whitesmoke;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0.5em 3%;
	border-bottom-left-radius: 24px;
   border-bottom-right-radius: 24px;
}

.icon-partager {
 	margin-left: auto;
 	padding-right: 1%;
}

/********************** footer *****************************/

footer{
	background-color: ;
	padding: 0.5em;
}


footer h3{
	font-family: "Caveat", cursive;
	font-size: 1.5em;
	line-height: 1em;
	color: white;
	text-align: right;
	margin-top: 0.5em;
}


/********************** version 810px *****************************/

@media screen and (max-width: 810px)
{

section {
	width: 80%;
	float: none;
	margin: 5%;
	padding: 0 5%;
}


}