html {
  overflow-y: auto; /* Scroll dans le sens vertical uniquement */
}

body { 
    font-size: 100%;
    font-family: "Science Gothic", sans-serif;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

/* Le background color s'incrémente de 15 à Rouge et vert à chaque bloc. Le bleu reste à 255. */

#titre_nom { 
    padding: 10% ;
    margin-left: 0% ;
    margin-right: 0% ;
    background-color: rgb(0, 82, 189); /* Valeur couleur de base */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}
#titre_nom:hover{
    box-shadow: 0px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#photoprofil {
    background-color: rgb(228, 228, 228);
    border-width: 100%;
    border-radius: 100px;
    padding: 1%;
    padding-right: 1%
}

#photoprofil:hover{
    box-shadow: 120px 80px 40px 20px rgb(192, 192, 192);
}

#titre_presentatif { 
    border-radius: 25px;
    padding: 3% ;
    margin-left: 15% ;
    margin-right: 15% ;
    background-color: rgb(0, 82, 189);    /* Incrémentation de 15 valeurs Rouge et Vert */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}
#titre_presentatif:hover{
    box-shadow: 120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#formation { 
    border-radius: 35px;
    width: 50%;
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    background-color: rgb(0, 82, 189);    /* Incrémentation de 15 valeurs Rouge et Vert */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}

#formation:hover{
    box-shadow: -120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#competence { 
    border-radius: 35px;
    width: 50%;
    margin-left: 35%;
    padding-top: 3%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3%;
    background-color: rgb(0, 82, 189);    /* Incrémentation de 15 valeurs Rouge et Vert */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}

#competence:hover{
    box-shadow: 120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#qualites { 
    border-radius: 35px;
    width: 30%;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    background-color: rgb(0, 82, 189);    /* Incrémentation de 15 valeurs Rouge et Vert */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}

#qualites:hover{
    box-shadow: -120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#centre_interet { 
    border-radius: 35px;
    width: 50%;
    margin-left: 40%;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    background-color: rgb(0, 82, 189);    /* Incrémentation de 15 valeurs Rouge et Vert */
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}

#centre_interet:hover{
    box-shadow: 120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#a {
  color: rgb(255, 255, 255);
}

/* Pour les écrans plus petits que 600 pixels */
@media only screen and (max-width: 600px) {

h1 { 
font-size: 100%;
}

body { 
    font-size: 100%;
}

/* ###### Titre nom ###### */
#titre_nom { 
    font-size: 200%;
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#titre_nom:hover{
    border: solid 4px rgb(179, 0, 0);
}


/* ###### Titre présentatif ###### */
#titre_presentatif{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#titre_presentatif:hover{
    border: solid 4px rgb(179, 0, 0);
}


/* ###### Formation ###### */
#formation{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#formation:hover{
    border: solid 4px rgb(179, 0, 0);
}


/* ###### Compétence ###### */
#competence{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#competence:hover{
    border: solid 4px rgb(179, 0, 0);
}


/* ###### Qualités ###### */
#qualites{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#qualites:hover{
    border: solid 4px rgb(179, 0, 0);
}


/* ###### Centre d'intérêt ###### */
#centre_interet{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#centre_interet:hover{
    border: solid 4px rgb(179, 0, 0);
}
}









/* ############ POUR LE SITE SUR LA DEMOSCENE UNIQUEMENT ############ */

body { 
    font-size: 100%;
    font-family: "Science Gothic", sans-serif;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

#titre_demoscene { 
    padding: 10% ;
    margin-left: 0% ;
    margin-right: 0% ;
    background-color: rgb(0, 82, 189);
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}
#titre_demoscene:hover{
    box-shadow: 0px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#titre { 
    font-size: 200%;
}
#question_titre:hover{
    box-shadow: 0px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#attention {
    border-radius: 35px;
    width: 50%;
    margin-left: 25%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: rgb(255, 255, 0);  
    transition-duration: 1s;
    color: rgb(0, 0, 0);
}

#bloc1 { /* Pour les containers histoire et démo */
    border-radius: 35px;
    width: 50%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-right: 5%;
    padding-left: 5%;
    background-color: rgb(0, 82, 189);  
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}
#bloc1:hover{
    box-shadow: -120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#bloc2 { /* Pour les containers Contexte */
    border-radius: 35px;
    width: 50%;
    margin-left: 40%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-right: 5%;
    padding-left: 5%;
    background-color: rgb(0, 82, 189);  
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}
#bloc2:hover{
    box-shadow: 120px 80px 40px 20px rgb(192, 192, 192);
    border: solid 4px rgb(0, 82, 189);
}

#question_titre {
    font-size: 100%;
    border-radius: 35px;
    width: 50%;
    margin-left: 20%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-right: 5%;
    padding-left: 5%;
    background-color: rgb(0, 54, 126);  
    transition-duration: 1s;
    color: rgb(255, 255, 255);
}

.container {
    display: flex;
    order: 2;
    flex-shrink: 50%;
    padding-right: 50%;
}

#c64 {
    max-width: 100%;
    height: auto;
}

#bas_de_page {
    position: relative;
    z-index : 1;
    border-top-style: solid;
    border-top-color: black;
    background-color: rgb(255, 255, 255);
    padding-top: 2%;
    padding-bottom: 10%;
}

/* Pour les écrans plus petits que 600 pixels */
@media only screen and (max-width: 600px) {

/* ###### Balise a ###### */

h1 { 
font-size: 100%;
}

body { 
    font-size: 100%;
}

#titre_demoscene{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#titre_demoscene:hover{
    border: solid 4px rgb(179, 0, 0);
}

#bloc1{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#bloc1:hover{
    border: solid 4px rgb(179, 0, 0);
}


#bloc2{
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#bloc2:hover{
    border: solid 4px rgb(179, 0, 0);
}

#question_titre {
    background-color: rgb(179, 0, 0);
    transition-duration: 1s;
}
#question_titre:hover{
    border: solid 4px rgb(179, 0, 0);
}

}