html{scroll-behavior: smooth;}

@font-face {
      font-family: 'black';
      src: url(../fonts/Poppins-Black.ttf);
}

@font-face {
      font-family: 'bold';
      src: url(../fonts/Poppins-Bold.ttf);
}

@font-face {
      font-family: 'medium';
      src: url(../fonts/Poppins-Medium.ttf);
}

@font-face {
      font-family: 'regular';
      src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
      font-family: 'light';
      src: url(../fonts/Poppins-Light.ttf);
}

body{
     margin: auto;
     width: 100%;
     height: auto;
     background-color: #0D1B2A;
}

header{
       height: 950px;
       width: 100%;
}

#videospline{
             width: 100%;
             height: 55%;
             z-index: -1;
             position: absolute;
             display: flex;
             justify-content: center;
             align-items: center;
}

nav{
    position: fixed;
    width: 100%;
}

.navlist{
    padding: 3px;
    background-color: #0D1B2A;
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 0;
    z-index: 1;
    height: 8vh;
    border-bottom: whitesmoke;
    border-bottom-style: none;
    border-style: solid;
}

nav a{
      color: white;
      font-size: 11px;
      text-decoration: none;
      font-family: 'light';
}

nav a:hover{
      color: #75b8ff;
      font-size: 11px;
      text-decoration: none;
      font-family: 'regular';
}

li{
   list-style: none;
}

#logoprincipal{
               display: flex;
               justify-content: center;
               flex-direction: column;
               padding-top: 8%;
               align-items: center;
}

#logoprincipal p{
                 color: white;
                 font-size: 12px;
                 font-family: 'regular'; 
                 margin-left: 11%;
}

#logoprincipal img{
               width: 20%;
}

#titles{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        align-items: baseline;
        position: relative;
        top: 24%;
        margin-inline: 29%;
        width: 69%;
}

h1{
   color: white;
   font-size: 16px;
   margin-left: 30%;
   font-family: 'light';
}

h2{
   color: #75b8ff;
   font-size: 30px;
   margin: 14%;
   font-family: 'light';
   margin-top: 21%;
}

header button{
              font-size: 20px;
              width: 17%;
              font-family: 'medium';
              cursor: pointer;
              padding: 13px;
              background-color: whitesmoke;
              color: #0D1B2A;
              border-style: none;
}

header button:hover{
              font-size: 20px;
              width: 17%;
              font-family: 'medium';
              cursor: pointer;
              padding: 13px;
              background-color: #75b8ff;
              color: whitesmoke;
              border-style: none;
}

span{
      color: #75b8ff ;
      font-family: 'medium';
      font-size: 40px;
}

#about{
       display: flex;
       align-items: center;
       height: 108vh;
       justify-content: center;
       flex-direction: column;
}

.abou{
      color: white;
      font-size: 24px;
      display: flex;
      justify-content: center;
      width: 75%;
      line-height: 285%;
      font-family: 'light';
}

#secure{
       display: flex;
       flex-direction: row;
       justify-content: center;
       padding-bottom: 10%;
       padding-top: 5%;
}

#secure img{
            width: 23%;
}

.pwoblem{
         height: 12%;
         margin-right: 3%;
}

.pwoblem2{
         height: 12%;
         padding-top: 27%;
         margin-left: 3%;
}

#sosimple{
          background-color: white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding-block: 15%;
}

#sosimple img{
              width: 50%;
}

h3{
    color: #0D1B2A;
    font-size: 40px;
    font-family: 'medium';
}

#carac{
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: row;
       gap: 20px;
}

#cara{
      border-color: #0D1B2A;
      border-style: solid;
      height: 41px;
      width: 274px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      font-family: 'medium';
      border-radius: 6px;
}

#bloc{
      display: flex;
      justify-content: center;
      flex-direction: row;
      background-color: white;

}

#bloc p{
        color: #0D1B2A;
        font-size: 24px;
        margin-left: 6%;
        line-height: 68px;
        width: 40%;
        font-family: 'light';
}

#bloc2{
      display: flex;
      justify-content: center;
      flex-direction: row;
      background-color: white;
      padding-top: 75px;
}

#bloc2 p{
        color: #0D1B2A;
        font-size: 24px;
        margin-right: 6%;
        line-height: 68px;
        width: 40%;
        font-family: 'light';
}

#bloc img{
         margin-left: 6%;
         margin-right: 6%;
}

#bloc2 img{
         margin-left: 6%;
         margin-right: 6%;
}

#easy{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: white;
      height: 130vh;
}

#easy p{
        text-align: center;
}

#easy img{
          width: 25%;
          display: flex;
          justify-content: center;
}

