a{text-decoration: none;}
a:link{font-family:"verdana"; font-size:14pt; color: #3476c6;}
a:visited{color: #4499FF;}
a:hover{color:#b70000; text-decoration:none;}

* {box-sizing: border-box;  margin: 0; padding: 0;}

body{   
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr;
    width: 100%;
    font-size: 16px;
    font-family: verdana;
}

nav{
    height: 80px; 
    width: 100%;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
    background-color: rgb(151, 185, 247);
}

main{
    /* flex-grow: 1; */
    display: flex; 
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-top: 20px;
    line-height: 25px;
    background-color: cornflowerblue;
}


h1{
    font-size: 1.5rem; 
    margin: 50px 0 20px 0;
    letter-spacing: 3px;
    color:rgb(200, 222, 242);
}
h2{font-size: 1.3rem;}
h3{font-size: 1rem; margin: 20px 0 0 20px;}


section{
    width: 80%; 
    max-width: 800px;
    text-align: justify;
    margin-top: 40px;
}


#sommaire{
    display: flex;
    justify-content: center;
    align-items: center;

    & ul{list-style-type: none;}
      li ul{padding-left: 40px;}
}

#sommaire p+ul{
    padding: 40px;
    border-radius: 20%;
    line-height: 30px;
    margin-bottom: 30px;
    box-shadow: 1px 2px 5px 2px rgb(88, 116, 168);
    
    & span{font-size: 0.6rem; padding-right: 3px;}
}


.yellow{color: yellow;}
.yellow2{color: rgb(207, 207, 56);}

p:not(p#gap){padding: 10px 0 5px 20px;}
p a.lien{color: rgb(158, 212, 227); font-size: 1rem;}
p:has(.Erathostene){text-align: center;}
.Erathostene{color: rgb(129, 28, 28);}


.pre{
    color: rgba(63, 59, 59, 0.7); 
    margin-bottom: -5px;
    text-align: center;
}

.spanRed span:not(span.yellow){color: rgb(155, 66, 66);}

.prime{color: rgb(150, 16, 16);}
.barre{text-decoration: line-through; color: rgba(63, 59, 59, 0.7);}
.noPrime{text-decoration: line-through; color: rgb(51, 50, 50);}

.center{text-align: center;}

#end{margin-bottom: 50px;} /* dernier p de la derniere section*/
.mb20{margin-bottom: 20px;} /* margin bottom 20px */
.end{margin-bottom: 40px;}  /* dernier p d'une section */

/* chapitre 1.1 - modulo */
    /*  reprend le general */ 
    /*  lien vers 'representation des primes' => liste => a CSS dédié */


/* chapitre 1.2 - Erathostene : les ensembles*/
p.preEnsemble{
    color: rgba(63, 59, 59, 0.7);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
span.multiEnsembles{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
span.cercle{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.cercle0{width: 160px; height: 160px; margin: 1px;}
.cercle1{width: 30px; height: 30px;}
.cercle2{width: 100px; height: 100px;}
.cercle3{width: 50px;  height: 50px;}

.cercleGreenyellow{border: 1px solid greenyellow;}
.cercleViolet{border: 1px solid violet;}

#c0{width: 200px; height: 200px; margin: 1px;}
#c1{width: 30px; height: 30px; }
#c2{width: 100px; height: 100px;}
#c3{width: 50px;  height: 50px;}



/* chap 1.3 - simulation  */
main.simulation{
    div{margin-top: 20px; margin-top: 10px;}
}


/* chap. 2 - GAP */
#gap{
    text-align: center;
    padding: 0;
    margin: 20px 0 20px 0;
    color: rgba(63, 59, 59, 0.7);
}
#gap span{color: white;}
#gap .yellow{font-style: oblique; color: yellow;}

.gap2{
    text-align: center;
    padding: 0;
    margin: 20px 0 20px 0;
    color: rgba(63, 59, 59, 0.7);
}


/* chap. 3 : perspective = cases + 60 col. */
.cases{text-align: center;}
.cases span{
    display: inline-block;
    width: 20px; height: 20px;
    border: 1px solid black;
    background-color: rgb(228, 208, 211);
    margin: 1px;
}
.cases span.red{background-color: rgb(190, 26, 26);}

img{width: 100%; text-align: center;}



/* chap. 4 :  factorisation */
.preFactor{
    color: rgba(63, 59, 59, 0.7); 
    margin-bottom: -5px;
    display: flex;
    justify-content: center;
}

.spanContainer{
    text-align: left;
    width: 370px;
}
.spanContainer span{color: rgb(160, 22, 22);}

.fontsizeSmall{
    padding: 10px 0;
    display: inline-block; 
    font-size: 0.8rem; 
    line-height: 1rem;
}


#mainf6{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#f6{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: rgba(63, 59, 59, 0.7);
    & p{width: 190px;}
}



/* --------- */
@media screen and (min-width: 960px){
    #containerGlobal_2divTable_chap1{
        gap: 20px;
    }
}
@media screen and (max-width: 959px){
    #containerGlobal_2divTable_chap1{
        gap: 10px;
    }
    
    h1{text-align: center;}
}


@media screen and (max-width: 600px) and (min-width: 491px){
    #gap{font-size: 0.8rem;}
}
@media screen and (max-width: 490px) and (min-width: 450px){
    #gap{font-size: 0.7rem;}
}
@media screen and (max-width: 449px){
    #gap{font-size: 0.5rem;}
}



@media screen and (max-width: 810px){
    .size2{font-size: 0.8rem;}
}
@media screen and (max-width: 660px){
    .size2{font-size: 0.6rem;}
    
}
@media screen and (max-width: 530px){
    .size2{font-size: 0.4rem; line-height: 8px;}
    .size1{font-size: 0.7rem; line-height: 12px;}
}