* {
font-weight: normal;
text-decoration: none;
margin: 0;
padding: 0;
border: 1px solid red;
border:0;
}
html {
background: #a14458;
}
body {
position: absolute;
height: 90%;
width: 100%;
text-align: center;
color: #301d39;
font-size: 100%;
line-height: 1;
font-family: Arial, Helvetica, Sans-Serif;
padding-top:5%;
background: radial-gradient(80% -10%, farthest-corner,#15e5e7 0%,#bb3c60 50%, black 100%);
background: -webkit-radial-gradient(80% -10%, farthest-corner,#15e5e7 0%,#bb3c60 50%, black 100%);
background: -moz-radial-gradient(80% -10%, farthest-corner,#15e5e7 0%,#bb3c60 50%, black 100%);
}
audio {
position: fixed;
top: 0;
right: 0;
} 
div#carte {
position: relative;
width: 20%;
height: 91%;
border: 1px solid red;
border:0;
position: relative;
margin: 0 auto;
background: #2d1b31 url(../img/fond.png) center top no-repeat;
background-size:cover;
box-shadow: 0px 0px 20px #bb3c60;
animation:animation1 5s 1;
-moz-animation:animation1 5s 1;
-webkit-animation:animation1 5s 1;
}
img#pangolin,img#pangolin2,img#soleil,img#soleil2 {
box-shadow: 0px 0px 5px #a4715b;
}
div#carte a:hover img{
box-shadow: 0px 0px 5px #551b2c;
}
img#pangolin {
position: absolute;
top: 50%;
right: -55%;
width: 64%;
margin-top: 13%;
animation:animation2 10s ease-in 1;
-webkit-animation:animation2 10s ease-in 1;
-moz-animation:animation2 10s ease-in 1;
}
img#pangolin2 {
position: absolute;
top: 53%;
left: -98%;
width: 107.5%;
margin-top: 10%;
animation:animation3 15s ease-in 1;
-webkit-animation:animation3 15s ease-in 1;
-moz-animation:animation3 15s ease-in 1;
}
img#soleil {
position: absolute;
width: 103.8%;
bottom: 49%;
right: -100%;
animation:animation4 20s ease-in 1;
-webkit-animation:animation4 20s ease-in 1;
-moz-animation:animation4 20s ease-in 1;
}
img#soleil2 {
position: absolute;
width: 75.4%;
bottom: 45%;
left: -67%;
animation:animation5 25s ease-in 1;
-webkit-animation:animation5 25s ease-in 1;
-moz-animation:animation5 25s ease-in 1;
}
img#papillon {
position: absolute;
left: 50%;
margin-top: -18px;
margin-left: -70px;
animation:animation7 40s ease-out 1;
-webkit-animation:animation7 40s ease-out 1;
-moz-animation:animation7 40s ease-out 1;
}
a#signature {
min-height: 9%;
line-height: 1.4em;
font-size: 1em;
text-align: left;
display: block;
color: #454e4e;
background: white;
position: relative;
overflow: auto;
right: 0;
padding: 0 1em;
box-shadow: 0px 0px 20px #a4715b;
text-shadow: 1px 1px 2px #ccc;
transition:box-shadow 1.5s;
-webkit-transition:box-shadow 1.5s;
-moz-transition:box-shadow 1.5s;
animation:animation6 30s 1;
-webkit-animation:animation6 30s 1;
-moz-animation:animation6 30s 1;
}
a#signature:hover {
color: #bb3c60;
box-shadow: 0px 0px 20px #551b2c;
}
a#signature img{
width: 12em;
margin: 0.3em 1em 0 0;
vertical-align: middle;
}
@keyframes animation1
{
0%	{transform: rotateY(90deg)}
20%	{transform: rotateY(90deg)}
100%	{transform: rotateY(0)}
}
@-webkit-keyframes animation1
{
0%	{-webkit-transform: rotateY(90deg)}
20%	{-webkit-transform: rotateY(90deg)}
100%	{-webkit-transform: rotateY(0)}
}
@-moz-keyframes animation1
{
0%	{-moz-transform: rotateY(90deg)}
20%	{-moz-transform: rotateY(90deg)}
100%	{-moz-transform: rotateY(0)}
}
@keyframes animation2
{
0%	{width: 0;opacity:0;transform-origin:-30% 50%;transform: rotate(-45deg)}
60%	{width: 0;opacity:0;transform-origin:-30% 50%;transform: rotate(-45deg)}
100%	{width: 64%;opacity:1;transform-origin:-30% 50%;transform: rotate(0)}
}
@-webkit-keyframes animation2
{
0%	{width: 0;opacity:0;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(-45deg)}
60%	{width: 0;opacity:0;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(-45deg)}
100%	{width: 64%;opacity:1;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(0)}
}
@-moz-keyframes animation2
{
0%	{width: 0;opacity:0;-moz-transform-origin:-30% 50%;-moz-transform: rotate(-45deg)}
60%	{width: 0;opacity:0;-moz-transform-origin:-30% 50%;-moz-transform: rotate(-45deg)}
100%	{width: 64%;opacity:1;-moz-transform-origin:-30% 50%;-moz-transform: rotate(0)}
}
@keyframes animation3
{
0%	{width: 0;opacity:0;transform-origin:130% 50%;transform: rotate(45deg)}
73.33%	{width: 0;opacity:0;transform-origin:130% 50%;transform: rotate(45deg)}
100%	{width: 107.5%;opacity:1;transform-origin:130% 50%;transform: rotate(0)}
}
@-webkit-keyframes animation3
{
0%	{width: 0;opacity:0;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(45deg)}
73.33%	{width: 0;opacity:0;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(45deg)}
100%	{width: 107.5%;opacity:1;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(0)}
}
@-moz-keyframes animation3
{
0%	{width: 0;opacity:0;-moz-transform-origin:130% 50%;-moz-transform: rotate(45deg)}
73.33%	{width: 0;opacity:0;-moz-transform-origin:130% 50%;-moz-transform: rotate(45deg)}
100%	{width: 107.5%;opacity:1;-moz-transform-origin:130% 50%;-moz-transform: rotate(0)}
}
@keyframes animation4
{
0%	{width: 0;opacity:0;transform-origin:-30% 50%;transform: rotate(-45deg)}
80%	{width: 0;opacity:0;transform-origin:-30% 50%;transform: rotate(-45deg)}
100%	{width: 103.8%;opacity:1;transform-origin:-30% 50%;transform: rotate(0)}
}
@-webkit-keyframes animation4
{
0%	{width: 0;opacity:0;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(-45deg)}
80%	{width: 0;opacity:0;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(-45deg)}
100%	{width: 103.8%;opacity:1;-webkit-transform-origin:-30% 50%;-webkit-transform: rotate(0)}
}
@-moz-keyframes animation4
{
0%	{width: 0;opacity:0;-moz-transform-origin:-30% 50%;-moz-transform: rotate(-45deg)}
80%	{width: 0;opacity:0;-moz-transform-origin:-30% 50%;-moz-transform: rotate(-45deg)}
100%	{width: 103.8%;opacity:1;-moz-transform-origin:-30% 50%;-moz-transform: rotate(0)}
}
@keyframes animation5
{
0%	{width: 0;opacity:0;transform-origin:130% 50%;transform: rotate(45deg)}
84%	{width: 0;opacity:0;transform-origin:130% 50%;transform: rotate(45deg)}
100%	{width: 75.4%;opacity:1;transform-origin:130% 50%;transform: rotate(0)}
}
@-webkit-keyframes animation5
{
0%	{width: 0;opacity:0;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(45deg)}
84%	{width: 0;opacity:0;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(45deg)}
100%	{width: 75.4%;opacity:1;-webkit-transform-origin:130% 50%;-webkit-transform: rotate(0)}
}
@-moz-keyframes animation5
{
0%	{width: 0;opacity:0;-moz-transform-origin:130% 50%;-moz-transform: rotate(45deg)}
84%	{width: 0;opacity:0;-moz-transform-origin:130% 50%;-moz-transform: rotate(45deg)}
100%	{width: 75.4%;opacity:1;-moz-transform-origin:130% 50%;-moz-transform: rotate(0)}
}
@keyframes animation6
{
0%	{height:0;min-height:0;}
86.66%	{min-height:0;}
100%	{height:0;min-height:9%;}
}
@-webkit-keyframes animation6
{
0%	{height:0;min-height:0;}
86.66%	{min-height:0;}
100%	{height:0;min-height:9%;}
}
@-moz-keyframes animation6
{
0%	{height:0;min-height:0;}
86.66%	{min-height:0;}
100%	{height:0;min-height:9%;}
}
@keyframes animation7
{
0%	{opacity:0}
92.5%	{opacity:0}
100%	{opacity:1}
}
@-webkit-keyframes animation7
{
0%	{opacity:0}
92.5%	{opacity:0}
100%	{opacity:1}
}
@-moz-keyframes animation7
{
0%	{opacity:0}
92.5%	{opacity:0}
100%	{opacity:1}
}