/*  Author  : Perroud Gaël

    Date    : 17.05.2021

    Descr.  : Css style  */



/* les titres (h1, h2 ...) */

.titre

{

	text-align: center;

	color: #000000;

	font-size: 80px;

	font-family: arial;

}



.titre

{

	text-align: center;

	color: #000000;

	font-size: 60px;

	font-family: arial;

}



/* Image */

.image

{

	border-radius: 15px;

	display: block;

	margin-left: auto;

	margin-right: auto;

}



/* affichage de l'heure */

.heure

{

	

}

.boutonCenter{
	display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bas de page */

.basdepage

{

	width: 100%;

    padding-bottom: 25px;

    background: black;

    color: white;

    font-weight: bold;

    font-size: 18px;

    position: fixed;

    left: 0;

    bottom: 0;

    text-align: center;

}



/* boutonannimé */



.boutonannimé {

  border-radius: 4px;

  background-color: #000000;

  border: none;

  color: #ffffff;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 300px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}



.boutonannimé span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}



.boutonannimé span:after {

  content: '\00bb';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}



.boutonannimé:hover span {

  padding-right: 25px;

}



.boutonannimé:hover span:after {

  opacity: 1;

  right: 0;

}



 /* Texte */

p

{

	font-family: arial;

	text-align: center;

	margin-left: 20%;

	margin-right: 20%;

	font-size: 20px;

	color: #000000;

}

/* "Corps" de la page */

body

{

	height: 90vh;

	background: linear-gradient(-45deg, #C418E6, #1847E6, #18E631, #F1A63A);

	background-size: 400% 400%;

	-webkit-animation: Gradient 15s ease infinite;

	-moz-animation: Gradient 15s ease infinite;

	animation: Gradient 15s ease infinite;

	text-align: center;

}



/* Code pris sur internet (https://codepen.io/P1N2O/pen/pyBNzX)

Permet à l'animation de background */

@-webkit-keyframes Gradient {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}



@-moz-keyframes Gradient {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}



@keyframes Gradient {

	0% {

		background-position: 0% 50%

	}

	50% {

		background-position: 100% 50%

	}

	100% {

		background-position: 0% 50%

	}

}