<picture>
      <!-- when lower than 600px -->
    <source srcset="imgsmall1x.png 1x, imgsmall2x.png 2x" media="(max-width: 37.5em)"> 
      <!-- using density switching with art directions -->
      <img srcset="img1x.png 1x, img2x.png 2x" alt="img">
  </picture>

  <!-- in srcset , the images are specified with their original width-->
  <img srcset="img1.png 300w, img1-large.png 1000w" 
       sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px">
  <!-- in sizes , the screen size is speicified with the image width to be used, last one being the default size -->

  // for resolution greater than 1px and 600px width or webkit is for safari browser
  @media (min-resolution: 192pi) and (min-width:600px) ,
      (-webkit-min-device-pixel-ratio: 2) and (min-width:600px){
      // image you want to set
      }

  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      //use only if the browser supports these properties
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: inherit; //from body element
  } 
  html{
      font-size: 62.5%; //defines 1rem everywhere as 10px
  }
  body{
      box-sizing: border-box;
      /*
      Define project wide font family and size in body selector
      */
  }