html {
    background: linear-gradient(#f5f8fc, #b0c6e1);
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

footer {
    padding: 40px;
    background-color: rgba(255,255,255,0.1);
    margin-top: 20px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    position: relative;
}

a {
    text-decoration: underline;
    color: inherit;
}

h3 {
    font-size: 2em;
}

ul h3 {
    font-size: 1em;
}

ul h4 {
    font-size: 1em;
}

p {
    font-size: 2em;
    text-align: justify;
}

a.bouton {
    font: inherit;
    background-color: #1c87c9;
    border: none;
    color: white;
    padding: 10px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:20px;
    transition: 2s;
}

a.bouton:hover {
    background: rgb(108,105,167);
    -webkit-box-shadow: rgba(108,105,167, 0.5) 0px 10px 16px;
    box-shadow: rgba(108,105,167, 0.5) 0px 10px 16px;
}

img.petit_img {
    height: 25px;
    transition: height 2s;
}

img.petit_img:hover { 
    height: auto;
}
  
.bouton_aqua {
    border: 2px solid #ccc;
    background-color: rgba(60, 132, 198, 0.8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(108, 191, 255, .9)), to(rgba(28, 91, 155, 0.8)));
    border-top-color: #8ba2c1;
    border-right-color: #5890bf;
    border-bottom-color: #4f93ca;
    border-left-color: #768fa5;   
    -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
    -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
    border-radius:20px;
    box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
    color: white;
    font-size: 2em;
    padding: 15px;
    margin-top: 15px;
  }
  
.glare {
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    padding: 3px 0;
    background-color: rgba(255, 255, 255, 0.25);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
  }

.glare2 {
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    padding: 3px 0;
    background-color: rgba(255, 255, 255, 0.25);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

a:active .bouton_aqua {
    border: 5px solid #ccc;
    -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0 0 0;
    -moz-box-shadow: rgba(66, 140, 240, 0.5) 0 0 0; /* FF 3.5+ */
    box-shadow: rgba(66, 140, 240, 0.5) 0 0 0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
}

a:active .glare {
    top:auto;
    bottom: 1px;
    background-color: rgba(255, 255, 255, 0);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.1)));
    padding: 20px 0;
}

a:active .glare2 {
    top:auto;
    bottom: 1px;
    background-color: rgba(255, 255, 255, 0);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.1)));
    padding: 20px 0;
}

/* Les pages */

/* Le menu */
#menu_page {
    margin-left: 40px;
    margin-right: 40px;
    background-color: #9BBB59;
    height: 80px;
}

#menu_page #title {
    vertical-align: 12px;
    font-size: 2em;
    color: #4F6228;
}
#menu_page ul#menu_liste_imgs {
    display: inline-block;
    padding: 0;
    margin: 15px;
    height: 50px;
}
#menu_page #menu_liste_imgs li {
    display: inline-block;
}
#menu_page #menu_liste_imgs li img {
    width: 50px;
    height: 50px;
}

/* Liste catégorie */

#content {
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 40px;
}

ul#liste_categorie {
    background-color: transparent;
}

#liste_categorie a {
    text-decoration: none;
}

/* Liste_choix */

.liste_ul {
    font-size: 28px;
    list-style: url('../img/puce_liste_bleu_25x25.png');
    margin-left: 30px;
}
    
.liste_ul li {
    padding-left: 20px;
    padding-top: 25px;
    text-align: justify;
}

/* liste_instructions */

.liste_instructions {
    font-size: 28px;
    list-style: url('../img/puce_liste_orange_25x25.png');
    margin-left: 30px;
}

.liste_instructions li {
    padding-left: 20px;
    padding-top: 15px;
    text-align: justify;
}

.liste_instructions img {
    max-width: 800px;
    box-shadow: 0px 4px 15px #545454;
}

/* Liste_choix */

.liste_choix {
    font-size: 28px;
    list-style: url('../img/puce_liste_verte_25x25.png');
    margin-left: 30px;
}
    
.liste_choix li {
    padding-left: 20px;
    padding-top: 25px;
    text-align: justify;
}

/* Code - Apparence du terminal Linux */

.code {
    padding: 20px;
    background-color: black;
    color: white;
    
}

.code_rep {
    padding: 20px;
    background-color: grey;
    color: white;
}