*{
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(128,128,128);
    color: white;
    text-align: center;
    padding-top:100px ;

}

h1 {
    display: none;
}

/* Smartphone */
@media(max-width: 500px) {
body {
    background-color: yellowgreen;
}

#smartphone h1 {
    display: block;
  }
}

/* Tablet */ 
@media(min-width: 501px) and (max-width: 768px) {
   body {
    background-color: red;
   }

   #tablet h1 {
    display: block;
   }
}

/* Normal */
@media(min-width: 769px) and (max-width: 1200px) {
    body {
        background-color: #f90;
    }

    #normal h1 {
        display: block;
    }
}
/* widescreen */
@media(min-width: 1201px ) 
{
    body {
        background-color: black;
    }

    #widescreen h1 {
        display: block;
    }
}

/* landscape */ 
@media(max-height: 500px)
{
    body {
        background-color: orange;

    }
    #landscape h1 {
        display: block;
    }
}