body{
  background-color:rgb(184, 198, 224);
  text-align: center;
}

#carte{
    width: 761px;
    height: 700px;
    border: 1px solid #000;
    background-image: url('chainedespuys-neige.jpeg');
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#bonne{
    position: absolute;
    top:7%;
    left:50%;
    transform: translateX(-50%);
    font-size: 3.2rem;
    background-color:beige;
    opacity: 0.7;
    color: rgba(127,0,0,1);
    border-radius: 8px;
    width:0;
    padding:0;
    margin:0;
    overflow: hidden;
    transition: width 3s ease-in-out 2s, padding 3s ease-in-out 2s;
    white-space: nowrap;
}

.hover #bonne{
  width: 350px;
  padding: 8px;
}




#annee{
    position:absolute;
    top: 28%;
    left: 58%;
    font-size: 6rem;
    background-color: rgba(252, 194, 0, 0.7);
    padding: 15px;
    border-radius: 8px;
    color: rgba(127,0,0,1);
    height: 0;
    padding:0;
    margin:0;
    overflow:hidden;
    transition: height 2s linear 6s, padding 2s linear 6s;
}

.hover #annee{
  height: 110px;
  padding: 15px;
}

#flocon{
    position:absolute;
    top:7%;
    left: 50%;
    transform: translateX(-50%);

    content: '';
    background-image: url('flocon.png');
    background-color: rgba(214, 238, 241, 0.8);
    background-repeat: space;
    background-position: center;
    width: 75px;
    height: 75px;
    padding:0;
    margin:0;
    border-radius: 5px;
    z-index: 30;
    -webkit-animation: 6s ease-in-out 2s floconanim forwards;
    animation: 6s ease-in-out 2s floconanim forwards;
}

@keyframes floconanim{
  50%{
    transform: translateX(240px);
  }
  100%{
    transform: translate(240px, 260px);
  }
}


#signature{
    position:absolute;
    left: 6%;
    bottom: 50px;
    font-size: 2.5rem;
    color: rgb(17, 59, 245);
    padding:10px;
    background-color: rgb(245, 242, 237);
    opacity: 0;
    scale:0.8;
    border-radius: 8px;
    transition: opacity 2s ease 8s, scale 2s ease 8s;
}

.hover #signature{
  scale:1;
  opacity: 0.8;
}




.snowflakes {
	width: 100%;
  height: 100%;
	position: absolute; 
  
 
}


i, i:after, i:before { background: white; }
i {
	display: inline-block;
	/* -webkit-animation: snowflakes 10s linear 10s 20;
	-moz-animation: snowflakes 10s linear 10s 20; */
  animation: 3s linear 9s snowflakes;
	position: relative;
  visibility:hidden;
}
i:after, i:before {
	height: 100%;
	width: 100%;
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
  transform: rotate(120deg);
}
i:before { transform: rotate(240deg); }

@keyframes snowflakes {
	0% {
    visibility: visible;
    transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
	}
	100% {
    visibility: visible;
    transform: translate3d(15px, 630px, 0px) rotate(360deg) scale(0.6);
	};
}

.snowflakes i:nth-child(3n) {
	width: 16px; height: 4px;
	animation-duration: 4s;
	animation-iteration-count: 30;
	transform-origin: right -45px;
}

.snowflakes i:nth-child(3n+1) {
	width: 24px; height: 6px;
	animation-duration: 6s;
	animation-iteration-count: 45;
	transform-origin: right -30px;
}

.snowflakes i:nth-child(3n+2) {
	width: 32px; height: 8px;
	animation-duration: 8s;
	animation-iteration-count: 60;
	transform-origin: right -15px;
}
	
/* different delays so they don't all start at the same time */
.snowflakes i:nth-child(7n) {
  opacity:.3;
  animation-delay: 9s;
  animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+1) {
  opacity:.4;
  animation-delay: 10s;
  animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+2) {
  opacity:.5;
  animation-delay: 10.5s;
  animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+3) {
  opacity:.6;
  animation-delay: 11s;
  animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+4) {
  opacity:.7;
  animation-delay: 11.5s;
  animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+5) {
  opacity:.8;
  animation-delay: 12s;
  animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+6) {
  opacity:.9;
  animation-delay: 12.5s;
  animation-timing-function:ease-in;
}