: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 '0' 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: 0;
	
	/*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{
	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%;
}

.bg-image{
    background-image: url('./RoughScreenShot_Lightened15.png');
    background-repeat: no-repeat;
	  background-position: center;
    background-size: cover;
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.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::after
{
	content: "\aMenu";
  white-space: pre;
}

.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{
  content: ""; /*Removes 'Menu' so it doesn't appear rotated*/
	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 0;
	
}

/*Grid management***********************************************************************/
/*******************************GRID MANAGEMENT*****************************************/
/***************************************************************************************/
co-container{
	display: grid;
	min-height: 100vh;
  max-height: 100vh;
	grid-template-areas:
	"logo        logo"
	
	"main        main" 
	
	"audio        audio"

	"dddmodel     dddmodel" 
	
	"controls     controls" 
	
	"instructions instructions"
	
	"footer       footer";
	
	grid-template-columns: 1fr 1fr;
	gap: 3px;
  grid-template-rows: max-content max-content max-content auto max-content max-content max-content;
}

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

/*
.material-symbols-outlined{ /*Google icons- may add gear icon for settings

}*/

icc-logo{
	grid-area: icclogo;
	display: none;
	margin-top: 0;
	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);
}

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

.bullet1, .bullet2{
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(14pt, 8vw, 42pt); /*Not using text, but may in the future. Save for ref.*/
	text-align: center; /*Not using text, but may in the future. Save for ref.*/
}

.sublist{
	font-size: clamp(10pt, 6vw, 12pt);
	margin-left: 40px;
}

main div sup{ /*TM marks*/
  font-size: clamp(12pt, 6vw, 24pt);
}

co-audio{
	display: flex;
	grid-area: audio;
	font-size: clamp(12pt, 5vw, 30pt);
	background-color: dodgerblue;
	align-items: center;
	justify-content: center;
	vertical-align: center;
	color: white;
}

.player{
	display: inline;
  background: none;
  border: none;
  padding: 3px 0 0; /*top right/left bottom*/
  cursor: pointer;
  outline: inherit;
}

.material-icons.md-adj{ /*Audio play and pause icons. Need addtl class in order for font-size to work. See Google info for details.*/
  font-size: clamp(12pt, 12vw, 42pt);
	color: white;
}

#audiotext{
	display: none;
	justify-content: center;
	height: fit-content;
	width: 95vw;
	position: absolute;
	left: 2.5vw;
	bottom: 50px;
	padding: 5px;
	border-radius: 10px;
	background-color: dodgerblue;
	color: white;
	z-index: 6;
	font-size: clamp(10pt, 5vw, 12pt);
}

@keyframes animturny{
	
	from {transform: rotateY(0deg);}
	to {transform: rotateY(360deg);}
}

.tagline{
	background-color: orange;
  text-align: center;
  margin: auto;
	width: fit-content;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
  border-radius: 3px;
	transform: rotateY(0deg);
	animation-name: animturny;
	animation-duration: 4s;
	animation-delay: 28s;
	font-size: clamp(12pt, 5vw, 14pt);
}

co-dddmodel{
	grid-area: dddmodel;
	display: flex;
	justify-content: center;
	border: 1px solid black;
}

model-viewer { /*https://github.com/google/model-viewer/discussions/3140*/
  --progress-bar-color: transparent;
}

.view-button {
  background: #fff;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8);
  display: block;
  font-family: Futura, Helvetica Neue, sans-serif;
  font-size: 12px;
  font-weight: 700;
  max-width: 128px;
  overflow-wrap: break-word;
  padding: 0.5em 1em;
  position: absolute;
  width: max-content;
  height: max-content;
  transform: translate3d(-50%, -50%, 0);
}

co-controls{
	grid-area: controls;
	display: flex;
	justify-content: center;
	font-size: clamp(12pt, 5vw, 24pt);
	margin-left: 5px;
}

.co-control-button{
	background-color: dodgerblue; /*#e9d07a*/
	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;
}

co-instructions{
	grid-area: instructions;
	font-size: clamp(12pt, 5vw, 20pt);
}

.instructions{
  display: inline-block;
}

.key{
  display: inline-block;
	text-align: right;
	font-weight: bold;
	padding-left: 20px;
}

.value{
  display: inline-block;
	text-align: left;
}

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

/*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, 600px);
	height: auto;
  vertical-align: text-top;
}

img.dddcodes-logo{
	width: clamp(110px, 50vw, 300px);
	height: auto;
  vertical-align: text-top;
}

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

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

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

/*DEPRECATED Save for ref****************************************/
img.checkmark{
	width: clamp(20px, 7vw, 250px);
	height: auto;
	min-height: auto;
}

/*Maintenance page settings*****************/
#maintenance{
  padding: 0 10px;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;	
}

