@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: linear-gradient(
        217deg,
        rgb(47 18 88 / 100%),
        rgb(79 43 211 /100%) 70.71%
      ),
      linear-gradient(127deg, rgb(47 18 88 / 50%), rgb(79 43 211 / 100%) 70.71%),
      linear-gradient(336deg, rgb(152 66 255 / 100%), rgb(47 18 88 / 100%) 70.71%),
      linear-gradient(260deg, rgb(47 18 88 / 50%), rgb(79 43 211 / 100%) 70.71%),
      linear-gradient(336deg, rgb(152 66 255 / 100%), rgb(47 18 88 / 100%) 70.71%);
  }
  

header {
   background-color: rgba(255, 255, 255, 0.10);
   border-radius: 66px;
   border: 1px solid rgba(255, 255, 255, 0.40);
   height: 82px;
   width: 800px;
   margin : 30px auto;
   padding: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
}

header nav ul {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-family: 'Audiowide';
    color : #90FFF9;
}

header nav ul li {
    list-style-type: none;
    padding: 10px;
}

 nav ul li a {
    text-decoration: none;
    color:#90FFF9;
    position: relative;
} 

nav ul li a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px; 
    border-radius : 10px;
    background: linear-gradient(135deg, #90FFF9, #9842FF);
    transition: width 0.5s ease-in-out;
  
  }

  nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; 
    height: 5px;
    border-radius : 10px;
    background: linear-gradient(135deg, #90FFF9, #9842FF);
    transition: width 0.5s ease-in-out;
}

#nom {
    font-size: 48px;
}

.deepfake {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40); 
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 800px;
    margin : 30px auto;
    padding: 30px;
    height: 400px;
}

.presentation h2{
    font-size: 66px;
    font-family: 'Audiowide';
    padding: 15px;
}

#violet{
    color:white;
}

.presentation p{
    color:#90FFF9;
    font-family: 'Audiowide';
    font-size: 40px;
    padding: 15px;
}

.presentationdeux{
    padding: 15px;
}

.presentationdeux p{
    font-family: 'Poppins';
    color:white;
    font-size : 15px;
}

.video{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin-bottom : 100px;
}

.videobis{
    max-width: 800px;
    margin: auto;
}

.videobis h3 {
    font-family: 'Poppins';
    color:#9842FF;
    text-align: left;
    width: 800px;
    margin-top : 30px;
}

.videobis p{
    font-family: 'Poppins';
    color:white;
    font-weight: 200;
    padding: 15px;
    width: 800px;
    text-align: left;
}

#titre {
    font-size: 45px;
    margin: 0;
    position: relative;
    color :#90FFF9;
}


#titre:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px; 
    border-radius : 10px;
    background: linear-gradient(135deg, #90FFF9, #9842FF);
    transition: width 0.5s ease-in-out;
  
  }

  #titre::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; 
    height: 5px;
    border-radius : 10px;
    background: linear-gradient(135deg, #90FFF9, #9842FF);
    transition: width 0.5s ease-in-out;
}
    


#vid{
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);  
    width: 800px;
    height: 400px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#vid video {
    padding: 10px;
    width: 600px;
    height: 400px;
    border-radius: 20px;
}

video {
    border-radius: 20px; 
}

#vid:hover{
    border:  1px solid #90FFF9;
    box-shadow :  0 0 2em #90FFF9;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1);
    transition: 1.2s ease;
}

#solutiondeux{
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    height: 30px;
    width: 800px;
    margin : 30px auto;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#solutiondeux h2{
    font-family: 'Poppins';
    color : #90FFF9 ;
    padding : 10px;
    margin : 10px;
}

.solution {
    font-family: 'Poppins';
    color : white;
    font-weight : 200;
}

.video, .videobis {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
  }
  
  .video.visible, .videobis.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .cursor {
    width: 20px;
    height: 20px;
    background-color: rgb(144 255 249 / 0.50);
    border-radius: 50%;
    position: absolute;
    pointer-events: none; /* Le curseur ne doit pas interférer avec d'autres éléments */
    transition: transform 0.7s ease;
}

.conversation {
    display: flex;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 600px; /* Optional: prevents the conversation from stretching too wide */
    width: 100%;
    padding: 20px;
    margin : 20px;
}
.conversation p {
    font-family: 'Poppins';
    font-size : 12px;
    color : white;
    font-weight: 200;
    padding: 15px;
}

.reaction {
    display: flex;
    gap: 15px; /* Adds space between like and comment buttons */
    justify-content: center;
}

#like, #comment {
    font-family: 'Poppins';
    display: flex;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    align-items: center;
    justify-content: center;
}

#like {
    width: 103px ;
    height : 52px;
    gap : 15px;
}


#comment {
    width : 211px;
    height: 48px;
    gap : 8px;
}

#like, #comment p {
    font-size: 14px;
    color: white;
    font-weight: 200; 
}

 #comment svg {
    padding : 20px;
}

hr {
    width: 100%;
    color: white;
}

.form input  {
    font-family: 'Poppins';
    display: flex;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    width: 450px;
    height: 40px;
    padding: 10px;
    margin : 10px;
}

.form svg {
    padding: 10px;
    margin : 10px;
}

#reponse{
    display: flex;
    align-content: center;    
}

#personnes {
    display: flex;
    align-items: center;
}

.blur {
    filter: blur(4px);
}

#bouton {
    display: flex;
} 

.communaute {
    z-index: 10; 
    box-sizing: border-box; 
    position: absolute; 
    left: 20%;
    top: 20%;
    background: rgba(255, 255, 255, 0.19);
    opacity: 0.64;
    border: 3px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(153.8px);
    border-radius: 138px;   
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 800px;
    height: 280px;
}

.communaute h3 {
    font-family: 'Poppins';
    color: white;
    margin-bottom: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.communaute p {
    font-family: 'Poppins';
    font-size: 12px;
    font-weight: 500;
    color: white;
    padding: 10px;

}

.communaute button {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 66px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    padding: 10px 20px;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

.communaute button:hover {
    background-color: rgba(255, 255, 255, 0.20);
}

.communaute button a {
    font-family: 'Poppins';
    text-decoration: none;
    color: white;
}

footer {
    display: flex;
    justify-content: space-between;
}

footer h4 {
    font-family: 'Audiowide';
    color: #90FFF9;
    padding: 10px;
}

footer p {
    font-family: 'Poppins';
    color: white;
    padding: 10px;
}
@media only screen and (max-width: 600px) {

    header{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        
    }
    nav ul {
        display: flex;
        flex-direction: column;
     }

     h3{
        font-size: 1px;
        display: flex;
        justify-content: center;
        align-items: center; 
     }

    .deepfake, #solutiondeux {
        display: flex;
        flex-direction: column;
        height: auto;
        width: auto;
  }

   #solutiondeux h2 {
       display: flex;
       justify-content: center;
       align-items: center;
       font-size : 16px;
  }

    .deepfake h2, p {
        font-size: 30px;
    }  

    .videobis,#vid{
        height: auto;
        width: auto;
    }
    
    .videobis p {
        font-size: 10px;
        width: auto;
    }

    #vid{
        border-radius: 7px;;
    }
    

  }