@import url('https://fonts.googleapis.com/css?family=Notable|Oswald');


.cls-6:hover, .cls-3:hover{
    fill: blue;
}
.cls-6, .cls-3{
    transition: fill 3s ease-out;
}



#PetalleH,#PetalleB,#PetalleBD,#PetalleBG,#PetalleHD,#PetalleHG, #SortieBleu:hover{
    transition: transform 3s ease-out;
}

#PetalleH:hover{
    transform: translateY(-5%);
}
#PetalleB:hover{
    transform: translateY(+5%);
}
#PetalleHD:hover{
    transform: translateY(-2.5%) translateX(+2.5%);
}
#PetalleHG:hover, #SortieBleu:hover{
    transform: translateY(-2.5%) translateX(-2.5%);
}
#PetalleBD:hover{
    transform: translateY(+2.5%) translateX(+2.5%);
}
#PetalleBG:hover {
    transform: translateY(+2.5%) translateX(-2.5%);
}



/*@keyframes tourne {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(0deg) ;
    }
}
*/

/*.bulbe{
    animation: tourne 5s infinite;
}
*/



@keyframes peta {
    0%{
        transform: scale(0);
    }
    30%{
        transform: scale(0);
    }
    55%{
        transform: scale(1);
    }
}

/*
#Petalles:hover{
     animation:tourne 5s;
 }
 */
#Petalles{
    transform-origin: 180px 70px;
    animation: peta 20s ;
}


@keyframes bul {
    0%{
        transform: scale(0);
    }
    20%{
        transform: scale(1);
    }
}

#BulbeOrange {
    transform-origin: 150px 50px;
    animation: bul 20s
}



@keyframes Noy {
    0%{
        transform:scale(0);
    }
    25%{
        transform: scale(0);
    }
    35%{
        transform:scale(1);
    }

}

#Noyau {
    transform-origin: 180px 70px;
    animation: Noy 20s;
}



#Tige{
    stroke-dasharray: 1400;
    stroke-dashoffset: 0;
    -webkit-animation: dash 20s linear backwards;
    -o-animation: dash 20s linear backwards;
    animation: dash 20s linear backwards;
}

@-webkit-keyframes dash {
    0%{
        stroke-dashoffset: 1400;
    }
    25%{
        stroke-dashoffset: 2800;
    }
    100%{
        stroke-dashoffset: 2800;
    }
}


#Tige2{
    stroke-dasharray: 1400;
    stroke-dashoffset: 0;
    -webkit-animation: Tige 20s linear backwards;
    -o-animation: Tige 20s linear backwards;
    animation: Tige 20s linear backwards;
}
@-webkit-keyframes Tige{
    0%{
        stroke-dashoffset: 1400;
    }
    45%{
        stroke-dashoffset: 2800;
    }
    100%{
        stroke-dashoffset: 2800;
    }
}

#Tige3{
    stroke-dasharray: 1400;
    stroke-dashoffset: 0;
    -webkit-animation: TigeBis 20s linear backwards;
    -o-animation: TigeBis 20s linear backwards;
    animation: TigeBis 20s linear backwards;
}

@-webkit-keyframes TigeBis{
    0%{
        stroke-dashoffset: 1400;
    }
    65%{
        stroke-dashoffset: 2800;
    }
    100%{
        stroke-dashoffset: 2800;
    }
}

@keyframes Feuil{
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(0);
    }
    70%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
    }
}
#FeuilleOrange{
    transform-origin: 210px 200px;
    animation: Feuil 20s;
}

@keyframes Grain {
    0%{
        transform: scale(0);
    }
    55%{
        transform: scale(0);
    }
    100%{
        transform:scale(1);
    }
}
#GraineTige2 {
    transform-origin: 39% 60%;
    animation: Grain 20s;
}


@keyframes feuillette {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(0);
    }
    100%{
        transform:scale(1);
    }
}


#FeuillesTige2{
    transform-origin: 40% 60%;
    animation: feuillette 20s;
}

@keyframes bleu {
    0%{
        transform: scale(0);
    }
    65%{
        transform: scale(0);
    }
    100%{
        transform:scale(1);
    }
}

.clsSup{
    animation: bleu 20s;
    transform-origin: 78% 53%;

}

@keyframes tourne {
    from{
        transform:rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
#FeuillesBleu{
    animation: tourne 10s infinite;
    transform-origin: 77% 53%;
}
@keyframes origine {
    0%{
        transform: scale(0);
    }
    43%{
        transform: scale(0);
    }
    100%{
        transform:scale(1);
    }
}
#OrigineBleu{
    animation: origine 20s;
    transform-origin: 25% 45%;
}

@keyframes sortie {
    0%{
        transform: scale(0);
    }
    55%{
        transform: scale(0);
    }
    100%{
        transform:scale(1);
    }
}
#SortieBleu{
    animation:sortie 20s;
    transform-origin:25% 45%;
}

/*@keyframes fin1 {
	0%{
		transform: translateY(0) translateX(0);
		transform: scale(1);
		opacity: 1;
	}
	80%{
		transform: translateY(0) translateX(0);
		transform: scale(1);
		opacity: 1;
	}
	99%{
		transform: scale(1);
	}
	100%{
		transform: translateY(-100%) translateX(-50%);
		opacity: 0;
		transform: scale(0);
	}
}

#part1 , #part2, #part3{
	animation: fin 20s;
	transform-origin: 150px 50px;
	
} */

body{
	background-color: #1B1438;
	display: flex;
}



.titre{
	color: #F0EF03;
	padding-left: 3%;
}

#titre1{
	font-family: 'Oswald', sans-serif;
}
#titre2{
	font-family: 'Notable', sans-serif;
}





input#un-mute {
  display: none;
}

.unmute img {
  display: none;
}

input#un-mute:checked ~ .unmute img {
  display: initial;
}

input#un-mute:checked ~ .mute img {
  display: none;
}