@media screen and (min-width: 1000px) {
     
     
    body {
          --sscreen: "notmob";
    }
}
@media screen and (max-width: 1000px) {
    body {
          --sscreen: "mob";
    }
     
}
    #accueilBar {
        
        color: black;
        transition: 0.5s;
    }
    #prezBar {
        
        color: black;
        transition: 0.5s;
    }    
    #servicesBar {
       
        color: black;
        transition: 0.5s;
    }     
    #contactBar {
        
        color: black;
        transition: 0.5s;
    }    
    #accueilBar:hover {
         color:  blue;
          text-shadow: -1px 0 black, 0 -1px black, 1px 0 black, 0 -3px white;
    }
    #prezBar:hover {
         color:  blue;
          text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -3px white;
    }    
    #servicesBar:hover {
        color:   blue;
          text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -3px white;
    }     
    #contactBar:hover {
        
         color:   blue;
          text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -3px white;
    }  
.btns1:hover{
    transition: 0.4s;
    font-size:  110%;
}
 /* unvisited link */
a:link {
  color: white;
  transition: 1s;
  
}

/* visited link */
a:visited {
  color: beige;
  transition: 1s;
}

/* mouse over link */
a:hover {
  color: black;
  transition: 0.4s;
  
}

/* selected link */
a:active {
  color: greenyellow;
} 

.btnG{
     animation: movecolor 2s infinite;  
     border-radius: 20px;
     position: relative;
}
@keyframes movecolor {
  0% { background: lightblue; }
  50% { background: grey; }
  100% { background: lightblue; }
}
.btnG:hover{
    top: -10%;
}
.readbookstext{
    width: 60%;
}
.iframereadbooksclass {
 
  height: 25em;
 /* width: 600%;*/ 
  display: none;
}
.instalConfigDiv {
    
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}
.creaSitesClassDiv{
    position: relative;
    margin-left:  -432px;
    height: 25em;
}
.vidYTB{
     object-fit: contain;
    display : block;
    
}
.blurdiv{
    background-color: #ffffff4a;
    backdrop-filter: blur(2px);
} 
.transparentBackGround {
    
    background-color: #6f6f6f0f;
    
}
.blur {
     filter: blur(2px);
  -webkit-filter: blur(2px);
}
.fade-out-image { animation: fadeOut 5s; 
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse ;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
  
}

