/***************************
file name : main_style.css
description : gère l'affichage général de la page principale
auteur : Patrick le 28 juin 2017
modifié le : 

****************************/
	body{
		margin:0;
		font-family: 'Quicksand', sans-serif;
		background-image:url('backgrounds/valele_background_main.svg');
		background-size: 2500px;
	}
	div{
		margin-right:0px;
		margin-left:0px;
	}
	ul{
		list-style-type: none;
	}
	a{
		color: #727272;
		text-decoration: none;
	}
	a:hover{
		color:#8764D7;
	}
	a:active{
		color:#8764D7;
	}
	#top{
		height:100%;
		padding-top:50px;
		padding-bottom:30px;
	}
	#presentation{
		padding-top:30px;
		padding-bottom:30px;
	}
	#contact{
		padding-top:30px;
		padding-bottom:30px;
	}
	#bottom{
		background-image:url('motifs/valele_borderline.svg');
		background-repeat: repeat-x;
		background-position:right top;
		height:250px;
		padding-top:0px;
		padding-bottom:0px;
	}
	#webmaster{
		padding-top:10px;
		padding-bottom:30px;
	}
	.text1{
		color:#8764D7;
		font-weight:bold;
	}
	.text2{
		color:#727272;
	}
	.text3{
		color:#8764D7;
	}
	.text4{
		color:#727272;
	}
	.text5{
		color:#8764D7;
	}

	
	/*à partir de là, tous les éléments qui s'adaptent*/
	
	@media screen and (min-width: 0px) and (max-width: 700px) {
		#top{
			padding-left:50px;
			padding-right:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:550px;
		}
		.text1{
			font-size:60px;
		}
		.text2{
			font-size:50px;
		}
		.text3{
			font-size:30px;
		}
		.text4{
			font-size:60px;
		}
		.text5{
			font-size:12px;
		}
		#presentation{
			padding-left:50px;
			padding-right:50px;
		}
		#contact{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			padding-left:0px;
			padding-right:0px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:50px;
			padding-right:50px;
			text-align:right;
		}
		#bottom_logo_svg{
			width:300px;
		}
		#webmaster{
			padding-left:50px;
			padding-right:50px;
		}
	}
	@media screen and (min-width: 700px) and (max-width: 1200px) {
		#top{
			padding-left:50px;
			padding-right:50px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:450px;
		}
		.text1{
			font-size:60px; 
		}
		.text2{
			font-size:50px;
		}
		.text3{
			font-size:50px;
		}
		.text4{
			font-size:60px;
		}
		.text5{
			font-size:12px;
		}
		#presentation{
			padding-left:50px;
			padding-right:50px;
		}
		#contact{
			padding-left:50px;
			padding-right:50px;
		}
		#bottom{
			padding-left:0px;
			padding-right:0px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:50px;
			padding-right:50px;
			text-align:right;
		}
		#bottom_logo_svg{
			width:450px;
		}
		#webmaster{
			padding-left:50px;
			padding-right:50px;
		}		
	}
	@media screen and (min-width: 1200px) {
		#top{
			padding-left:300px;
			padding-right:300px;
		}
		#top_logo{
			padding-top:20px;
		}
		#top_logo_svg{
			width:400px;
		}
		.text1{
			font-size:35px;
		}
		.text2{
			font-size:30px;
		}
		.text3{
			font-size:30px;
		}
		.text4{
			font-size:45px;
		}
		.text5{
			font-size:15px;
		}
		#presentation{
			padding-left:300px;
			padding-right:300px;
		}
		#contact{
			padding-left:300px;
			padding-right:300px;
		}
		#bottom{
			padding-left:0px;
			padding-right:0px;
		}
		#bottom_logo{
			padding-top:20px;
			padding-bottom:50px;
			padding-left:300px;
			padding-right:300px;
			text-align:right;
		}
		#bottom_logo_svg{
			width:350px;
		}
		#webmaster{
			padding-left:300px;
			padding-right:300px;
		}		
	}