img.maint-codesimulator-logo{
	width: clamp(110px, 80vw, 1200px);
	height: auto;
  vertical-align: text-top;
}

img.maint-dddcodes-logo{
	width: clamp(110px, 50vw, 600px);
	height: auto;
  vertical-align: text-top;
}

/*Page border***DEPRECATED- Save for ref for now***************************/
#top, #bottom, #left, #right{
	background-color: #229ac8;
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	position: fixed;
	z-index: 1;
}

#left, #right{
	top: 0;
	bottom: 0;
	width: 1.75vw;
}

#left{
	left: 0; 
}

#right{
	right: 0; 
}

#top, #bottom{
	left: 0;
	right: 0;
	height: 1.75vw;
}

#top{
	top: 0;
}

#bottom{
	bottom: 0;
}


/*Media Queries******************************************************/
@media (orientation: landscape) and (max-width: 899px){
	
  
  co-container{

	grid-template-areas:
	"logo      dddmodel"
	
	"main      dddmodel" 
	
	"audio     dddmodel"
  
  "controls  dddmodel"
	
	"footer    instructions";
	
	grid-template-columns: 1fr 1fr;
	gap: auto;
	row-gap: 5px;
  grid-template-rows: max-content max-content max-content max-content auto;
  height: 100vh;
  }
  
  co-dddmodel{
  margin-top: 10px;
  }

  img.logo{
	width: clamp(75px, 25vw, 200px);
	height: auto;
	z-index: 2;
	margin-left: 10px;
  }
  
  img.codesimulator-logo{
	width: clamp(110px, 45vw, 275px);
  }

  img.dddcodes-logo{
	width: clamp(110px, 28vw, 250px);
	height: auto;
  vertical-align: text-top;
  }
  
  .bullet1, .bullet2{
	font-size: clamp(12pt, 4.5vw, 24pt);
  }
  
  main div sup{ /*TM marks*/
		font-size: clamp(12pt, 2vw, 24pt);
  }
  
  co-audio{
	font-size: clamp(12pt, 2.5vw, 32pt);
  }
  
  #audiotext{
	left: auto;
	height: fit-content;
	width: 45vw;
	right: 2.5vw;
	font-size: clamp(10pt, 2vw, 12pt);
  }
  
  .material-icons.md-adj{ /*Audio play and pause icons*/
    font-size: clamp(12pt, 4vw, 24pt);
  }
  
  co-controls{
	font-size: clamp(12pt, 3vw, 16pt);
  margin-left: 0;
  margin-top: 10px;
  }
  
  .co-control-button{
	font-size: clamp(12pt, 3vw, 16pt);
	height: max-content;
  }
  
  co-instructions{
	font-size: clamp(12pt, 3vw, 16pt);
	justify-content: center;
  }

  .key{
    display: inline-block;
	text-align: right;
	font-weight: bold;
	padding-left: 10px;
  }

  .value{
    display: inline-block;
	text-align: left;
  }
  
  footer {
  align-self: center;
  margin-bottom: 0;
  margin-top: 0;
  }

  img.maint-codesimulator-logo{
	width: clamp(110px, 60vw, 1200px);
	height: auto;
  }

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

/*Changes for landscape tablet only vs. smaller device landscape from media query above*/
@media screen and (orientation: landscape) and (min-width: 900px) and (max-width: 1024px){

  co-container{

	grid-template-areas:
	"logo        dddmodel"

	"main       dddmodel" 
	
	"audio        dddmodel"
	
	"controls     dddmodel" 
	
	"instructions dddmodel"
	
	"icclogo     dddmodel"
	
	"footer       dddmodel";
	
	grid-template-columns: 1fr 1fr;
	gap: auto;
	row-gap: 20px;
  grid-template-rows: max-content max-content max-content max-content max-content max-content 1fr;
  }	
	
	icc-logo{
	display: flex;
  }
}

@media screen and (min-width: 1025px){
	
  co-container{

	grid-template-areas:
	"logo        dddmodel"

	"main       dddmodel" 
	
	"audio        dddmodel"
	
	"controls     dddmodel" 
	
	"instructions dddmodel"
	
	"icclogo     dddmodel"
	
	"footer       dddmodel";
	
	grid-template-columns: 1fr 1fr;
	gap: auto;
	row-gap: 40px;
  grid-template-rows: max-content max-content max-content max-content max-content max-content 1fr;
  }	
	
	icc-logo{
	display: flex;
  }
  
  .orbit::after{
	content: "/left mouse button drag";
  }
  
  .pan::after{
	content: "/right mouse button drag";
  }
  
  .zoom::after{
	content: "/mousewheel";
  }

  .recenter::after{
	content: "/left mouse button click";
  }  
}