/*	https://learn-the-web.algonquindesign.ca/topics/screen-sizes-cheat-sheet/
*/

/* Size classifications
		Extra small: < 400px
*/

html {
  font: normal 100%/1.3;
}

/*
  Add to anything that needs a bottom margin,
  for nice, cohesive vertical rhythm
*/
h1,
p {
  margin: 0 0 1.3rem;
}


/* Size classifications
		Small: 400px - 608px
*/

@media only screen and (min-width: 25em) {

  html {
    font-size: 100%;
    line-height: 1.3;
  }

  h1,
  p {
    margin: 0 0 1.3rem;
  }

}

/* Size classifications
		Medium: 608px - 960px
*/
@media only screen and (min-width: 38em) {

  html {
    font-size: 110%;
    line-height: 1.4;
  }

  h1,
  p {
    margin: 0 0 1.4rem;
  }
  
  #bild {max-width: 50vw}
/*	div { background-color: green; } */
	
}













/* Size classifications
		Large: 960px - 1448px
*/
@media only screen and (min-width: 60em) {

  html {
    font-size: 120%;
    line-height: 1.5;
  }

  h1,
  p {
    margin: 0 0 1.5rem;
 
  }
      #bild {max-width: 65vw} 

}

/* Size classifications
		Extra Large: >1440px
*/
@media only screen and (min-width: 90em) {

  html {
    font-size: 130%;
  }
      #bild {max-width: 80vw}

}