body {
    background: #A3CB38;
}

#resolution {
    height: 30px;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    background-color: #9980FA;
    font-weight: bold;
    text-align: center;
    
}

#resolution::after {
    content: "tout petits écrans jusque 576";
}

h1 {
    font-size: 5em;
    color: green;
}




/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

    #resolution {
        background-color: #D980FA;

        
    }
    
    #resolution::after {
        content: "Small devices (landscape phones, 576px jusque 767)";
    }


  }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    #resolution {
        background-color: #B53471;

        
    }
    
    #resolution::after {
        content: "Medium devices (tablets, 768px jusque 991)";
    }


 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    #resolution {
        background-color: #1289A7;

        
    }
    
    #resolution::after {
        content: "Large devices (desktops, 992px jusque 1199)";
    }



  }


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    #resolution {
        background-color: #EE5A24;

        
    }
    
    #resolution::after {
        content: "Extra large devices (large desktops, 1200px and up)";
    }



 }