body {background-color:rgb(236, 43, 43);
font-family: Arial, Helvetica, sans-serif;}
#divbalisetotal
{width: 900px;
margin:auto;}
header{text-align: center;
size: 500px;}
p
{
color: silver;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size: 22px;
}

h1{color:rgb(245, 240, 240);background-color: rgb(223, 23, 23);text-align: center;



}

.introductionverte {color: rgb(242, 234, 234);}

footer {background-color: grey;
text-align: center;


color: rgb(244, 239, 239);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: large;
border-radius: 25px;}

ol{
    text-align: center;
    background-color: silver;
    padding: 15px 20px 15px 20px;
    border-radius: 25px;
    
}
li
{display: inline;
    background-color: silver;

padding: 15px 20px 15px 20px;
;
}
a {color: goldenrod;
text-decoration: none;}
a:hover
{color:goldenrod;
    

}

section
{ padding-top: 20px;
     padding-bottom: 40px; 
     background-color: silver; 
     border-radius: 20px;
   overflow: hidden; }
.divsection
{
    background-color: rgb(232, 18, 18);
    color: black;
    width: 50%;
    margin-left: 25px;
    
    border-radius: 10px 10px 0px 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    float:left;

}

aside {
    background-color: gold;
    border-radius: 10px;
   margin-left: 60%;
   margin-top: 20px;
    padding: 20px;
    margin-right: 50px;

}
.galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.galerie img {
    width: 220px;
    height: 150px;
    object-fit: cover;
    border: 2px solid #2f5d2f;
    border-radius: 8px;
    transition: transform 0.3s;
}

.galerie img:hover {
    transform: scale(1.05);
}
.diaporama {
    width: 500px;
    height: 350px;
    margin: 20px auto;
    overflow: hidden;
    border: 3px solid darkgreen;
    border-radius: 10px;
}

.slides {
    display: flex;
    animation: defilement 18s infinite;
}

.slides img {
    width: 500px;
    height: 350px;
    object-fit: contain;
    flex-shrink: 0;
    background-color: silver;
}

@keyframes defilement {
    0%,15%   {transform: translateX(0);}
    20%,35%  {transform: translateX(-500px);}
    40%,55%  {transform: translateX(-1000px);}
    60%,75%  {transform: translateX(-1500px);}
    80%,95%  {transform: translateX(-2000px);}
    100%     {transform: translateX(-2500px);}
}
#musicButton {
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
}