/*** Initialisation***/

/* Polices*/

@font-face { /*Titres*/
	font-family: "Viga"; 
	src: url("https://fonts.gstatic.com/s/viga/v14/xMQbuFFdSaiXzQUpDg.woff2") format("woff2"); 
	font-style: normal; 
	font-weight: 400; 
}

@font-face { 
	font-family: "Sunflower"; 
	src: url("https://fonts.gstatic.com/s/sunflower/v14/RWmPoKeF8fUjqIj7Vc-0sMbirOMQBm8AZSXxSxgIpkk0e8w0Fyad.119.woff2") format("woff2"); 
	font-style: normal; 
	font-weight: 500; 
}

@font-face { 
	font-family: "Ubuntu"; 
	src: url("https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2") format("woff2"); 
	font-style: normal; 
	font-weight: 400; 
}

h1, h2{
	font-family: Viga, Sans-serif;
}

h1{
	color: #ED1B73;
	font-size: 71px;
	font-weight: 600;
	text-align:center;
	padding: 30px;
	background-color: white;
	margin: 0px;
}

h2{
	font-size: 34px;
	font-weight: 600;
	color: #FC4C03;
	text-align: center;
}

a{
	font-family: Sunflower, Sans-serif;
	color: white;
	text-decoration: none;
	font-size: 22px;
	font-weight: 500;
}

p{
	font-family: Ubuntu, Sans-serif;
}

/***Header***/

#header{
	width: 100%;
	display: flex;
	background-color: white;
}

#logo{
	width:40%;
	max-width: 540px;
	margin: auto;
	padding: 20px;
}


/***Corps de page***/

body {
	background-image: url(https://i.pinimg.com/originals/a5/59/6f/a5596ffd4897b35688d3b3b882d7919d.jpg);
	background-size: cover;
	background-attachment: fixed;
}

#section{
	display: flex;
	flex-wrap: wrap;
	margin: 100px;
}

.card{
	margin: auto;
	margin-top: 60px;
	width: 730px;
	background-color: #f7f7f7;
	padding: 20px;
	min-height: 312px;
}

.element{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.image {
	max-width: 220px !important;
	padding: 20px;
	max-height: 130px;
  }

.bouton{
	background-color: #2a85c7;
	padding: 20px;
	border-width: 0px;
	border-radius: 95px;
	margin: 20px;
	text-align: center;
}

.bouton:hover{
	background-color: #fc4c03;
	/*cursor: pointer;*/
}



/***Media queries***/

@media screen and (max-width: 840px)
{
	h1
	{
		margin: 100px 0px;
	}
		#section
	{
		margin:0px;
	}
	.card
	{
		display: flex;
		flex-direction: column;
	}
	.element
	{
		flex-direction: column;
	}
}	

@media screen and (max-width: 500px)
{
	.card
	{
		width:500px;
	}
}