.tableau{font-family: 'VT323', monospace;}	
html,body {
  font-family: 'VT323', sans-serif;
  padding: 1em 2em;
  font-size: 10px;
  background: #222;
  color: #FFF
}
a{
    text-decoration: none;/*Pour que le lien ne soit plus "souligné"...*/
    color: white; /*ça reste un exemple*/
}
h1,h2 {
  font-weight: 200;
  margin: 0.4em 0;
}
h1 { font-size: 3.5em; }
h2 {
  color: #888;
  font-size: 2em;
}
a{width: 100%; font-size:200%;}
body{text-align: center; overflow-X:hidden;overflow-Y:hidden;background:  radial-gradient(ellipse farthest-corner at 45px 45px , #f0f0f0 0%, rgba(255, 0, 255, 0) 40%, #000000 90%, #0000FF 95%,  #FFFFFF 98%),
repeating-radial-gradient(closest-side at 10px 158350px, lime 15%, white 20%, black 40%);}
.tableau{ text-align: center; color:grey; opacity: 0; filter : drop-shadow(0px 10px 0px #000) brightness(50%); font-size: 500px; padding: 10px; transition: all 2s;}
.tableau:hover{color: black; opacity: 1;padding: 10%; font-size: 200%; filter : drop-shadow(0px -35px 0px #ccc) ;transition: all 20s;
transition: all 5s;
}
.carre{ text-align: center;border:1px solid black;
		border-radius:0px; filter: blur(1px); width: 2%;
height: auto; transition: all 0.1s;}
.carre:hover{ border-radius:0px; filter: blur(0); transform: translateY(-25%); transition: all 15s; width: 100%;height: auto; transition: all 0.5s;}
.carre2{ width: 20px; height:20px;transition: all 1s;}
.carre2:hover{width: 200px; height:200px;transition: all 1s;}

@media screen and (max-width: 680px){
	.tableau{text-align: justify; color:black; opacity: 0;padding: 0px; transition: all 0.5s;}
.tableau:hover{color: black; opacity: 1;padding: 1%; font-size: 105%; width: 200%; transition: all 20s;
transition: all 5s;
}}

.carre2{ border:1px solid black;
		border-radius:50px;
		color: lime;
		text-align:center;
		transition: all 2s;
		}
.carre2:hover{ border-color: #333;
		transform: rotate(0deg);
		border-radius: 0%;
		}
		.light div {
	position: relative;
}
.book{text-decoration: none;color: black; opacity: 1;padding: 0; font-size: 100%;}