projet-style.css

body{
     margin: 0px;
     box-sizing: border-box;
     background-color: black;
     color: rgb(255, 255, 255);
     font-family: Arial, Helvetica, sans-serif;
     height: 100%;
     width: 100%;
}

.navbar-container{
     display: flex;
     padding-top: 10px;
     justify-content: center;
     width: 100%;
     position: sticky;
     top: 0px;
}

.navbar{
     justify-content: center;
     justify-content: space-around;
     display: flex;
     align-items: center;
     height: 50px;
     border-radius: 50px;
     background-color: #ffffff;
     opacity: 0.7;
     width: 700px;
}

.navbar a{
     text-decoration: none;
     color: #000000;
     padding: 10px;
     border-radius: 50px;
     margin-left: 10px;
     margin-right: 10px;
}

.navbar a:hover{
     background-color: rgb(0, 0, 0);
     color: #ffffff;
     opacity: 0.4;
}

.hyve-logo{
     width: 80px;
     height: auto;
     margin-left: 10px;
     margin-right: 10px;
}

.footer{
     background-image: url(img/degrade-bleu.png);
     background-size: 100%;
     margin-top: 200px;
     padding: 50px; 
}

.first-footer-div{
     display: flex;
     justify-content: center;
     justify-content: space-around;
}

.second-footer-div{
     display: flex;
     justify-content: center;
     margin: 20px;
}

.social{
     width: 200px;
     display: flex;
     flex-wrap: wrap;
}

.social-icon{
     width: 40px;
     margin: 10px;
}

.social-icon-threads{
     width: 30px;
     margin: 10px;
}

.nav-link{
     text-decoration: none;
     color: white;
}

.nav-link:hover{
     color: gray;
}

.liste{
     margin: 10px;
}

.big-logo-container{
     display: flex;
     justify-content: center;
     margin: 30px;
}

.big-logo{
     width: 500px;
     margin-top: 50px;
}

.section-container{
     margin: 75px 50px 75px 50px;
     display: flex;
}

.paragraph-container{
     width: 50%;
}

.paragraph-title{
     color: #3533cd;
}

.paragraph-content{
     font-size: large;
     text-align: justify;
     line-height: 35px;
}

.first-video{
     width: 500px;
     height: auto;
     border-radius: 15px;
     margin-left: 50px;
     margin-top: 30px;
}

.video-container{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     width: 50%;
}

.second-video{
     width: 500px;
     height: auto;
     border-radius: 15px;
     margin-right: 50px;
     margin-top: 100px;
}

.third-video{
     width: 500px;
     height: auto;
     margin-right: 50px;
}

.fourth-video{
     width: 500px;
     height: auto;
     border-radius: 15px;
     margin-left: 50px;
     margin-top: 125px;
}

.responsive-second-video{
     display: none;
}

.responsive-third-video{
     display: none;
}

@media  (max-width: 1024px){
     .navbar{
          margin-top: 20px;
     }

     .first-video{
          margin-top: 100px;
     }

     .section-container{
          margin: 50px 30px 50px 30px;
     }

     .second-video{
          width:450px ;
          height: 300px;
          margin: 0px;
          margin-top: 100px;
     }
     
     .third-video{
          width:450px ;
          height: 300px;
          margin: 0px;
     }

     .fourth-video{
          margin-top: 250px;
     }
}

.toggle-sidebar {
     display: none;
}

.sidebar {
     position: fixed;
     top: 0;
     left: -250px;
     width: 250px;
     height: 100%;
     background-color: rgba(0, 0, 0, 1);
     z-index: 1;
     color: #ffffff;
     padding-top: 60px;
     transition: left 0.3s ease-in-out;
}

.sidebar img.hyve-logo {
     display: block;
     margin: 0 auto 20px;
     width: 80%;
}

.sidebar a {
     padding: 10px 15px;
     text-decoration: none;
     font-size: 18px;
     color: white;
     display: block;
}


.close-btn {
     position: absolute;
     top: 10px;
     right: 25px;
}

.open-btn {
     background-color: rgba(255, 255, 255, 0);
     display: none;
     margin: 0px;
     margin-left: 20px;
     padding-top: 20px;
}



@media  (max-width :900px){
     .section-container{
          flex-wrap: wrap;
          justify-content: center;        
     }

     .paragraph-container{
          width: 500px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
     }

     .paragraph-title{
          font-size: xx-large;
     }


     .first-video{
          margin: 0px;
          margin-top: 50px;
     }

     .video-container{
          display: none;
     }

     .responsive-second-video{
          display: block;
          width: 450px;
          height: 300px;
          margin: 10px;
          margin-left: 20px;
     }

     .responsive-third-video{
          display: block;
          width: 450px;
          height: 300px;
          margin: 10px;
     }

     .fourth-video{
          margin:0px ;
          margin-top: 20px ;
     }

     .big-logo-container{
          margin-bottom: 0px;
     }

     .paragraph-content{
          font-size: x-large;
     }
}

@media  (max-width:450px){
     .navbar-container{
          display: none;
     }

     .open-btn {
          display: block;
     }

     .sidebar {
          left: -250px;
     }

     .big-logo-container{
          margin: 0px;
     }

     .big-logo{
          width: 400px;
     }

     .paragraph-content{
          width: 350px;
     }

     .paragraph-title{
          font-size: x-large;
     }

     .section-container{
          margin: 0px 10px 25px 10px ;
     }

     .first-video{
          width: 400px;
          height: 200px;
          margin: 0px;
     }

     .responsive-second-video{
          width: 350px;
          height: 200px;
          margin: 0px;
     }

     .responsive-third-video{
          width: 350px;
          height: 200px;
          margin: 0px;
     }

     .fourth-video{
          width: 350px;
          height: 200px;
          margin: 0px;
     }

     .footer{
          margin-top: 100px;
     }

     .first-footer-div{
          display: block;
          margin-left: 30px;
     }

     .paragraph-content{
          font-size: larger;
     }
}

@media  (max-width:400px){
     .paragraph-content{
          width: 300px;
          font-size: small;
     }

     .big-logo{
          width: 300px;
     }

     .first-video{
          width: 350px;
          height: 150px;
          margin: 0px;
     }

     .responsive-second-video{
          width: 300px;
          height: 150px;
          margin: 0px;
     }

     .responsive-third-video{
          width: 300px;
          height: 200px;
          margin: 0px;
     }

     .fourth-video{
          width: 300px;
          height: 150px;
          margin: 0px;
     }

     .paragraph-content{
          font-size: larger;
     }
}

@media  (max-width:350px){
     .big-logo{
          width: 300px;
          margin-top: 0px;
     }

     .paragraph-content{
          font-size: smaller;
     }

     .first-video{
          width: 300px;
          height: 200px;
          margin: 0px;
     }

     .responsive-second-video{
          width: 300px;
          height: 200px;
          margin: 0px;
     }

     .responsive-third-video{
          width: 300px;
          height: 200px;
          margin: 0px;
     }

     .fourth-video{
          width: 300px;
          height: 200px;
          margin: 0px;
     }

     .paragraph-content{
          font-size: larger;
     }
}