body {
    box-sizing: border-box;
    background-color: dodgerBlue;
    font-family: Arial, Helvetica, Calibri, sans-serif;
    font-size: 16px;
    overflow: visible;
    -webkit-flex: 5;
  }
  h1 { color: white;  }
  h2 { color: black;  }
  h3 { color: darkGrey;}

section { /* display: -webkit-flex; */
 /* display: flex; */
    flex-direction: column;}

article { 
    -ms-flex: 5;
    text-align: center;
    padding: 10px;}

nav {
    -ms-flex: 5;
    padding: 10px;
    color: black;
}
    
main {/* font-size: 2vw; */
    /*  text-align: center; */
      margin: 20px; }

footer { background-color: #0099cc;
         color: #ffffff;
         text-align: center;
         font-size: 1.9vw;
         clear: left;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
} 

header { background-color: #9933cc;
         color: #ffffff;
         font-size: 1.4vw;
         text-align: center;
         padding: 12px;
}

/* button { color: black;
         border-radius: 12px;
         background: #73AD21;
         margin: 3px;
         font-size: 1.5em;} */

button {
	background-color: #BA5DEF;
	background-color: rgba(0,125,255,0.4);
	color: white;
	height: 7vh;
	width: 23%;
	margin-bottom: 0.7%;
	margin-left: 2%;
	font-size: 1.5em;	
	border: 2px solid black;
	padding: 1.1%;
	float: left;
	display: block;
	}
         
  
button:hover{
  background-color: yellow;
  color: black;
}

li     { font-size: 1.5em; }
label  { font-size: 1.5em; }
input[type="submit"] { font-size: 1.4em; }
main { font-size: 1.5em; }
ul   { font-size: inherit; }

/* === COLORS === */
.blue {background-color: blue; color: white;}
.green{background-color: green;}
.red{background-color: maroon;color: white;}
.purple{background-color: blueviolet; color: white;}
.orange{background-color: orange;}
.yellow{background-color: yellow; color: black;}
.indigo{background-color: indigo; color: white;}

a  { font-size: inherit;}

input[type="file"] { font-size: 1.2em; }

.but-cont-col { display: flex;
                flex-direction: column;
                justify-content: center;
} /* mainly a basic container for buttons */

.but-cont-row { display: flex;
                flex-direction: row;}
                
.selected { display: block; }  /* For panels/sections that are selected via the nav bar              */


/* === TOPNAV === */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav .active {
  background-color: darkblue;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/*
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
*/
/* === SCREEN SIZE === */
/* should code for phone first - 
/* use em throughout? */
/* iPhone 12 is apparently 2532-by-1170 px NO portrait works at 600 width. Portrait is around 390 wide.
/* Surface Pro is 12nn x nnn
/* iPad is 820x1180 
/* Office curved is 2195 x 1235 */ 

    @media screen and (max-width: 600px) and (orientation: landscape) {
        body {overflow: visible;}
    }

	@media screen and (max-width: 400px) {
	    button { font-size:1.6em;     
		         width: 99%;}
		header { font-size: 4vw; }
		nav    { font-size: 2.8vw; }
		main   { font-size: 5vw; }
		footer { font-size: 3vw; position: fixed;}
		a      { font-size: 5vw; }
	}
	
	@media screen and (min-width: 401px) and (max-width: 900px) {
	    button { background-color: yellow;
	             color: black;
	             font-size:1.6em; 	    
		         width: 99%;     }
		header { font-size: 1vw; }
		nav    { font-size: 2.2vw; }
		main   { font-size: 4vw; }
		footer { font-size: 1.5vw; }
		article { padding: 1px;}
	}
	
	@media screen and (min-width: 901px) and (max-width: 1200px) {
		button { width:35%;
		         background-color: magenta;
                 margin: .4%;
		         font-size: 1.7em;  }  
		header { font-size: 1vw; }
		nav    { font-size: 1vw; }
		main   { font-size: 1.1em; }
		footer { font-size: 1vw; }
		article {margin: 1%; }	
	}

/* Surface */
	@media screen and (min-width: 1201px) and (max-width: 2189px) {
		button { width: 80%;
		         background-color: skyblue;
                 margin: .6% .15% ; 
		         font-size: 1.3em;
		         cursor: pointer;
		}
		header { font-size: 1em; }
		nav    { font-size: 1em; }
		footer { font-size: 1em; }
		article {margin: 1%; }	
		li     { font-size: 1em; }
		body   { overflow: hidden; }
	}
	
/* Office curved screen 2195 x 1235 */		
	@media screen and (min-width: 2190px) {
	    body   { background-color: pink; 
	             font-size: 1em;
	             overflow: hidden;
	            }
	    button { width:20%;
		         background-color: magenta;
                 margin: .2%;
                 margin-bottom: 20px;
		         }  
		header { font-size: 1em; }
		nav    { font-size: 1em; }
		main   { font-size: 1.6em; } 
		footer { font-size: 1em; }
		article {margin: 1%; }
 	}