/* -----------------------------ACCUEIL---------------------------------- */

.text-to-change {
    color: #000;
    text-decoration: none;
    text-decoration-line: underline;  
    text-decoration-color: red;  
    display: inline;
   }
   
   .text-changed {
    display: none;
    color: #000;
    text-decoration: none;
   }
   
   .text-to-change:hover {
    display: none;
   } 
   
   .text-to-change:hover ~ .text-changed {
    display: inline;
   }
   
   .text-to-change:after ~ .text-changed {
    display: inline;
   }

/* ------------------------Projects------------------------ */

/* ------------------------Button------------------------ */

@keyframes scale-up {
    from {
        transform: scaleY(1) scaleX(1);
        opacity: 0.5;
    }
    to {
        transform: scaleX(1.3) scaleY(2);
        opacity: 0;
    }
}

.Button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    color: #f8f8f8;
    border-radius: 40px;
    background-color: #000000;
    cursor: pointer;
    user-select: none;
}

.Button__text {
    position: relative;
    transition: ease-in-out 0.18s;
    z-index: 2;
}

.Button__icon {
    position: relative;
    transition: ease-in-out 0.18s;
    z-index: 2;
}

.Button:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    opacity: 0.5;
    border-radius: 40px;
    z-index: -1;
}

.Button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    z-index: 1;
    transition: ease-in-out 0.18s;
    transform-origin: center left;
    transform: scaleX(0);
    border-radius: 40px;
}

.Button:hover {
    color: #000000;
}

.Button:hover:after {
    transform-origin: center right;
    transform: scaleX(1);
    color: #f8f8f8;
}

.Button:hover .Button__icon {
    transform: translate3d(400%, 0px, 0px);
    opacity: 0;
    color: #000000;
}

.Button:hover .Button__text {
    transform: translate3d(12px, 0px, 0px);
    color: #000000;
}

.Button:active:hover {
    opacity: 0.8;
    transition: opacity ease-in-out 0.3s;
}

.Button.active:before {
    animation: scale-up 0.3s ease;
}



/* ------------------------ Button------------------------ */

/* ------------------------ Projects------------------------ */


/* ------------------------ Tutorials------------------------ */



/* ------------------------ Tutorials------------------------ */


/* ------------------------ presentations INDEX.PHP------------------------ */
.infos {
	font-size: 20px;
}

.presentation-logo {
    font-size: 20px;
}

/* ------------------------ presentations INDEX.PHP------------------------ */


/* ------------------------ counter INDEX.PHP------------------------ */

#counter {
    font-size: 1em;
}

/* ------------------------ counter INDEX.PHP------------------------ */

/* ------------------------ pause INDEX.PHP------------------------ */

.pause {
    font-size: 23px;
}

/* ------------------------ pause INDEX.PHP------------------------ */