/* MAIN GENERIC STYLE SHEET, no animations */
/* PANET WITH NON MOVING IMAGE ATTACHED TO COUNTER ROTATING TEXT DIV*/
/* disables selection of text and images from a web page */

.wrapper { width: 100vw; height:100vh; display: flex; align-items:center; justify-content:center; 
    padding-top:0px; background-color: #141c4d; }

/* SUN, Planets & Satellites Sizes without positioning around its center*/
.sun {   position: absolute; left: calc(50% - 45px); top: calc(50% - 45px); 
    border-radius: 50%; width: 90px; height: 90px;
}

.sun2 {   position: absolute; left: calc(50% - 65px); top: calc(50% - 65px); 
    border-radius: 50%; width: 130px; height: 130px;
}
.planet { position: absolute; left: calc(50% - 55px); top: calc(50% - 55px);
    height: 110px; width: 110px; border-radius: 50%;
 }
.sat { position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); 
    height: 60px; width: 60px; border-radius: 50%; }

.homeButton { position: absolute; left: 40px; top: 40px;  
        border-radius: 50%; width: 70px; height: 70px; }

.topLeftNav { position: absolute; left: 40px; top: 40px;  
             width: 150px; height: 70px;
             display: flex;
}

.sun:hover { cursor:pointer; }
.planet:hover { cursor:pointer; }
.sat:hover { cursor:pointer; }

/* SUN, Planets & Satellites Sizes*/

/* DIV AND TEXT STYLES & MARGINS */
  
.flexy { width:100%; height:100%; display: flex; align-items:center; justify-content:center; }
.flexy2 { display:flex; align-items:center; justify-content:center; }

.round { border-radius: 50%; }
.nodeco { text-decoration: none; }
.nowrap { white-space: nowrap; }

.text { color:white; font-weight: bold; text-align: center; line-height: 1em; 
        cursor:pointer; text-decoration: none;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    
}

.text_dark { color:rgba(0,0,0,.8); font-weight: bold; text-align: center; 
             line-height: 1em; cursor:pointer; text-decoration: none;
             -webkit-touch-callout: none; /* iOS Safari */
             -webkit-user-select: none; /* Safari */
              -khtml-user-select: none; /* Konqueror HTML */
                -moz-user-select: none; /* Firefox */
                 -ms-user-select: none; /* Internet Explorer/Edge */
                     user-select: none; /* Non-prefixed version, currently
                                           supported by Chrome and Opera */

            }

.size10 { font-size: 10px; }
.size12 { font-size: 12px; }
.size14 { font-size: 14px; }
.size16 { font-size: 16px; }
.cap { text-transform: uppercase; }

.top20 { padding-top:20px }


/* PLANET STYLING */

.ring {   position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); 
    border-radius: 50%;
    width: 400px; height: 400px;
    border: 12px solid rgba(255,255,255,.1); 
}


.shadow {
    -moz-box-shadow:    inset -3px -4px 15px rgba(0,0,0,.6);
    -webkit-box-shadow: inset -3px -4px 15px rgba(0,0,0,.6);
    box-shadow:         inset -3px -4px 15px rgba(0,0,0,.6);
    background: radial-gradient(circle at 30px 30px, transparent, rgba(0,0,0,1));
 }
 
 .shadow1 {
     -moz-box-shadow:    inset -3px -4px 15px rgba(0,0,0,.6);
     -webkit-box-shadow: inset -3px -4px 15px rgba(0,0,0,.6);
     box-shadow:         inset -3px -4px 15px rgba(0,0,0,.6);
     background: radial-gradient(circle at 30px 30px, transparent, rgba(0,0,0,.7));
  }
 
 .shadow2 {
     -moz-box-shadow:    inset -3px -4px 15px rgba(0,0,0,.6);
     -webkit-box-shadow: inset -3px -4px 15px rgba(0,0,0,.6);
     box-shadow:         inset -3px -4px 15px rgba(0,0,0,.6);
     background: radial-gradient(circle at 30px 30px, transparent, rgba(0,0,0,.2));
  }
 
 .shadow3 {
     -moz-box-shadow:    inset -3px -4px 15px rgba(0,0,0,.6);
     -webkit-box-shadow: inset -3px -4px 15px rgba(0,0,0,.6);
     box-shadow:         inset -3px -4px 15px rgba(0,0,0,.6);
     background: radial-gradient(circle at 20px 20px, rgba(255,255,255,.8), transparent );
  }
 
  .shadow4 {
     -moz-box-shadow:    inset -3px -4px 15px rgba(0,0,0,.6);
     -webkit-box-shadow: inset -3px -4px 15px rgba(0,0,0,.6);
     box-shadow:         inset -3px -4px 15px rgba(0,0,0,.6);
     background: radial-gradient(circle at 20px 20px, rgba(255,255,255,.4), transparent );
  }

 /* COLORS AT THE END */

