/* Responsive */
/* Feuille par défaut, voir CSS reset */ 

/* Parie commune à toutes les tailles d'écran */
html, body{
    margin:0;
    padding: 0;
    height: 100%;
    width: 100%;    
}

img {
    width: 100%;
    height: auto;
}

body {
    background-color:lightskyblue;
    font-family: Arial;
}

h1,h2,h3 {
    text-decoration: underline;
}

ul#menu, ol {
    list-style-type: none;
    padding: 0; /* si pas de bullet */
    margin: 0;
}
ul#menu li { /* selecteur de désendancce */
    background-color:gray;
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 20%;
    float: left;
}

h1 span { /*span enfant de h1 */
    color: red;
}

ol#smenu::after { /*  dans ol , pas avant voir dans l'inspecteur (dans le contenu) */
    content: "Ceci est un texte debut";
}

ol#smenu::before { /*  dans ol , pas avant voir dans l'inspecteur (dans le contenu) */
    content: "Ceci est un texte debut";
}

h1 span + span + span { /* a partir du 3ème span */
    color: salmon;
}

p[id] { /* prend tous les IDs prioritaire */
    background-color:gray;
}
p[id="first"] { /* selectinne uniquement le first est prioritaire */
    background-color:green;
    padding: 15px;
}

p[id^="se" s] { /* selectinne commence par se le  prioritaire */ /* s = case sensitve) */
    background-color: orange;
    padding: 15px;
}

img[title*="la plage"] {
    border-radius: 15px;
    border:solid 3px red
}

div.intro p:nth-child(odd) { /* 4 ème enfant du texte si chiffre sinon pair*/
    font-size: 2em;
}

div.intro p:nth-child(2n + 1) { /* 4 ème enfant du texte si chiffre sinon pair*/
    font-size: 2em;
}

div.intro p:nth-child(odd):hover { /* survol avec la souris*/
    background-color: orange;
}

a[href^="#"] {
    color: white;
    text-decoration: none;
}

ol#smenu > li ul li{ /* prend les enfants */
    background-color:green;
}

}
/* pour les smartphone */ /* Magnifique change les couleur */
@media screen and (max-width:480px) {
    body {
        background-color: black;
        color: white;
    }
}

/* pour les tablette */
@media screen and (min-width:481px) and (max-width:768px) {  /* directive CSS */
    body {
        background-color:white;
        color: black;
    }  
}

/* pour les desktops */
@media screen and (min-width:769px) and (max-width:1200px) {  /* directive CSS */
    body {
        background-color:purple;
        color: black;
    }  
}

/* au dessus de 1201 */
@media screen and (min-width:1201px){  /* directive CSS */
    body {
        background-color: green;
        color: white;
    }  
}