html{
    scroll-behavior: smooth;
}

li {
    display: inline-block;
    padding: 30px;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 10px;
    font-weight: 100;
    margin-top: 25px;
}
li:hover{
    background-color: #212120;
    border-radius: 20px;
    transform: scale(1.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

ul {
    list-style-type: none;
    margin-right: 100px;
    padding: 0px;
    margin-top: 40px;
    text-align: right;
    padding-right: 100px;
}

body {
    background-color: black;
    color: #997B00;
    font-family: 'Times New Roman', Times, serif;
}

.idx {
    float: inline-start;
    margin-top: 0%;
    padding-left: 250px;
}

.banner {
    width: 60%;
    padding-left: 8%;
}

.p1 {
    font-size: 20px;
    margin-right: 200px;
    padding-left: 200px;
    line-height: 50px;
}

.selected {
    background-color: #212222;
    border-radius: 20px;
}

a {
    text-decoration: none;
    color: #997B00;
}

a:hover {
    text-decoration: none;
    color: #2D0101;
    text-shadow: 0 0 7px white; 
    transition: color 0.2s ease, box-shadow 0.3s ease;
}

.contact {
    padding: 0px;
    margin: 50px;
    font-size: 70px;
    color: darkred;
}

.pContact {
    font-size: 25px;
    text-align: center;
    margin-left: 350px;
}

#imgIn {
    border-radius: 50%;
    float: right;
    border: goldenrod;
    border-style: groove;
    margin-right: 50px;
}

.indexH2 {
    padding-left: 70px;
    font-size: 70px;
    padding-top: 30px;
    font-weight: 50;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.p11 {
    text-align: left;
    font-size: 25px;
    margin-left: 70px;
    font-family: 'Comic Sans MS';
    line-height: 65px;
    font-style: normal;
}

.imgCon{
    float: left;
    margin-left: -300px;
    margin-top: 150px;
    border-style: groove;
    border-color: #997B00;
    border-radius: 50%;
}

footer{
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
    
}
.test123 {
    line-height: 40px;
}

#idx1 {
    color: rgb(238, 238, 238);
}

#idx1:hover {
    color: #EF5350FF;
}

#idx2 {
    color: rgb(221, 221, 221);
}

#idx2:hover {
    color: #F44336FF;
}

#idx3 {
    color: rgb(204, 204, 204);
}

#idx3:hover {
    color: #E53935FF;
}

#idx4 {
    color: rgb(187, 187, 187);
}

#idx4:hover {
    color: #D32F2FFF;
}

#idx5 {
    color: rgb(156, 155, 155);
}

#idx5:hover {
    color: #C62828FF;
}

.txt1 {
    color: rgb(238, 238, 238);
}

.txt2 {
    color: rgb(221, 221, 221);
}

.txt3 {
    color: rgb(204, 204, 204);
}

.txt4 {
    color: rgb(187, 187, 187);
}

.txt5 {
    color: rgb(156, 155, 155);
}

#txtadjust{
    margin-left: 100px;
    margin-right: 150px;
    font-size: 22px;
    text-align: justify;
    margin-top: 60px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.quote{
    font-size: 15px;
    text-align: right;
}
#img2 {
    float: right;
}

#title-anim {
    text-align: center;
    font-size: 30px;
    padding-top: 40px;
    font-family: 'Comic Sans MS';
}

#title-anim1{
    text-align: center;
    font-size: 20px;
    padding-top: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.test13514 {
    color: #4ef2f2;
}

.test13515 {
    color: #2df0f0;
}

.test13516 {
    color: #10e9e9;
}

.test13517 {
    color: #2df0f0;
}

.test13518 {
    color: #4ef2f2;
}

.p2 {
    color: rgb(221, 221, 221);
    font-size: 20px;
    margin-right: 500px;
    margin-left: 100px;
    margin-top: 50px;
    line-height: 50px;
    font-family: Arial, Helvetica, sans-serif;
}

.imgbio1 {
    float: right;
    border-color: goldenrod;
    margin-right: 50px;
    border-style: groove;
    border-radius: 50%;
}

.h2bio1 {
    margin-left: 150px;
    color: #5D3FD3;
    margin-top: 100px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 25px;
}

.h3bio1{
    margin-left: 150px;
    color: goldenrod;
    margin-top: 30px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 22px;
}
span {
    font-style: italic;
}

.imgbio2 {
    float: left;
    margin-left: 70px;
    margin-right: 100px;
    margin-top: 36px;
    border-color: goldenrod;
    border-style: groove;
}

#p2-1 {
    margin-right: 100px;
}

.link1 {
    text-decoration: underline;
    font-style: italic;
    color: rgb(221, 221, 221);
}

.imgbio3 {
    float: right;
    margin-right: 200px;
    border-style: groove;
    border-color: goldenrod;

}
.imgbio4, .imgbio5{
    border-color: goldenrod;
    border-style: groove;
    margin-top: 50px;
    float:none;
}
.imgbio5{
    
    display: inline-block;
}

audio{
    margin-left: 150px;
    margin-top: 20px;
    color: red;
}
.linkL{
    color: rgb(187, 187, 187);
}
.h1{
    color: goldenrod;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
}
video{
    display:inline-block;
    margin-left: 150px;
    border-color: goldenrod;
    border-style: groove;
    margin-top: 50px;
}
.sous-menu{
    display: none;
    position: absolute;
    top: 100%; 
    list-style-type: none; 
    margin: 5px 0px 0px -420px;
    padding: 0px;
    background: black;
    border-radius: 10px;
    border-style: groove;
    border-color: white;
}
.sous-menu li{
    font-size: 15px;
    border-radius:20px ;
    margin-right:  0px;
    margin-top: -20px;
    margin-bottom: -10px;
    text-align: left;
}
.sous-menu li:hover{
    font-size: 15px;
    border-radius:20px ;
    margin-right:  0px;
    border-style: groove;
    border-color: #997B00;
}
li:hover .sous-menu{
    display: flex;
    transition: box-shadow 1s ease, background 1s ease;
}
#accordion1 div, #accordion2 div, #accordion3 div{
    background: #333;
    transition: background 1s ease;
    width: 599px;
    text-align: start;
    margin-left: 20%;
}
#accordion1 h3, #accordion2 h3, #accordion3 h3{
    width: 650px;
    background-color: #333;
    color: white;
    margin-left: 20%;
}
img:not(.banner):hover{
    transform: scale(1.05);
    border-color: goldenrod;
    transition: transform 0.2s ease, box-shadow 2s ease;
}
.modele {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease; 
}

.modele img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); 
    display: block;
}
.backToTop{
    width: 5%;
}