@viewport {  width: device-width; zoom: 1; }
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Oswald|Patua+One&display=swap');

body { overflow-x : hidden; font-size:0; }
ol,ul {display:inline; list-style-type:none; margin:0; padding:0;}
a,summary { outline: none; text-decoration: none; color:black; cursor: pointer;}
p,li,text,td,th { font-family: 'Josefin Sans', sans-serif;}
h1,h2,h3,h4,h5,h6 { font-family: 'Patua One', cursive; margin:0; padding:0; }

div#outerContainer { margin:0; position: relative; z-index:1; clear: both; max-width:1000px; background-color: black; border: thick solid black;}
div#mainContainer { position: relative; }
header { position: relative; width:100%; height:0; padding-bottom:40% ; background: black url("../img/cover.jpg") no-repeat; background-position: bottom left; background-size:100% auto; border-bottom: thick solid black;}
header h1 { position: absolute; right:0; bottom:0;font-size: 400%; width: 40%; color:yellow; line-height: 115%; margin:0 2% 2% 0; text-align: right;}

ul#boxes { display: inline-flex; flex-flow: row-reverse wrap-reverse; justify-content: space-around; align-content: flex-end; flex-basis:100%; width:100%; max-width:1000px; height: auto;}
li.box,li.cal {  position: relative; margin: 5% 1% 5%;  color: white; flex-shrink:0; flex-grow:0; flex-basis:100%;}
li.box { flex:1;min-width:10rem; max-width:13rem; }
li.box img { float: left; width:100%; }
li.box div { position: absolute; top:30%; left:20%; text-align: center; width:59%; height:45%; }
p.nb { position: absolute; top:-55%;width:100%; text-align: center; color: #cccccc;}
p.prenom { font-size:110%;  font-weight: bold; text-transform:uppercase; margin-bottom:5%;}
p.age { font-size:90%; color: #888888; margin:0;}
p.ville {font-size:80%; color: #888888;margin:0;}

path { stroke:#ffffff; }
li.cal { flex-basis:100%!important; min-width:100%; height:5%; margin-bottom:2%;}
li.cal p { color: red; font-family: 'Patua One', cursive; font-size:400%; text-align: center; }

footer { display: block; margin-top:3rem; position: relative; width:100%; height:3rem; }
footer img { width:4rem; position: absolute; right:0; top:-1rem; max-height:4rem;}
footer a { text-decoration: underline dotted #dddddd; }
footer p { float: right; font-family: 'Oswald', sans-serif; text-align: right;  margin: 0 5rem 0 0 ; padding:0;}
footer p span { text-decoration: underline; }



/* MEDIA QUERIES */
/* Large desktop */
@media (min-width: 1000px) { 
	header,footer { font-size:1rem; }
	li.box,li.cal { font-size:1rem; }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) { 
	header,footer { font-size:0.8rem; }
	li.box,li.cal { font-size:0.9rem; }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) and (min-width:480px) { 
	header,footer { font-size:0.7rem; }
	header {padding-bottom:60% ;}
	header h1 { width:50%; }
	li.box,li.cal { font-size:0.8rem; }
}
 
/* Landscape phones and down */
@media (max-width: 480px) { 
	header,footer { font-size:0.7rem; }
	header {padding-bottom:60% ;}
	header h1 { width:100%; }
	li.box { font-size:0.8rem; }
	li.cal { font-size:0.7rem; }
}