@media screen and (min-width: 320px) and (max-width: 480px){
    /* mobile devices */
    body {
      /*  background-color: tan; */
    }
}

@media screen and (min-width: 481px) and (max-width: 768px){
    /* small ipads and small android tablets */
    body {
      /*  background-color: teal; */
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){
    /* laptops and and small screens */
    body {
       /* background-color: orange; */
    }
    h1, h2{
        text-align: center;
       /* color: green; */
    }
    ul,li {
        text-align: center;
        /* color: white; */
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px){
    /* large screens and desktops */
    body {
      /*  background-color: green; */
    }
}

@media screen and (min-width: 1201px) and (orientation: landscape){
    /* large LCD screens and beyond */
    body {
      /*  background-color: magenta; */
    }
}