@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeLeft {
    0% {
		left: 50vw;
	}
	100% {
		left: 0;
	}
}

@keyframes fadeRight {
    0% {
		left: -500px;
	}
	100% {
		left: 0;
	}
}

@keyframes fadeTop {
    0% {
		top: -500px;
	}
	100% {
		top: 0;
	}
}

.fade-in-1 {
	opacity: 1;
    animation: fadeInOpacity 1s;
    animation-timing-function: ease-in;
}

.fade-in-2 {
	opacity: 1;
    animation: fadeInOpacity 2s;
    animation-timing-function: ease-in;
}

.fade-in-left-2 {
    top: 0;
	left: 0;
    position: relative;
    animation: fadeLeft 2s;
    animation-timing-function: ease-in;
}

.fade-in-left-3 {
    top: 0;
	left: 0;
    position: relative;
    animation: fadeLeft 3s;
    animation-timing-function: ease-in;
}

.fade-in-right {
    top: 0;
	left: 0;
    right: 0;
    position: relative;
    animation: fadeRight 1.5s;
    animation-timing-function: ease-in;
}

.fade-in-top {
    top: 0;
	left: 0;
    right: 0;
    position: relative;
    animation: fadeTop 1.5s;
    animation-timing-function: ease-in;
}

.color-d-internet {
    background: linear-gradient(135deg, rgb(25, 135, 84), rgb(255, 193, 7)); 
    color: white;
}

.color-vois-tout {
    background: linear-gradient(135deg, black, white); 
    color: white;
}

.color-another-bridge-in-the-wall {
    background: linear-gradient(45deg, white, black); 
    color: white;
}

.color-dieu-m-a-pardonné {
   background: linear-gradient(45deg, ghostwhite, skyblue); 
   color: black;
}

.color-le-futur {
   background: linear-gradient(0deg, hotpink, brown); 
   color: whitesmoke;
}

.color-la-joie {
   background: linear-gradient(135deg, black, white); 
   color: whitesmoke;
}

.color-toi { 
   background: linear-gradient(0deg, rgb(220, 53, 69), orangered); 
   color: whitesmoke; 
}

.color-don {
   background: linear-gradient(0deg, rgb(255, 196, 57), rgb(255, 196, 57));
   color: black;
}

.transform-smile {
    transform: rotate(90deg) translateX(2rem) translateY(-0.15rem);
}

@media (max-width: 991px) {
    .ps-titre-chanson {
        padding-left: 20%;
    }
}
@media (max-width: 768px) {
    .ps-titre-chanson {
        padding-left: 10%;
    }
}
@media (max-width: 575px) {
    .ps-titre-chanson {
        padding-left: 5%;
    }
}
@media (max-width: 440px) {
    .ps-titre-chanson {
        padding-left: 0;
    }
}