#create{
        width: 11%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-family: 'light';
        background-color: #0D1B2A;
        color: white;
        height: 68px;
        margin-right: 24%;
        margin-top: -12%;
        cursor: pointer;
        -webkit-box-shadow: 13px 13px 24px 1px rgba(0,0,0,0.9); 
        box-shadow: 13px 13px 24px 1px rgba(0,0,0,0.9);
        border-style: none;
}

#create:hover{
        width: 11%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-family: 'light';
        background-color: #75b8ff ;
        color: whitesmoke;
        height: 68px;
        margin-right: 24%;
        margin-top: -12%;
        cursor: pointer;
        -webkit-box-shadow: 13px 13px 24px 1px rgba(0,0,0,0.9); 
        box-shadow: 13px 13px 24px 1px rgba(0,0,0,0.9);
        border-style: none;
}

#feature{
         background-color: #0D1B2A;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-top: 10%;
}

#feature p{
           color: white;
           font-family: 'light';
           font-size: 24px;
           align-content: center;
           line-height: 3;
           display: flex;
           text-align: center;
           width: 89%;
}

#feature img{
             width: 40%;
             padding-block: 5%;
}

.formulaire{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
}

#formul{
        display: flex;
        justify-content: center;
        height: 65vh;
}

#formul button{
               display: flex;
               justify-content: center;
               margin-left: 30%;
               margin-right: 30%;
               cursor: pointer;
               font-family: 'medium';
               color: #0D1B2A;
               background-color: whitesmoke;
               font-size: 12px;
               border-radius: 12px;
               padding: 9px;   
               border-style: none;       
}

#formul button:hover{
               display: flex;
               justify-content: center;
               margin-left: 30%;
               margin-right: 30%;
               cursor: pointer;
               font-family: 'bold';
               color: whitesmoke;
               background-color: #75b8ff ;
               font-size: 12px;
               border-radius: 12px;
               padding: 9px;    
               border-style: none;           
}

#formulaire{
            background-color: #0D1B2A;
            display: flex;
            justify-content: center;
            flex-direction: column;
}

form{
     padding :20px 20px;
     border-radius : 10px;
     background: rgba(255, 255, 255, 0.112 );
     backdrop-filter: blur (3px);
     box-shadow: 0px 10px 5px #2423244f;
     width: 70vh;
     height: max-content;
}

.input-group{
             display: flex;
             flex-direction: column;
             width: 100%;
             margin-bottom: 20px;
}

input{
      height: 30px;
      text-align: center;
      font-weight: bold;
      border: 0;
      outline: none;
}

#pout{
      height: 33vh;
      text-align: center;
      font-weight: bold;
      border: 0;
      outline: none;
}


#gros{
      display: flex;
      justify-content: center;
      background-color: #0D1B2A;
      padding-block: 7%;
}

#gros img{
          width: 20%;
}

h4{
   color: white;
   font-size: 40px;
   font-family: 'medium';
   display: flex;
   justify-content: center;
}



footer{
      height: 50px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      padding-top: 2%;
}

#social{
       display: flex;
       flex-direction: row;
       margin-right: 2%;
       width: 8%;
       height: 31px;
       justify-content: space-between;  
}

#social img{ 
            cursor: pointer;          
}

#gauche{
       margin-left: 2%;
       height: 69%;
}

#copy{
      display: flex;
      justify-content: center;
      font-size: 11px;
      color: white;
      font-family: 'regular';
}

/* RESPONSIVE */

@media screen and (max-width: 1400px) {

body{
     margin: auto;
     width: 100%;
     height: auto;
     background-color: #0D1B2A;
     padding-top: 18%;
}

header{
       width: 100%;
       padding-top: 19%;
       height: 90vh;
}

#videospline{
             width: 100%;
             height: 55%;
             z-index: -1;
             position: absolute;
             display: flex;
             justify-content: center;
             align-items: center;
}

nav{
    position: fixed;
    width: 100%;
}

.navlist{
    padding: 3px;
    background-color: #0D1B2A;
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    margin-top: 0;
    z-index: 1;
    border-bottom: whitesmoke;
    border-bottom-style: none;
    border-style: solid;
    height: 15vh;
    flex-direction: column;
}

nav a{
      color: white;
      font-size: 11px;
      text-decoration: none;
      font-family: 'regular';
}

li{
   list-style: none;
}

#logoprincipal{
               display: flex;
               justify-content: center;
               flex-direction: column;
               align-items: center;
}

#logoprincipal p{
                 color: white;
                 font-size: 11px;
                 font-family: 'regular'; 
                 margin-left: 12%;
}

#logoprincipal img{
                   width: 53%;
}

#titles{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        align-items: baseline;
        position: relative;
        top: 24%;
        margin-inline: 29%;
        width: 69%;
}

h1{
   color: white;
   font-size:9px;
   margin-left: 30%;
   font-family: 'light';
}