.fade-in-image { animation: fadeIn 5s; 
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse ;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fade-out-image2 { animation: fadeOutt 5s; 
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse ;
}

@keyframes fadeOutt {
  0% { opacity: 1;   }
  100% { opacity: 0;  }
}
        .border-radius10{ border-radius: 10px;}
        .border-radius10px{ border-radius: 10px;}
        .border-radius20px{ border-radius: 20px;}
        .border-radius40px{ border-radius: 40px;}
        .border-radius100p{ border-radius: 100%;}
        .border-radius100px{ border-radius: 100px;}
      
        
        
        .gradientBckgrndDoubleH {
            background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(87, 87, 87, 1) 20%, rgba(163, 157, 157, 1) 50%, rgba(89, 88, 88, 1) 80%, rgba(255, 250, 250, 1) 90%, rgba(0, 0, 0, 1) 100%);
        }
        .gradientBckgrndDouble {
            background: #000000;
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(87, 87, 87, 1) 20%, rgba(163, 157, 157, 1) 50%, rgba(89, 88, 88, 1) 80%, rgba(255, 250, 250, 1) 90%, rgba(0, 0, 0, 1) 100%);
        }
        .gradientBtnBlue {
           background: radial-gradient( rgb(0, 173, 240) , rgb(0, 105, 242) , rgb(0, 7, 21) );
        }
        .textRadialGradient{
    background-image: radial-gradient(#fff3, black);
}
        
        
        .gradientMoveHover{
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgb(255, 255, 255) 51%, rgb(245, 245, 245) 100%);
            transition: 0.5s;
            background-size: 200% auto;
        }
        .gradientMoveHover:hover {
            background-position: right center; /* change the direction of the change here */
            
            text-decoration: none;
          }
       .btn-grad {background-image: linear-gradient(to right, #000000 0%, #c6c6c6 51%, white 100%);}
         
         .btn-grad {
             
            padding: 15px 45px;
            text-align: center;
             color: white;
            transition: 0.5s;
            background-size: 200% auto;
                      
              
            display: block;
          }

          .btn-grad:hover  {
            background-position: left center; /* change the direction of the change here */
            color: darkgrey;   
            
            margin-bottom: 1em;
             text-decoration: none;
          }
          .btn-grad:not(.btn-gradExcludeMarginTop):hover  {
            margin-top: 1em;
          }
          
        .fontborder02px {
          -webkit-text-stroke: 0.4px white    ;
          animation-name: borderFont02px;
          animation-duration: 10s;
          animation-iteration-count: infinite;
           animation-direction: alternate-reverse ;
        } 

        @keyframes borderFont02px {
          0%   {-webkit-text-stroke: 0.2px red }
          12%  {-webkit-text-stroke: 0.2px orange;}
          25%  {-webkit-text-stroke: 0.2px yellow;}
          50%  {-webkit-text-stroke: 0.2px chartreuse;}
          62%  {-webkit-text-stroke: 0.2px green; }
          75%  {-webkit-text-stroke: 0.2px mediumspringgreen;}
          85%  {-webkit-text-stroke: 0.2px blue;}
          100% {-webkit-text-stroke: 0.2px white;}
        }
        

        /* The element to apply the animation to */
        .fontborder04px {
          -webkit-text-stroke: 0.4px white    ;
          animation-name: borderFont04px;
          animation-duration: 10s;
          animation-iteration-count: infinite;
           animation-direction: alternate-reverse ;
        }

@keyframes borderFont04px {
          0%   {-webkit-text-stroke: 0.4px white }
          12%  {-webkit-text-stroke: 0.4px blue;}
          25%  {-webkit-text-stroke: 0.4px mediumspringgreen;}
          50%  {-webkit-text-stroke: 0.4px green;}
          62%  {-webkit-text-stroke: 0.4px chartreuse; }
          75%  {-webkit-text-stroke: 0.4px yellow;}
          85%  {-webkit-text-stroke: 0.4px orange;}
          100% {-webkit-text-stroke: 0.4px red;}
        }
        /* The element to apply the animation to */
        .fontborder1px {
          -webkit-text-stroke: 1px white    ;
          animation-name: borderFont1px;
          animation-duration: 10s;
          animation-iteration-count: infinite;
           animation-direction: alternate-reverse ;
        }
        @keyframes borderFont1px {
          0%   {-webkit-text-stroke: 1px red }
          12%  {-webkit-text-stroke: 1px orange;}
          25%  {-webkit-text-stroke: 1px yellow;}
          50%  {-webkit-text-stroke: 1px chartreuse;}
          62%  {-webkit-text-stroke: 1px green; }
          75%  {-webkit-text-stroke: 1px mediumspringgreen;}
          85%  {-webkit-text-stroke: 1px blue;}
          100% {-webkit-text-stroke: 1px white;}
        }
        
        
        @keyframes rainbowShadow {                      
              0% { box-shadow: inset 0 0 2em #f04a4a , 0 0 1em rgb(0, 0, 0) ; }
             20% { box-shadow: inset 0 0 2em #bcf04a , 0 0 1em rgb(0, 0, 0) ; }
             40% { box-shadow: inset 0 0 2em #4ff04a , 0 0 1em rgb(0, 0, 0) ; }  
             60% { box-shadow: inset 0 0 2em #4a83f0 , 0 0 1em rgb(0, 0, 0) ; }
             80% { box-shadow: inset 0 0 2em #764af0 , 0 0 1em rgb(0, 0, 0) ; }   
            100% { box-shadow: inset 0 0 2em #ff4a4a , 0 0 1em rgb(0, 0, 0)  ; }
  
  
}
        .shadowCOLOR {
            animation-name: rainbowShadow;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse ;
        }
        .shadow {
            box-shadow: 
              inset 0 0 2em rgba(255, 255, 255, 1),
              0 0 1em rgb(0, 0, 0);
           
        }
        
        .shadowINV  {
            box-shadow:   inset 0 0 2em rgb(0, 0, 0),               0 0 2em rgba(255, 255, 255, 1);
           transition: 0.5s; 
        }
        .shadowINV :hover  {
            box-shadow:  inset  0 0 2em rgba(255, 255, 255, 1) ,             0 0 2em rgba(0, 0, 0,1) ;
            border-radius: 20px;
            
        }
        .shadowOutSetINV  {
            box-shadow: 
             inset  0 0 2em rgb(0, 0, 0),
              0 0 2em rgba(255, 255, 255, 1);
           
        }
        .shadowOutSetINV :hover  {
            box-shadow: 
               inset  0 0 2em rgb(0, 0, 0),
              0 0 2em rgba(255, 255, 255, 1);
            transition: 0.5s; 
        }
        .shadow:hover {
            box-shadow: 
              inset 0 0 2em rgb(0, 0, 0),
             0 0 3em  rgba(255, 255, 255, 1);
        }
        .fontcolorgrdnt {
           
          -webkit-text-stroke: 1px white    ;
          animation-name: colorFont;
          animation-duration: 10s;
          animation-iteration-count: infinite;
          animation-direction: alternate-reverse ;
        } 

        @keyframes colorFont {
          0%   {color: red }
          12%  {color: orange;}
          25%  {color: yellow;}
          50%  {color: chartreuse;}
          62%  {color: green; }
          75%  {color: mediumspringgreen;}
          85%  {color: blue;}
          100% {color: white;}
        }
        .blue {
            color: blue;
        }
        .white {
            color: white;
        }
        .black{
            color: black;
        }