: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-image: url('../RoughScreenShot_Lightened15.png');*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/*background-color: snow;*/
	background-color: #dcdcdc;
	margin: 0px 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: 0px;
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;
}

hr{
margin: 7px 0px;
}

/*GRID********************************************************/
co-container{
display: grid;
grid-area: container;
grid-template-areas:
"user      user      user      user      user"
"logo      logo      logo      logo      logo"
"cslogo    cslogo    cslogo    cslogo    cslogo"
"main      main      main      main      main"
"footer    footer    footer    footer    footer"
;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: max-content max-content max-content 1fr max-content; /*fit-content for last row value gives invalid value error in Chrome dev*/
min-height: 100vh;
}

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;
}

cs-logo{
	grid-area: cslogo;
	margin-left: auto;
	margin-right: auto;
}

.codesimulator-select{
align-self: center;
margin-left: auto; 
margin-right: 20px;
margin-top: 30px;
font-size: clamp(1.5rem, 8vw, 3rem);
}


.trademark{
  font-size: clamp(1.25rem, 6vw, 2rem);
}

icc-logo{ /*Keep for possible future adding of this logo.*/
	grid-area: icclogo;
	display: none;
	margin-top: 0px;
	justify-content: center;
}

/*Tagline may or may not be used.  Keep for possible future use.*/
co-tagline{
	grid-area: tagline;
	display: flex;
	justify-content: center;
	font-size: clamp(16pt, 8vw, 48pt);
}

co-user{
grid-area: user;
display: flex;
font-size: clamp(12px, 2.5vw, 24px);
background-color: rgba(255, 255, 0, 0.5);
justify-content: space-between;
align-items: center;
padding: 0 10px;
}

co-user>div{
margin: 5px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px gray;
color: black;
}

co-user>div>a{
	padding: 0 .5rem;
	font-size: clamp(12px, 2.5vw, 24px);
	}


main{
	grid-area: main;
  margin-left: auto;
	margin-right: auto;
	text-align: center;
}

main h4{
  text-decoration: underline;
}

main div{
	float: left;
}

main div img{
    width: clamp(75px, 7rem, 345px);
	aspect-ratio: 345/425;
}

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

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

img.codesimulator-logo{
	width: clamp(110px, 50vw, 500px);
	height: auto;
  /*vertical-align: text-top;*/
}

/*ICC Preferred Education Provider logo********************/
img.icc{
	width: clamp(75px, 30vw, 150px);
	height: auto;
	min-width: 75px;
	min-height: auto;
}
/*********************************************************/
/*Media queries*******************************************/
/*********************************************************/
@media screen and (orientation: landscape){
	.messagecredits{
	font-size: clamp(12px, 5vh, 24px);
	}
	img.codesimulator-logo{
	width: clamp(100px, 50vh, 500px);
	}
	}