h2{
   color: #75b8ff;
   font-size: 15px;
   margin: 14%;
   font-family: 'light';
   margin-top: 77%;
}

header button{
              font-size: 20px;
              width: 50%;
              font-family: 'medium';
              cursor: pointer;
              padding: 16px;
}

#about{
       display: flex;
       align-items: center;
       height: 65vh;
       justify-content: center;
}

.abou{
      color: white;
      font-size: 13px;
      display: flex;
      justify-content: center;
      line-height: 285%;
      font-family: 'light';
      width: 94%;
}

#secure{
       display: flex;
       flex-direction: row;
       justify-content: center;
}

#secure img{
            width: 33%;
}

.pwoblem{
         height: 12%;
         margin-right: 3%;
}

.pwoblem2{
         height: 12%;
         padding-top: 27%;
         margin-left: 3%;
}

#sosimple{
          background-color: white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding-block: 15%;
}

#sosimple img{
              width: 50%;
}

h3{
    color: #0D1B2A;
    font-size: 33px;
    font-family: 'medium';
}

#carac{
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 20px;
}

#cara{
      border-color: #0D1B2A;
      border-style: solid;
      height: 41px;
      width: 274px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      font-family: 'medium';
      border-radius: 6px;
}

#bloc{
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-color: white;

}

#bloc p{
        color: #0D1B2A;
        font-size: 12px;
        line-height: 38px;
        width: 90%;
        font-family: 'light';
}

#bloc2{
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-color: white;
      align-items: center;
}

#bloc2 p{
        color: #0D1B2A;
        font-size: 12px;
        line-height: 38px;
        width: 90%;
        font-family: 'light';
        align-items: center;
}

#bloc img{
         margin-left: 6%;
         margin-right: 6%;
}

#bloc2 img{
         margin-left: 6%;
         margin-right: 6%;
         width: 90%;
}

#easy{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: white;
      height: 65vh;
}

#easy p{
        text-align: center;
}

#easy img{
          width: 65%;
          display: flex;
          justify-content: center;
}

span{
      font-family: 'bold';
      font-size: 30px;
      align-items: center;
}

#create{
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: 'light';
    background-color: #0D1B2A;
    color: white;
    height: 43px;
    margin-left: 56%;
    margin-top: 3%;
    cursor: pointer;
}

#feature{
         background-color: #0D1B2A;
         display: flex;
         flex-direction: column;
         align-items: center;
}

#feature p{
           color: white;
           font-family: 'light';
           font-size: 12px;
           align-content: center;
           line-height: 3;
           padding-block: 7%;
           display: flex;
           text-align: center;
           width: 89%;
}

#feature img{
             width: 67%;
}

.formulaire{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
}

#formul{
        display: flex;
        justify-content: center;
}

#formul button{
               display: flex;
               justify-content: center;
               margin-left: 30%;
               margin-right: 30%;
               cursor: pointer;
               font-family: 'medium';
               color: #0D1B2A;
               background-color: whitesmoke;
               font-size: 12px;
               border-radius: 12px;
               padding: 9px;
               
}

#formulaire{
            background-color: #0D1B2A;
            display: flex;
            justify-content: center;
            flex-direction: column;
}

form{
     border: 0.5px solid rgba(255, 255, 255, 0.164);
     padding :20px 20px;
     border-radius : 10px;
     background: rgba(255, 255, 255, 0.112 );
     backdrop-filter: blur (3px);
     box-shadow: 0px 10px 5px #2423244f;
     width: 70vh;
     height: max-content;
}

.input-group{
             display: flex;
             flex-direction: column;
             width: 100%;
             margin-bottom: 20px;
}

input{
      height: 30px;
      text-align: center;
      font-weight: bold;
      border: 0;
      outline: none;
}

#pout{
      height: 33vh;
      text-align: center;
      font-weight: bold;
      border: 0;
      outline: none;
}


#gros{
      display: flex;
      justify-content: center;
      background-color: #0D1B2A;
      padding-block: 17%;
}

#gros img{
          width: 40%;
}

span{
      font-family: 'bold';
      font-size: 25px;
}

h4{
   color: white;
   font-size: 18px;
   font-family: 'medium';
   display: flex;
   justify-content: center;
}

footer{
      background-color: #0D1B2A;
      height: 50px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      padding-top: 10vh;
      width: 84%;
}

#cacaprout img{
           height: 50%;
}

#social{
       display: flex;
       flex-direction: row;
       margin-right: 8%;
       justify-content: space-between;  
       gap: 38%;
}

#gauche{
       margin-left: 4%;
}

#copy{
      display: flex;
      justify-content: center;
      font-size: 11px;
      color: white;
      background-color: #0D1B2A;
      font-family: 'regular';
}

}