@charset "utf-8";

/*

    ## #####  ##     ##
    ## ##  ## #### ####
    ## #####  ## ### ## --- CSS Document
##  ## ##  ## ##  #  ##
  ##   #####  ##     ##     JB Simon MARTINEZ © 2021 - jb-martinez.net
 

							--> conception Mobile First : du Mobile vert les grands écrans
*/


/* ***************************************************************************************************
		0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ]
****************************************************************************************************** */

* { /* --- Désigner tous les éléments d'une page en même temps. */

}

html { 
  scroll-behavior: smooth; /* scroll souple */
}

:root { /* --- pseudo-classe, cible le document comme <html> mais sa spécificité sera plus forte */

	/*	--------------------------------------
	* 				  VARIABLES
	*	-------------------------------------- */
	
	/*-- Couleurs --*/
	--color-1 :# ;
	--color-2 :# ;
	--color-3 :# ;
	--color-4 :# ;
	--color-5 :# ;
}


body { /* --- Désigner le contenue de la page html */
	font-family: 'Roboto', sans-serif; /*-- Police google font --*/
}


/* ***************************************************************************************************
		1 - BOOTSTRAP : AMORCER ==> [ col-1, col-md-1, col-lg-1... ]
****************************************************************************************************** */


/* ***************************************************************************************************
		2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ]
****************************************************************************************************** */

/*-- Titre --*/
h1, h2, h3, h4, h5 {
	margin: 0;
}

/*-- Lien hypertexte --*/
a { 
	
}

a:hover {
	text-decoration:none;
}

button {
	
}

button:hover {
	
}

button:focus { /* Supprimer border de focus sur les bouton */
	outline-style:none;
}

/*-- images --*/

img {
	/* width: 100%; pour une gestion automatique des images callé sur la taille du bloque parent (figure, picture) */
	vertical-align: bottom;
}

/*-- Liste --*/
ul, ol {
	margin: 0;
	padding: 0;
}

li {
	list-style:none;
	margin-left:0;
	padding-left:0;	
}

/*-- Tableau --*/

table {
	
}

tr {
	
}

td {
	
}


/* ***************************************************************************************************
		3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ]
****************************************************************************************************** */

/* --- HEADER : ENTÊTE DE LA PAGE --- */
header {
	
}

/* --- NAV : MENU --- */
nav {
	
}

/* --- MAIN : CONTENUE DE LA PAGE --- */
main {

}

#washington {
	position: relative;
	width: 1200px;
}

 body {
	 background: #edf2f4;
	 perspective: 1000px;
	 transform-style: preserve-3d;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;	 
	 height: 100vh;
	 font-family: "Playfair Display", georgia, serif;
}
 .card {
	 pointer-events: none;
	 transform: translateZ(0);
	 padding: 30px;
	 background: white;
	 border-radius: 5px;
	 width: 1000px;
	 height: 900px;
	 margin: auto;
	 transform-style: preserve-3d;
	 backface-visibility: hidden;
	 display: flex;
	 box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	 position: relative;
}

 .card .card-content {
	 position:relative;
	 margin: auto;
	 text-align: center;
	 transform-style: preserve-3d;
}
.card .card-content div:nth-child(1) {
	background-color: #dfe2c7;
}

.card .card-content div:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0px);
	filter: drop-shadow(5px 5px 4px #4444dd);
}

.card .card-content div:nth-child(3) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(20px);
	opacity: 0.5;
}

.card .card-content div:nth-child(4) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(40px);
	filter: drop-shadow(5px 5px 10px #4444dd);
}

.card .card-content div:nth-child(5) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(60px);
}

.card .card-content div:nth-child(6) {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(60px);
}