@font-face {
    font-family: 'raleway';
    src: url(../font/PonyRides.ttf);
}

* {
    font-family: 'raleway';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(../img/wallpaper.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
h2 {
    font-size: 72px;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(190,169,44,1) 24%, rgba(36,29,253,1) 50%, rgba(49,253,213,1) 75%, rgba(252,176,69,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    width: 50%;
    margin: 0 auto;
  }
img {
    width: 100%;
    height: 100%;
}
h1{
    text-align: center;
    font-size: 3em;
}
h2{
    text-align: center;
    font-size: 3em;
}
.Flech {
    display: flex;
    position: relative;
    z-index: 10;
    margin: 0;
    top: 35vh;
    left: 15%;
    height: 20vh;
    width: 15%;
}

.FlechG {
    display: flex;
    position: relative;
}

.FlechD {
    display: flex;
    position: relative;
    left: 850px;
}
.Poney {
    width: 500px;
    height: 400px;
    margin-left:35%;
    overflow: hidden;
}

.Carrousel {
    display: inline-block;
    position: relative;
    margin:50px 0;
}
.Carrousel>div {
    display: inline-block;
    position: relative;
    width: 500px;
    height: 300px;
    margin: 0;
}
div[class^="Perso"] .Information {
    position: relative;
    height: 0px;
    transition: 1s ease;
    width: 100%;
    top: -42.5vh;
    color: white;
    background-color: rgba(49, 103, 231, 0);
    border-radius: 30px;
    overflow: hidden;
}
div[class^="Perso"]:hover .Information {
    height: 100%;
    background-color: rgba(49, 103, 231, 0.9);
}

/* .Information{
    position: relative;
    height: 100vh;
    width: 100%;
    top: -42.5vh;
    color: white;
    background-color: rgba(49, 103, 231, 0);
    border-radius: 30px;
} */

.Information>article>p{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.Information article h3{
    padding: 3vh 0;
    text-align: center;
}

.Information article p{
    padding: 0 2%;
}
.Grille{
    position: relative;
    left: 20%;
    text-align: start;
}
.Grille>p{
    display: flex;
    position: relative;
    margin: 5vh 0 0 -13%;
    gap:30px;
}

.Grille>div{
    display: flex;
    position: relative;
    margin-top: -3vh;
}
.Barre{
    width: 70%;
    height: 3vh;
    background-color: rgb(199, 195, 195,1);
    border-radius: 20px;
}

.Jauge{
    height: 3vh;
    z-index: 10;
    background: rgb(131,58,180,1);
    background: linear-gradient(90deg, rgb(104, 24, 158) 0%, rgb(233, 205, 47) 24%, rgba(36,29,253,1) 50%, rgba(49,253,213,1) 75%, rgb(241, 140, 0) 100%);
    border-radius: 20px;
}