/* ADB 22-07-2021 */
/* an asterisk ('*') preceding text targets all elements */
/* a point ('.') preceding text targets elements with a CLASS attribute */
/* a "class" attribute ("class=whatevernameyouchoose" can identify one or more elements on a page */
/* a hash ('#') preceding text targets elements with an ID attribute */
/* an "id" attribute ("id=whatevernameyouchoose") identifies a single element on a page */
/* to help older browsers render new HTLM5 elements as block-level */
/* header, section, footer, aside, nav, article, figure, figcaption {display: block; } */

/* UNIVERSAL SETTINGS */
*  {font-family: Verdana, Geneva, Arial, Noto Sans, sans-serif; color: black; font-size: 16px; font-weight: normal;}
/* SETTINGS FOR SPECIFIC SCREEN WIDTHS */
/* Macbook Pro 2560 x 1600, 16:10   */
/* Lenovo 1920 x 1080 */
@media screen and (min-width:1800px)
   {  body     {  background-color: palegoldenrod; }
      *        {  font-size: 100%; }
      .outerframe {  width: 60%; }
   }
/* Sony 1366 x 768, 16:9   */
@media screen and (min-width:1350px) and (max-width:1799px)
   {  body     {  background-color: azure; }
      *        {  font-size: 100%; }
      .outerframe {  width: 70%; }
   }
/* Fujitsu 1280 x 1024, 4:3.2 */
@media screen and (min-width:1200px) and (max-width:1349px)
   {  body     {  background-color: cornsilk; }
      *        {  font-size: 100%; }
      .outerframe {  width: 70%; }
   }
@media screen and (min-width:1000px) and (max-width:1199px)
   {
      body     {  background-color: mistyrose; }
      *        {  font-size: 100%; }
      .outerframe { width: 80%; }
   }
@media screen and (min-width:800px) and (max-width:999px)
   {  body     {  background-color: palegoldenrod; }
      *        {  font-size: 100%; }
      .outerframe { width: 90%; }
   }
/* Samsung J3 720 x 1280, 9:16   */
@media screen and (min-width:600px) and (max-width:799px)
   {  body     {  background-color: azure; }
      *        {  font-size: 90%; }
      .outerframe { width: 100%; }
   }
@media screen and (max-width:599px)
   {  body     {  background-color: white; }
      *        {  font-size: 90%; }
      .outerframe { width: 100%; }
   }
/* FRAMES */
/* OTHER PROPERTIES OF OUTERFRAMES IRRESPECTIVE OF RESOLUTION  */
.outerframe
   {  background-color: lightgreen;
      height: auto;
      border: 3px solid; border-color: black; border-radius: 20px;
      margin: 10px auto 10px auto;  }
.header
 {	background-color: seashell; text-align: center; font-size: 150%; font-weight: bold;
	   border: 2px solid; border-color: red; margin: 10px 2% 10px 2%; }
.footer
{  background-color: seashell; width: 96%; text-align: center;	font-size: 75%; font-weight: bold;
	   border: 2px solid; border-color: red; margin: 5px 2% 5px 2%; }
/* TEXTS */
.heading
{	background-color: seashell; width: 96%; text-align: center; font-size: 100%; font-weight: bold;
	   margin: 10px 2% 10px 2%; border: none; }
.subheading
{	background-color: seashell; width: 96%; text-align: center;	font-size: 100%; font-weight: normal;
      margin: 10px 2% 10px 2%; border: none; }


/* ALL UNRELIABLE BELOW */



.navigation
{  background-color: aliceblue;
	width: 90%;
	text-align: center;
   margin: 5px auto 5px auto;
	font-size: 125%; font-weight: bold;
	border: 2px solid; border-color: chartreuse; }

.innerframe {
	display: flex;
	flex-direction: row; }
.thinbox {
	width: 15%;
	border: 2px solid;
	border-color: yellow; }
.widebox {
	margin: 10px auto 10px auto;
	background-color: seashell;
	width: 90%;
	border: 2px dotted;
	border-color: red; }
.boxtext {
	font-size: 125%;
	margin: 10px 1% 10px 1%;
	text-indent: 2%; }
.largetext {
	font-size: 125%;
	text-align: center;
	color: black;
	margin: 5px auto 5px auto; }
.normaltext {
	font-size: 100%;
	text-align: center;
	color: black;
	margin: 2px auto 2px auto; }
.bold {
   font-weight: bold; }
a:hover
   {  color: crimson;   }

#top {
width: 90%;
margin-left: 5px:
background: burlywood;
}

#left {
width: 15%;
float: left;
margin-left: 5px;
padding: 5px;
background: yellow;
}

#right {
width: 75%;
padding: 5px;
margin-left: 15%;
background: lightgrey;
}