body{
	margin: 0;
  padding: 0; overflow-X:hidden; overflow-Y:hidden; background-color: grey; 
  }
 
.leftgif{float: left; position: absolute; margin: -5%; padding: 5%;width:50%; font-size:300%; }
.rightpng{float: right; position: relative; margin: 0; padding: 0;width:50%;}
.rightpng:hover{background-image: url(logos.gif);position: relative; filter: sepia(100%);width:800%; transition: all 5s;}
.rightpng:active{ background-image: url(jeuplateau.gif); transition: all 5s; background-size:100%; background-repeat:no-repeat; background-attachment: fixed; }
.demo{font-family: 'vt323'; text-align: left; font-size:150%;}
.demo2{font-family: 'vt323'; text-align: right; font-size:150%;}
.ancretableau{
		float: none;
		text-align: left;
		width: 25%; height: 10%;
		text-transform:uppercase;
		position: fixed;
		right: 5%;
		bottom: 25px;
		border:5px groove;
		border-radius:30px;
		font-size: 15px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom; grey, teal, white);
		overflow:hidden;
		z-index:2;
		}
.ancretableau:active {border:2px ridge;
					border-radius:400px;
					}
}
.tableau{font-family: 'VT323', monospace;}					
h4{
	font-size: 50px;
	color: black;
	font-style: italic;
	font-family: 'Special Elite', cursive;
	font-weight: normal;
	text-shadow: 10px 10px 40px #00FF00;
	text-align: center;
	z-index: 3;
	}
@media screen and (max-width: 680px){
h4{font-family: 'Special Elite', cursive;}}
	
