:root{
	
	/*Change --warning-visible: to 'visible' for testing/staging sites, change to 'hidden' for live site*************/
	/*Change --warning-height: to 'max-content' for testing/staging sites, change to '0px' for live site.************/
	/***************To do the above 2 steps, swap the commenting of the groups below.***********************************************/
	
	/*--warning-visible: visible;  
	--warning-height: max-content;*/
	
	--warning-visible: hidden;  
	--warning-height: 0px;
	
	
	/*Hamburger menu variables*/
	
	--bar-width: clamp(25px, 6vw, 40px);
	--bar-height: calc(var(--bar-width)/8.333);
	--hamburger-gap: calc(var(--bar-width)/8.333);
	--foreground: black;
	--background: white;
	--hamburger-margin: 18px;
	--animation-timing: 100ms ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

*{
	box-sizing: border-box;
	margin: 0; /* One number = all four sides, two numbers = top/bottom | left/right, three numbers = top | left/right | bottom, four numbers = top | right | bottom | left */
	padding: 0; /* One number = all four sides, two numbers = top/bottom | left/right, three numbers = top | left/right | bottom, four numbers = top | right | bottom | left */

	/*outline: 2px solid #f00 !important;*/ /*For testing, this puts an outline around every element- really neat!*/
}

/*Used to take precedence over injected stylesheets (which can come from user/browser extensions).  Classes left out are Google symbols, otherwise they don't work as intended.*/
*:not(:is(.player, .gear-menu, .material-symbols-outlined, .md-adj, .material-icons)){

	font-family: "Roboto Flex", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
	/*For below to work, the variation name (slnt, wdth, GRAD, etc.) and matching value has to be included in the list of attributes of the font file <link> in the HTML page. */
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

html{
	/*height: 100vh;*/
	background-color: whitesmoke;
	margin: 0 2px;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /*IOS notch adjustment*/
	/*outline: 20px solid #f00;*/
	outline-offset: -2px; /*Used to display html outline on screen- otherwise it is outside the viewer.  See * above.*/
	/*border: 10px dashed hotpink;*/ /*for testing*/
	/*border: 20px solid transparent;*/
}

body{
	/*background: none;*/
  min-height: 100vh;
	-webkit-text-size-adjust: 100%; /*Prevents funky text resizing, landscape to portrait, in IOS.*/
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
}

.hamburger-menu {
	--x-width: calc(var(--hamburger-height) * 1.41421356237); /* square root of 2 */
	
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	/*background: red;*/
	width: max-content;
	position: absolute;
	top: var(--hamburger-margin);
	right: var(--hamburger-margin);
	z-index: 5;
	cursor: pointer;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 5px;
	transform-origin: left center;
	transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing);
}

.hamburger-menu input{
	appearance: none;
	pointer-events: none;
}

.hamburger-menu input:checked{
	opacity: 0;
	width: 0;
}

.hamburger-menu:has(input:checked)::before{
	rotate: 45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after{
	rotate: -45deg;
	width: var(--x-width);
	translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu:has(input:checked) + .overlaymenu{
	opacity: 100%;
	pointer-events: auto;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu:has(input:focus-visible)
{
	border: 1px solid var(--background);
	box-shadow: 0 0 0 1px var(--foreground);
}

/*Menu that displays when Hamburger menu is selected*********************/
.overlaymenu{
	padding: 0.5rem 1rem;
	padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
	min-height: 100vh;
	width: clamp(180px, 30vw, 320px);
	position: absolute;
	right: 0;
	background-color: dodgerblue;
	z-index: 4;
	opacity: 0%;
	pointer-events: none;
	border: 1px solid black;
  box-shadow: -8px 8px 15px;
}

a{
	display: inline-block;
	margin: 2px;
	padding-left: 10px;
	padding-right: 10px;
	white-space: nowrap; /*Prevents menu items from wrapping*/
	font-size: clamp(16pt, 3vw, 24pt);
	justify-self: center;
	text-decoration: none;
	color: black;
}

a:hover, a:focus{
	background-color: #e9d07a;
}

.page-link:hover, .page-link:focus{
	background-color: #becaeb88;
}

hr{
	margin: 7px 0px;
}

co-container{
	display: grid;
	min-height: 100vh;
	grid-template-areas:
	"logo"
  
  "products"
	
	"main"
	
	"select"
	
	"start"
	
	"history"
	
	"footer";
	
	grid-template-columns: 1fr;
	gap: 3px;
    grid-template-rows: max-content max-content max-content max-content max-content max-content auto;
}

co-warning{
	display: block;
	visibility: var(--warning-visible);
	height: var(--warning-height);

}

a.warning, hr.warning{
		visibility: var(--warning-visible);
}

co-logo{
	grid-area: logo;
	display: flex;
	align-items: start;
}

co-products{
  grid-area: products;
  display: flex;
  justify-content: center;
}

.image-container{
  margin: auto;
  text-align: center;
}

main{
	grid-area: main;
}

.heading{
	margin-left: 15px;
	font-size: clamp(12pt, 4vw, 24pt);
	font-weight: bold;
}

.howtoselect{
	grid-area: select;
	background-color: rgba(255, 165, 0, .5); /*orange;*/
}

.howtostart{
	grid-area: start;
	background-color: rgba(0, 128, 0, .5); /*green;*/
}

.howtohistory{
	grid-area: history;
	background-color: rgba(0, 0, 255, .5); /*blue;*/
}

footer{
	grid-area: footer;
	display: flex;
	font-size: clamp(12pt, 3vw, 16pt);
	align-self: end;
	margin-bottom: 5px;
	margin-left: 10px;
}

/*Top of page info************************************/
ul.a{
	padding-left: 2em;
}

ul.a li{
	    margin-bottom: 5px;
}

ul.a li span{
    position: relative;
    left: -8px;
}

.iccanchor{
	position: relative;
}

.icc{
	position: absolute;
	left: 125px;
	top: 0;
}

/*Bottom of page How Tos************************************/

.howtoheading{
	font-size: clamp(12pt, 7vw, 20pt);
	margin-bottom: 1rem;
	text-align: center;
	border: black solid 3px;
}
ul.b{
	font-size: clamp(12pt, 6vw, 18pt);
	color: black;
	text-align: center;
	list-style-type: none;
}

li.b{
	margin-bottom: .5rem;
}

.height25px{
	min-height: 25px;
}

/*CodeOperative main logo***********************************/
img.logo{
	width: clamp(150px, 40vw, 300px);
	height: auto;
	z-index: 2;
	margin-left: 10px;
}

img.codesimulator-logo{
	width: clamp(110px, 80vw, 500px);
	height: auto;

}

img.dddcodes-logo{
	width: clamp(110px, 30vw, 400px);
	height: auto;
}

/*How To images*********************************************/
img[class^="size-"], [class*=" size-"]{
	padding-bottom: 2rem;
	height: auto;
}

img.size-25{
	width: 25%;
}

img.size-25b{
	width: 25%;
}

img.size-50{
	width: 50%;
}

img.size-65{
	width: 65%;
}

img.size-75{
	width: 75%;
}

img.size-90{
	width: 90%;
}

.co-control-button{
	background-color: dodgerblue;
	color: white;
	border-radius: 7px;
	border-color: black;
	font-size: clamp(14pt, 5vw, 20pt);
	width: fit-content;
	margin-left: 5px;
	padding-left: 5px;
	padding-right: 5px;
	height: max-content;
}

/*ICC Preferred Education Provider logo********************/
img.icc{
    width: clamp(75px, 30vw, 150px);
	height: auto;
}

/*********************************************************/
/*Media queries*******************************************/
/*********************************************************/

@media screen  and (min-width: 1023px){
	
  img.size-25b{
	width: 12.5%;
  }
  
  img.size-50{
	width: 25%;
  }
	
}

@media screen  and (min-width: 1200px){
	
  co-container{
	grid-template-areas:
	"logo     logo     logo"
  
  "products products products"
	
	"main     main     main"
	
	"select   start    history"
	
	"footer   footer   footer";
	
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3px;
    grid-template-rows: max-content max-content max-content max-content auto;
  }	
	
  img.size-25b{
	width: 12.5%;
  }
  
  img.size-50{
	width: 25%;
  }
  
  #bullet1::after{
	  content: " Learn better, faster, (and funner!) Leave no code unturned."
  }
}