/* 
  maybe update the screen size boundaries to:

  1200+ Desktop
  992+ - Laptops
  768+ - Tablets
  0+ - Mobile
 // 240503 
  */

  /*
	Bereakpoint suggestions from YT clip
	2XL > 1536px - LARGE SCREEN
	XL > 1280 - LARGE LAPTOP
	LG > 1024 - SMALL LAPTOP
	MD > 768 - TABLET
	SM > 576 - PHONE LANDSCAPE
	XS > 376 - PHONE PROTRAIT

	Ref: YT 2504210
	CSS Media Queries & Responsive Design - The Most Detailed Explanation on YouTube!
	FutureFullStack
	1h16m52
  */
  
  
  /* For Desktops */
  @media only screen and (min-width:1200px) {
	h1, h2, h3, h4, h5, h6 {
		/* width: 35%; */
		width: var(--width-dsktp);
		/* width: 40rem; */
	}
	img {
		width: 62%;
		/* width: 50%; */
		/* width: 62%; */
		/* width: 40rem; */
		/* width: 90%; */
		/* border-radius: 1rem; */
	}	
	figcaption {
		/* /* 62%;	same a for image */
		/* width: 25rem; */
		/* width: 80%; */
		/* border: 1px white solid; */
		/* border-radius: 1rem; */
	}
	iframe {
		/* width: 80%; */
		/* width: 20rem; */
	}
	table {
		/* width: 35rem; */
		/* width: 35%; */
		width: var(--width-dsktp);
	}
	td { text-align: left; }
	th { text-align: center; }

	/* #myUL,  */
	#myInput {
		width: 30%;
	}
	#img_pghdr {
		/* width: 35%; */
		width: var(--width-dsktp);
		/* width: 20%; */
	}
	#img_pgbdy0 {
		width: 62%;
	}
	#img_pgPost {
		width: 100%;
	}
	#flyer {
		/* width: 35%; */
		width: var(--width-dsktp);
	}
	.mytabs {
		/* width: 35%; */
		width: var(--width-dsktp);
	}
	/* .mytabs tabs h3 {
		width: 80%;
	} */
	#img_pgftr {
		width: 80%;
	}
  }

 
  /* For Laptops */
  @media only screen and (min-width:992px) and (max-width:1199px) {
	h1, h2, h3, h4, h5, h6 {
		/* width: 50%; */
		width: var(--width-laptp);
		/* width: 40rem; */
	}
	img {
		/* width: 80%;		 */
		width: 50%;
		/* width: 40rem; */
		/* width: 90%; */
		/* border-radius: 1rem; */
	}	
	figcaption {
		/* /* 62%;	same a for image */
		/* width: 25rem; */
		/* width: 80%; */
		/* border: 1px white solid; */
		/* border-radius: 1rem; */
	}
	iframe {
		/* width: 80%; */
		/* width: 20rem; */
	}
	table {
		/* width: 35rem; */
		width: 50%;
	}
	td { text-align: left; }
	th { text-align: center; }

	#myUL, 
	#myInput {
		width: 43%;
	}

	#img_pghdr {
		width: 50%;
	}
	#img_pgbdy0 {
		width: 90%;
	}
	#img_pgPost {
		width: 100%;
	}
	#flyer {
		width: 50%;
	}
	.mytabs {
		width:50%;
	}
	#img_pgftr {
		width: 80%;
	}
	.noborders {
		width: 50%;
	}
  }


/* @media only screen and (max-width:800px) { */
	@media only screen and (min-width: 768px) and (max-width:991px) {
	/* For tablets: */
	h1, h2, h3, h4, h5, h6 {
	  /* width: 50%; */
	  width: var(--width-tblt);
	  /* padding: 10px; */
	  /* width: 40rem; */
	}
	img {
		/* width:50%; 62%; */
		/* width: 40rem; */
		width: 90%;
		border-radius: 1rem;
	}	
	figcaption {
		/* /* 62%;	same a for image */
		/* width: 25rem; */
		width: 80%;
		border: 1px white solid;
		border-radius: 1rem;
	}
	iframe {
		width: 80%;
		/* width: 20rem; */
	}
	table {
		/* width: 35rem; */
		width: 50%;
	}
	td { text-align: left; }
	th { text-align: center; }

	#myUL, 
	#myInput {
		width: 40%;
	}

	#img_pghdr {
		width: 50%;
	}
	#img_pgbdy0 {
		width: 90%;
	}
	#img_pgPost {
		width: 100%;
	}
	#flyer {
		width: 80%;
	}
	.mytabs {
		width:50%;
	}
	.noborders {
		width: 50%;
	}
  }

  
/* @media only screen and (max-width:600px) { */
	@media only screen and (max-width:767px) {
	/* For mobile phones: */
	h1, h2, h3, h4, h5, h6 {
	  /* width: 40%; */
	  width: var(--width-mb);
	  /* padding: 10px; */
	  /* width: 20rem; */
	}
	img {
		/*height:10%;*/
		border-radius: 1rem;
		/* not convinced */
		/* #img_pgbdy0 {
			width: 50%;
		} */
	}
	figcaption {
		/* width:80%;	same a for image */
		width: 90%; 
		border: 1px white solid;
		border-radius: 1rem;
	}
	iframe {
		width:80%;
		/* width: 20rem; */
	}
	table {
		width: 90%;
		/* width: 20 rem; */
	}
	td { text-align: left;}
	th { text-align: center; }

	#myUL, 
	#myInput {
		width: 80%;
	}

	#img_pghdr {
		width: 90%;
		/* width: 50%; */
	}
	#img_pgbdy0 {
		width: 90%;
	}
	#img_pgPost {
		width: 100%;
	}
	#flyer {
		width: 90%;
	}
	.mytabs {
		width:90%;
	}
	.noborders {
		width: 90%;
	}
}