.lancement{ position: relative;opacity:0.1;width: 100%; transform: scaleY(0.2); border: 5px solid; border-radius:15px 50px;overflow:hidden;
	text-align: center; cursor: url(pointeurboule.png), auto;
	}
  .lancement p{color: red;}
  .lancement h2{transition; all 5s;}
  .lancement:hover{background-image:url("pointeurboule.png"); background-position: center;
  background-repeat: no-repeat;
  background-size: cover;opacity:0.5; filter: sepia(10%);color:#D8FAE1; width: 100%; transform: scaleY(1); transition: all 0.2s;}
  .frais:hover {position:relative; padding:150px;width:100%; height:100%; background-image:url("somm.gif"); background-position: center;
  background-repeat: no-repeat;border: 5px solid; border-radius:15px 50px;
  background-size: cover; box-shadow: 0px 70px 1500px 200px #036400;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#9aff99, Direction=180, Strength=15);transition:all 2s;}
  .chaud:hover{position:relative;padding:150px;width:100%; height:100%; background-image:url("arbresnbg.gif"); background-position: center;
  background-repeat: no-repeat;
  background-size: cover; box-shadow: 0px 70px 1500px 200px #9aff99;border: 5px solid; border-radius:15px 50px;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#9aff99, Direction=180, Strength=1500);transition:all 2s;}

  
.fichecolor{color: red;
}
.rouge{ color:#FF0000;}
.vert{ color: #00FF00;}
.bleu{ color: #0000FF;}
.aligng{
		text-align: left;
		text-transform:uppercase;
		text-decoration:overline;
		}
.alignd {
		text-align: right;
		text-transform:lowercase;
		text-decoration:underline;
		letter-spacing:-20px;
		}
.alignc {
		text-align: center;
		text-transform:capitalize;
		text-shadow: 10px 1px 40px #00FF00;
}
.boite{
		background-color: #69D6C5;
		padding: 0px;
		border: 2px solid #0C0;
}
		
@media screen and (max-width: 680px){
.boite{	margin: none;
		width: 100%;
		position: fixed;
		left: 0%;
		padding: 0px;
		border: none;
		border-top: 2px solid #0C0;
		bottom:0px;
		background:-webkit-linear-gradient(left, #D8FAE1, white, #D8FAE1);
		background:linear-gradient(to right, #D8FAE1, white, #D8FAE1);
		z-index:1;}
}
.boite2{
		background-color: #000000;
		padding: 0px;
		border: 2px solid #0C0;
		
}
.boite3{
		background-color: black;
		
		width: 50%;
		padding: 0px;
		margin: 0px;
		
		box-shadow:50px 50px 100px #C1FF33;
		position: relative; color: rgba(0, 0, 0, 0.5); overflow: hidden; opacity:0.9; transition: all 3s;
}

.boite3:hover{background-image:url(jeuplateau.gif);background-size:cover;opacity:0.9; transition: all 3s;}

.boite3bis{
		background-image:url(logos.gif);background-size:cover;opacity:0.1; transition: all 3s; height: 400px; width: 50%;
		
		height: 400px; width: 80%; transform: translateY(-40%);
		padding: 0px;
		margin: 0px;
		
		box-shadow:50px 50px 100px #C1FF33;
		position: relative; color: rgba(0, 0, 0, 0.5); overflow: hidden; opacity:1; transition: all 3s;
}
.boite3bis:hover{background-image:url(logos.gif);background-size:cover;opacity:0.9; transform: translateY(-70%); transition: all 3s; height: 700px; width: 100%;
}
.boite3bis:active{background-image:url(logos.gif);background-size:cover;opacity:0.9; transition: all 3s; height: 400px; width: 40%;}

.boxinbox2{
			position: absolute;
			bottom: 10px; right: 10px;
			background-color:#00FFFF;
			width: 50%;
			border-width: 2px;
			border-style: dashed;
			border-color:green;
			box-shadow:14px 13px 57px #8DC1CD inset;	
}

.boite6{
		background-color: #ffffff;
		width: 100%; height: 80px;
		padding: 5px;
		border: 2px solid #F00;
		margin: 0px auto;
		float: left;
		overflow: scroll;
				}
.boiteimput{
		background-color: #000000;
		padding: 10px;
		border: 10px solid #0C0;
		margin: 0px;
}	
@media screen and (max-width: 680px){
.boiteimput{
		background-color: #000000;
		padding: 0px;
		border: 10px solid #0C0;
		margin: 0px;
}}
.boiteimput2{
		background-color: #FFFFFF;
		font-color: black;
		width: 800px;
		padding: 10px;
		border: 10px solid #0C0;
		margin: 0px;
		clear: left;
		font-family: 'Special Elite', cursive;
}	
@media screen and (max-width: 680px){
.boiteimput2{
		color: black;
		background-color: #FFFFFF;
		padding: 0px;
		border: 10px solid #0C0;
		margin: 0px;
		
}}		

#section1{
		background-color:  #c0b888;
		padding: 10px;
		margin: 20px 0px;
}
#section2{
		background-color: rgba(40, 170, 200, 0.6);
		padding: 10px;
		margin: 20px 0px;
}
#section1:hover, #section2:hover{box-shadow:0px 0px 5px #444;}
legend{font-weight:bold;text-transform:uppercase;font-size:18px;color:#444;}

#section1: input{width:300px; height:20px}
#section2: input{width:20px; height:20px}
#section1 label{display: inline-block; width :200px; padding: 10px 0px 15px 40px;}
#section2 label{display: inline-block; width :100px; padding: 5px 0px 15px 10px;}	
input[type="submit"]{float:inline-start;padding 10px; width: 100%; font-size:150px; color:#fff;
background: linear-gradient(to right, #D8FAE1,#FE6921, teal);font-weight:bold;text-transform:uppercase;border-radius:5px;}
input[type="submit"]:hover{box-shadow: 0px 0px 4px #555; background: #e8ab2e;}

@media screen and (max-width: 680px){
.boiteimput2{ width: 100%; padding: 0px;
		border: 1px solid #0F0;
		margin: 0px; }
		input[type="submit"]{float:inline-start;padding 10px; width: 100%; height: 100px; font-size:200%; color:#fff;
}}

td{ border: 1px solid black;padding: 10px; }
table{border: 1px solid red; text-align:center;}	
td:hover{	background-color: lime;border-radius: 10%;}
tr:nth-child(even){background-color:#45B418}	
tr:nth-child(odd){background-color:green}	
th.comm{width: 25%;border: 1px dashed grey;padding: 5px;font-style:oblique;font-weight:200;}
td.comm{text-align: left;}
td.comm:hover{background-color:black;color:#D8FAE1;font-style:oblique; text-align: left;}
tfoot th{
		font-family: 'Permanent Marker', cursive;
		font-weight: normal;
		text-shadow: 10px 1px 40px #00FF00;
		background-color: #EDFF0C;
		text-align: center;
		}
@media screen and (max-width: 680px){
	td{width: 25%; border: 1px solid black;padding: 1px; }
table{border: 1px solid red; text-align:center;}	
td:hover{	background-color: lime;border-radius: 10%;}
tr:nth-child(even){background-color:#45B418}	
tr:nth-child(odd){background-color:green}	
th.comm{width: 20%; border: 1px dashed grey;padding: 1px;font-style:oblique;font-weight:20;}
td.comm{text-align: left;}
td.comm:hover{background-color:black;color:#D8FAE1;font-style:oblique; text-align: left;}
tfoot th{
		width: 100%
		font-family: 'Permanent Marker', cursive;
		font-weight: normal;
		text-shadow: 10px 1px 40px #00FF00;
		background-color: #EDFF0C;
		text-align: center;
}}
	
p.maj::first-letter{font-size:30px;color: #A02;}
p.maj::-moz-selection{background-color:orange;}
p.maj::selection{background-color:orange;}
.maj{ clear: both; font-size: 100%; width: 25%;height: 75px; background: linear-gradient(90deg,lime 0%, #D8FAE1 40%);
}
.ancreporte{z-index:1; text-align: center; border:5px groove;
		border-radius:50px;
		font-size: 300%; width: 100px;height: 100px;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: repeating-linear-gradient(-45deg, black, white 5px, black 5px, white 10px);
		
		overflow:hidden;font-size: 150%; left: 47%; transition: width 1s, height 1s, background-color 10s, border-radius 1s, transform 1s; position: absolute;}
.ancreporte:hover{ background-color:black; transform: translateX(0px) rotate(2880deg) translateY(0px);
		border-radius:2000px;
		background: repeating-linear-gradient(90deg, black, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        red 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, black 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, black 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, black 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, black, black 5px,
        lime 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, black, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
		font-size: 100%;
		text-align:center;
		transition: all 10s;}
@media screen and (max-width: 680px){ 
.ancreporte{z-index:1; text-align: center; border:5px groove;
		border-radius:50px;
		font-size: 300%; width: 100px;height: 100px;
		background: repeating-linear-gradient(-45deg, black, white 5px, black 5px, white 10px);
		overflow:hidden;font-size: 150%; left: 40%; position: absolute;}
.ancreporte:hover{ background-color:none; transform: translateX(0px) rotate(2880deg) translateY(0px);
		border-radius:2000px;
		font-size: 100%;
		background: repeating-linear-gradient(90deg, , transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        red 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        lime 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
		text-align:center;
transition: all 1s;}}
.ancresecret{z-index:4; border:15px groove; text-decoration: none; color: white
		border-radius:5px;
		font-size: 25px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, black, white);
		background: linear-gradient(to bottom, grey, black, white);
		overflow:hidden;font-size: 150%; margin: auto; right: 0%; position: absolute;}
.ancresecret:hover{ background-color:black;
		border-radius:2000px;
		font-size: 120%;
		transition: all 1s;}

@media screen and (max-width: 680px){ 
.ancresecret{z-index:4; text-align: center; border:5px groove;
		border-radius:500px; width: 150px; height: 100px; margin-right: -75px; right: 50%;
		font-size: 200px;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom, grey, teal, white);
		overflow:hidden;font-size: 50%; position: absolute;}
.ancresecret:hover{ background-color:black; transform: translateX(1px) rotate(100deg) translateY(1px);
		border-radius:2000px;
		font-size: 50%;
		text-align:center;
		transition: all 1s;}
.ancresecret{z-index:1; text-align: center;
		border-radius:500px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        white,
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
		overflow:hidden;font-size: 50%; position: absolute; transition: width 1s, height 1s, background-color 1s, border-radius 1s, transform 1s;}
.ancresecret:hover{ width: 100px; height: 150px;background-color:black; transform: translateX(1px) rotate3d(0, 1, 0.5, 3.142rad) translateY(1px);
		border-radius:2000px;
		font-size: 10%;
		margin-right: -50px; right: 50%;
		text-align:center;
		transition: all 1s;}
}
.element2 {
	margin-left: 0%; border: 2px solid black; text-align:center;
	width: 50px;
	height: 45px;
	
	background: #ff0000;
	margin: auto 20px;
	cursor: pointer; transition: all 1s;
	}
	.element {
	margin-left: 0%; border: 2px solid black; text-align:center;
	width: 50px;
	height: 45px;
	display: inline-block;
	background: #ff0000;
	margin: auto 20px;
	cursor: pointer; transition: all 1s;
	}
	.fusi{display: block;
    margin-left: auto;
    margin-right: auto; transform: translateY(27%);transition: all 3s;}
	.fusion:hover{transform:translateY(25%); transition: all 3s;}
.fusion{display: block; opacity: 0;
    margin-left: 0%;
    transition: all 3s;
	margin-bottom:0%;
background: url(robot3.gif);}
	
	.boite3:hover .drapeau2{ transition: all 3s; width:7%; height:6%; opacity: 0;}
	.boite3:hover .fusion{ transition: all 1s; width:70%; height:600%; opacity: 0;}
	
.transition-width {	
    /* Syntaxe standard */
    transition-property: width, background;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s; transition: all 1s;
    
    /* Hack Safari */
    -webkit-transition-property: width, background;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;    
}
.transition9 { width: 100%; height: 40%; text-align: center; transition: all 5s;}
.transition9:hover{width:50%; height: 50%; font-size: 500%; transition: all 5s;}
.transition-width:hover {
	width: 5%;
	background: #8500ff; transition: all 1s;
}
#rouge{background-image: url("color400.jpg");background-position:-300px 200px;}
#vert{background-image: url("color400.jpg");background-position:-100px -100px;left: 125px;}
#bleu{background-image: url("color400.jpg");background-position:-200px 0px;left: 180px;}
.transition{width: 200px;height: 200px; text-align: center;background-color: red;transition: all 5s, width 2s, background-color 5s;}
.transition:hover{margin-left: 60%; width:30%;height: 200px; background-color:blue;}
<br>
.transition2{width: 200px;height: 200px; text-align: center;background-color: red; transition:width 2s;}
.transition2{width: 200px;height: 200px; transition:background-color 5s;text-align: center;}
.transition2:hover{width:200px;height: 200px; background-color:blue;}

<br>
.transition3{float: right;text-align: center;transition:width 2s;}
.transition3{width: 200px;height: 200px; transition: width 5s, background-color 15s, border-radius 5s, transform 5s;text-align: center;}
.transition3:hover{ background-color:yellow; transform: translateX(500px) rotate(6000deg) translateY(5px) scale(2,2);
		border-radius:2000px;
		font-size: 200%;
		text-align:center;
		transition: all 10s;}
.transition4{text-align: center;transition:width 2s;}
.transition4{width: 300px;height: 300px; border-radius:200px;transition: width 5s, background-color 10s, border-radius 5s, transform 5s;text-align: center;}
.transition4:hover{ background-color:black; transform: translateX(5px) rotate(10000deg) translateY(15px);
		border-radius:2000px;
		font-size: 120%;
		text-align:center;
		transition: all 10s;}
		
.transition5{text-align: center;transition:width 2s;}
.transition5{ transition: width 5s, background-color 10s, border-radius 5s, transform 5s;text-align: center;}
.transition5:hover{ width: 300%;  background-color:none; transform: translateX(5px) skew(45deg,45deg) translateY(15px);
		
		transition: all 10s;}
a:link 
{ 
text-decoration:none; 
}