* {
    font-family:Arial;
}

.centre {
    text-align: center;
}

h2 {
    color:red;
    text-shadow: 2px 2px 0 black;
}

#banniere {
    position:relative;
    display:flex;
    justify-content: space-around;
    align-items: center;
    color: red;
    text-shadow: 2px 2px 0px black;
    background-image: url(Image/banniere.jpg);
    background-repeat: repeat;
}

#banniere::before {
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index:0;
    pointer-events: none;
}
#banniere h1{
    position:relative;
    z-index: 1;
}

.menu{
    position: relative;
    z-index: 1;
}

#button1 {
    border:none;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    cursor: pointer;
    font-size: 32px;
    margin: 16px 8px;
    color:black;
    text-shadow: 2px 2px 0px red;
    border-radius: 5px;
}

#affichage {
    display: none;
    position: absolute;
    top: 100%;
    left:50%;
    transform: translateX(-50%);
    flex-direction: column;
    font-size:20px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    padding: 10px;
    border-radius: 5px;
}

#affichage a {
    display:block;
    color:red;
    text-align: center;
    text-shadow: 2px 2px 0 black;
    text-decoration: none;
    margin: 5px 0;
}

#affichage.visible {
    display: flex;
}

.paragraphe {
    display: flex;
    justify-content: space-around;
    background-color: slateblue;
}

#intern {
    display: flex;
    text-align: center;
    flex-direction: column;
    border: 2px solid black;
    border-radius: 5px;
    padding: 3px;
    color: white;
}

#terligne {
    background-image: url(Image/1inter.jpg);
    background-size: contain;
}

#entreligne {
    background-image: url(Image/2inter.jpg);
    background-size: contain;
}

#videos {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: black;
    padding:20px;
}

#jeux {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px
}

#jeux img{
    border-radius: 10px;
}

.premuscle {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: Indigo;
    color:white;
}

.prepretre {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: darkolivegreen;
    color:white;
}

.predame {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: darkred;
    color:white;
}

.prebot {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: Gray;
    color:white;
}

.prelapin {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: black;
    color:white;
}

#reverse {
    transform: scaleX(-1);
}

.preame {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: hotpink;
    color:white;
}

.pregardien {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    color:white;
    background-color: #d2b202;
}

.predoigt {
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    background-color: royalblue;
    color:white;
}

#cercle {
    border: 3px solid red;
    border-radius: 5px;
    padding: 3px;
}

#un {
    background-image: url(Image/1.jpg);
    background-size: contain;
}

#deux {
    background-image: url(Image/2.jpg);
    background-size: contain;
}

#trois {
    background-image: url(Image/3.jpg);
    background-size: contain;
}

#quatre {
    background-image: url(Image/4.jpg);
    background-size: contain;
}

#cinq {
    background-image: url(Image/5.jpg);
    background-size: contain;
}

#six {
    background-image: url(Image/6.jpg);
    background-size: contain;
}

#sept {
    background-image: url(Image/7.jpg);
    background-size: contain;
}

#huit {
    background-image: url(Image/8.jpg);
    background-size: contain;
}