*{margin:0px; padding:0px; font-family:calibri; color:rgb(20,20,20);}

@font-face{font-family:'delicat'; src:url('charte/Lemon-Regular.ttf');}

body{margin:auto; background:url(charte/background.jpg) fixed; background-size:cover;}
	#mainblock, section, footer, hr{max-width:1000px; margin:auto;}

img{max-width:100%;}

a{text-decoration:none; transition:0.2s;}
	a:hover{color:deeppink; transition:0.2s;}
	
	h1, #transition p{font-family:delicat, calibri;}
	
	#bghead{background:darkslateblue; border-bottom:5px solid midnightblue; box-shadow:0px 2.5px 5px black; height:110px;}
	#sizehead{max-width:1000px; margin:auto;}
	
	header{display:inline-block; width:47.5%; font-weight:bold; background:url(charte/heartcouple.png) left no-repeat; background-size:contain;}
		header p:first-of-type{padding-left:95px; font-size:2.5em;}
		header p:nth-of-type(2){padding-left:95px; font-size:1.85em;}
			header p a{font-family:delicat, calibri; color:floralwhite;}

	nav{display:inline-block; width:47.5%; padding-top:25px; font-weight:bold; overflow:hidden; vertical-align:top;}
		nav input, nav label {display:none;}
		.caps{font-family:delicat, calibri; color:white}
		nav ul li{display:inline-block; width:25%; text-align:center; font-size:1.1em; font-family:delicat, calibri;  vertical-align:top; background:darkslateblue; color:floralwhite;}
			nav ul li ul{opacity:0; line-height:0em; padding-bottom:10px; transition:0.2s; }
			nav ul li ul li a, nav ul a{ color:rgb(220,220,220);}
			nav ul li:hover ul{opacity:1; line-height:1em; border-bottom:5px solid midnightblue; transition:0.35s;}
			nav ul li:hover ul li{margin:10px 0px;}
			 nav ul li ul li{display:block; width:100%; }
			
#transition{height:350px; background:url(img/.jpg) fixed center no-repeat; background-size:cover; }
	#transition p{text-align:center; font-weight:bold; font-size:1.8em; color:floralwhite; text-shadow:0px 1px 0px black, 0px -1px 0px black, 1px 1px 0px black, -1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black; position:relative; top:150px;}
	
	section{box-shadow:0px -2.5px 5px black, 0px 2.5px 5px black; font-size:1.15em; border-radius:10px 10px 0px 0px;}
		
		#mainblock{min-height:750px; padding-bottom:25px; background:whitesmoke; border-radius:10px 10px 0px 0px;}
		
		article{display:inline-block; padding:0px 25px; width:65%;}
			article h1{font-size:1.5em; padding:10px; background:darkslateblue; color:white; border-radius:0px 0px 10px 10px; margin-bottom:20px;}
			article h3{margin-bottom:0.5em;}
			article p{margin-bottom:10px; text-align:justify;}
			article p a{color:magenta; font-size:normal;}
			article ul{margin:1em 0em 1em 1em;}
			
		aside{display:inline-block; float:right; width:25%; margin:0px 10px; text-align:center;}
			aside div{display:block; vertical-align:top; min-height:240px; width:100%; border-radius:8px; overflow:hidden; margin:10px 0px; box-shadow:0px 2px 4px black;}
			aside div p{font-size:1.15em; color:white; text-shadow:0px 1px 1px black; background:rgba(75,50,50,0.5); padding:5px;}
			aside div span{color:white;}
			
			#a1{background:url(charte/icofuturlove.jpg) center; background-size:cover;}
			#a2{background:url(charte/icohardcouple.jpg) center; background-size:cover;}
			#a3{background:url(charte/icohoroscopeamour.jpg) center; background-size:cover;}
			#a4{background:url(img/chanteuse-yseult.jpg) center; background-size:cover;}

		footer{box-shadow:0px 2.5px 5px black; background:whitesmoke; text-align:center; margin-top:0px; padding:20px 0px;}
			footer a{font-weight:normal;}
		
		.imgd{float:right; margin-left:10px;}
		.imgg{float:left; margin-right:10px;}
		.imgc{display:block; margin:10px auto;}

#articles{display:flex; flex-wrap:wrap;}
	#articles div{width:48%; margin:1%;}

	@media screen and (max-width: 700px) 
	{	
	
		body{background:none;}
	
		#bghead{height:auto;}
		
		header{height:140px; width:100%;}
			header h1{padding:20px 0px 10px 0px; text-align:center;}
			header p{text-align:center; padding-left:0px;}
		
		#transition{height:150px; background:url(img/background.jpg); background-size:cover;}
			#transition p{top:50px; background-position:center; font-size:1.5em;}
		
		section{overflow:hidden; border-radius:0px;}
			#mainblock{border-radius:0px;}
		
		article{display:block; width:auto; min-height:auto; padding:0px 10px;}
			article h1{font-size:1.8em; padding:5px; text-align:center; margin-bottom:10px;}
			
		aside{display:block; float:none; width:auto;}
		aside div{width:95%; margin:0px auto 10px auto; border-radius:0px;}
			
		nav{width:100%; background:slateblue; padding-top:5px;}
			
			nav ul li {min-height:30px; display:block; width:100%;}
				nav ul li ul{line-height:0em; opacity:0;}
				nav ul li:hover ul{height:0px; font-size:0px; border-bottom:none;}
			
			nav input:not(:checked) ~ ul {max-height:0; overflow:hidden;}
				nav input:checked ~ ul {max-height:25em;}

			nav #li1 input:not(:checked) ~ ul {height:0px; transition:0.1s;}
			nav #li1 input:checked ~ ul {height:auto; font-size:1em;}
			nav #li2 input:not(:checked) ~ ul {height:0px;}
			nav #li2 input:checked ~ ul {height:auto; font-size:1em;}
			nav #li3 input:not(:checked) ~ ul {height:0px; transition:0.1s;}
			nav #li3 input:checked ~ ul {height:auto; font-size:1em;}
			
			nav label{display:block; position:static; padding:0px 0px 10px 0px; margin:auto; font-size:2em; font-weight:bold; text-align:center; color:white; transition:0.2s;}
			
			#li1 label, #li2 label, #li3 label{float:right; width:45px; height:30px; background:url("charte/arrow-down.png")no-repeat; background-size:contain; margin:-10px 35px 0px 0px;}
			
			nav ul li ul label {font-size:1.5em; transition:0.1s;}
			nav #li1 input:checked + label, nav #li2 input:checked + label, nav #li3 input:checked + label{background:url("charte/arrow-up.png") no-repeat; background-size:contain;}
				
				nav input:checked + label {-webkit-transform: scale(.9); transform: scale(.9); transition:0.1s;}

	}