.orange1        { background-color: #ec8931 }
.orange1:hover  { background-color: #b15d14 }

.purple1          { background-color: #5f69c8 }
.purple1:hover    { background-color: #424cac }

.mauve1 { background-color: #a775b1 }

.purple2          { background-color: #6e2eb6 }
.purple2:hover    { background-color: #5f26a0 }
.purple3          { background-color: #9539ca }
.purple3:hover    { background-color: #832db6 }

.green1           { background-color: #5fef2e }
.green1:hover     { background-color: #47c51e }
.green2     { background-color: #3ca019 }

.pink1            { background-color: #f02ee4 }
.pink1:hover      { background-color: #c91ebd }
.pink2      { background-color: #c626bc }

.pink3          { background-color: #f39df4 }
.pink3:hover    { background-color: #db7ddd }

.yellow1         { background-color: #f1db2d }
.yellow1:hover   { background-color: #bba818 }
.yellow2         { background-color: #9a8905 }
.yellow2:hover   { background-color: #8a7b0b }
.yellow3         { background-color: #f5e79e }
.yellow3:hover   { background-color: #cebf75 }
.yellow4         { background-color: #ccac4a }
.yellow4:hover   { background-color: #b3953d }

.blue1          { background-color: #4976c9 }
.blue1:hover    { background-color: #365da7 }
.blue2          { background-color: #3d7cf0 }
.blue2:hover    { background-color: #2f69d6 }

.blue3          { background-color: #4653d3 }
.blue3:hover    { background-color: #3341b9 }
.blue4          { background-color: #292f63 }
.blue4:hover    { background-color: #202657 }

.blue5          { background-color: #8eb1e9 }
.blue5:hover    { background-color: #698dc7 }

.blue6          { background-color: #4653d3 }
.blue6:hover    { background-color: #3844b3 }

.grey1        { background-color: #e4dae2}
.grey1:hover  { background-color: #c0aebc}

.kaki1        { background-color: #918c66}
.kaki1:hover  { background-color: #7a754f}

.brown1        { background-color: #b98949}
.brown1:hover  { background-color: #a17438}



.imgCover1 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/03/s1.jpg);
    background-size: cover;  }
.imgCover2 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/03/s2.jpg);
    background-size: cover;  }
.imgCover3 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/03/s3.png);
    background-size: cover;  }
.imgCover4 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/03/s5.png);
    background-size: cover;  }
.imgCover5 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/03/s6.jpg);
    background-size: cover; }

.coverBio1 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/bio_jeune_.png);
    background-size: cover; 
}
.coverBio2 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/bio_ado_.png);
    background-size: cover;  }
.coverBio3 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/bio_adulte_.png);
    background-size: cover;  }
.coverBio4 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/bio_retraite_.png);
    background-size: cover;  }

.coverPassion1 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_archi.png);
    background-size: cover; }
.coverPassion2 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_photos.png);
    background-size: cover;  }
.coverPassion3 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_deco.png);
    background-size: cover;  }
.coverPassion4 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_ecrits.png);
    background-size: cover;  }
.coverPassion5 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_musique.png);
    background-size: cover; }
.coverPassion6 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_conception.png);
    background-size: cover;  }
.coverPassion7 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_sculpture.png);
    background-size: cover;  }
.coverPassion8 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/05/passions_graphique.png);
    background-size: cover;  }




.coverGraph1 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/06/graph_tableaux.png);
    background-size: cover;  }
.coverGraph2 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/06/graph_cartes.png);
    background-size: cover;  }
.coverGraph3 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/06/graph_affiches.png);
    background-size: cover;  }
.coverGraph4 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/06/graph_dessins.png);
    background-size: cover;  }
.coverGraph5 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2019/06/graph_caricatures.png);
    background-size: cover;  }
.coverGraph6 {   
    background: url(http://x-joel-confoulan.hosting109639.a2f2d.netcup.net/wp-content/uploads/2024/11/graph_Logos.png);
    background-size: cover;  }