CSSHistoire.css

/*OUDJMAN ET MARCIAUX*/

/* BODY */
.Chefs {
  font-size: 250%;
  text-align: center;
    -webkit-text-stroke-width: 0.13rem;
    -webkit-text-stroke-color: black;
    color: #C78805;
    margin-top: 12%;
}

.Boutons{
	margin: auto;
	width: 20%;
}

.Bouton{
	text-decoration: none;
	color: #C78805 ;
	border: 1px solid lightpink;
	font-size: 120%;
}

.Marquee {
	direction: right;
	height: 10%;
	border-top: black 2px solid ;
	border-bottom: 2px solid black;
}	

.bouton{
color: #ff6347; /* couleur du texte */
cursor:pointer; /* apparence du curseur */
display: inline-block; /* autorise les marges sur un élément "a" */
border: solid 1px #ff6347; /* applique une bordure rouge */
padding: 5px; /* espace entre la bordure et le texte */
}

.Main .right img{
	height: 200px;
	width: 250px;
}

.Main{
	margin: auto;
	width: 40%;
	background-color: white;
}

.right{
	float: right;
}

.content{
	margin: auto;
	background-color: pink;
	width: 40%;
}

.content2 {
	margin: auto;
	width: 75%;
}

.Machine{
	font-family: cochin ;
	background-color: lightpink;
}

.Cursive{
	font-family: cursive;
}

.Chefs2 {
	font-size: 250%;
	text-align: left;
    -webkit-text-stroke-width: 0.13rem;
    -webkit-text-stroke-color: black;
    color: #C78805;
}

.TexteOuvertureChefs{
	font-family: cursive;
	font-size: 150%;
	height: 20%;
	text-align: center;
	color: #C78805;
}

.TailleTexteOuvertureChefs{
	height: 450px;
}

.PetitTexteOuvertureChefs{
	text-align: justify;
	width: 60%;
	color: #C78805;
}

.Slider {
	width: 100%;
	overflow: hidden;
	margin-right: 7%;
}

.Slides {
	width: calc(100% * 12);
	animation: glisse 30s infinite;
}

.Slide {
	float: left;
}

.Photo {
	width: 180px;
}

fieldset {
	width: 33%;
}

.EcritureChefs {
	font-family: monospace;
	text-align: justify;
	font-size: 120%;
}

.BackgroundClair{
	background: url('PhotoCSS/BackgroundClair.png');
	background-size: cover;
}

@keyframes glisse {
	0% {
		transform: translateX(0);
	}
	8% {
		transform: translateX(0);
	}
	15% {
		transform: translateX(-180px );
	}
	23% {
		transform: translateX(-180px );
	}
	31% {
		transform: translateX(-360px);
	}
	38% {
		transform: translateX(-360px);
	}
	46% {
		transform: translateX(-540px);
	}
	54% {
		transform: translateX(-540px);
	}
	62% {
		transform: translateX(-720px);
	}
	69% {
		transform: translateX(-720px);
	}
	77% {
		transform: translateX(-900px);
	}
	85% {
		transform: translateX(-900px);
	}
	92% {
		transform: translateX(0);
	}

}