:root{--bg:#ffce99;--card:#ffffff;--text:#111827;--accent:#0091e6;--header:#ff8000}

*{	box-sizing:border-box; }

header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}

h1{margin:0;flex:1; min-width:0;}

nav{display:flex;flex-wrap:wrap;gap:12px;}

nav{display:flex;align-items:center;}

.nav-toggle{display:none;}
    
@media(max-width:520px){
	.nav-toggle{
	display:block;
	position:fixed;
	top:16px;
	right:16px;
	z-index:1000;
	padding:10px 14px;
	border:0;
	background:var(--accent);
	color:#fff;
	border-radius:10px;
	font-weight:700;
}

	header{padding-top:56px;} /* room for fixed button  */

	nav{
		position:fixed;
		top:0;right:0;
		height:100vh;
		background:var(--card);
		box-shadow:-10px 0 25px rgba(16,24,40,0.18);
		padding:70px 16px 16px;
		transform:translateX(100%);
		transition:transform 0.2s ease;
		flex-direction:column;
		align-items:stretch;
		gap:14px;
		z-index:999;
		overflow:auto;
	}

	body.nav-open nav{transform:translateX(0);}

	nav a{
		margin-left:0;
		padding:10px 12px;
		border-radius:10px;
		text-align:center;
		background:var(--bg);
		text-direction:none;
	}

	nav a:hover{background:rgba(0,160,255,0.14);}
		
}

    nav a{margin-left:0;white-space:nowrap}

    main .card{
	background:var(--card);
	color:var(--text);
	display:block;
	padding:20px;
	border-radius:10px;
	box-shadow:0 6px 18px rgba(16,24,40,.06);
	width:100%;
	max-width:100%;
    }

footer{margin-top:18px;font-size:.73rem;color:#6b7280;text-align:right;}

.btn{
	display:block;
	width:max-content;
	margin:0 auto;
	padding:8px 14px;
	background:var(--accent);
	color:#fff;
	border-radius:8px;
	text-decoration:none;

	user-select:none;
	-webit-user-select:none;
	-ms-user-select:none;
	cursor:pointer;
}

.btn-sm{
	display:inline;
	width:max-content;
	margin:0 auto;
	/*Find instructions for setup and Lab #1 details at https://professorOwl.org/slideshow/
	/*font-size:.85rem;
	/*padding:8px 14px;*/
	background:var(--accent);
	color:#fff;
	border-radius:8px;
	text-decoration:none;

	user-select:none;
	-webit-user-select:none;
	-ms-user-select:none;
	cursor:pointer;
}

h2{color:var(--header);text-align:center;}

html, body{
	overflow-x:hidden;
	background:var(--bg);
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI, Roboto,"Helvetica Neue",Arial;
	color:var(--text);
	line-height:1.5;

	padding-top: 32px;
	background-image:url("/images/logo_0v2.png");
	background-attachment: fixed, scroll;
	background-repeat: no-repeat;
	background-position: 48px 12px, 100px 0;
	background-size: 120px, 120px;
}

.container{
	max-width:900px;
	margin:40px auto;
	padding:10px;
	width:100%;


}

 @media (max-width:520px){
	.container{margin:0;padding:0 12px}

	h1{font-size:1.25rem}
	
	header{flex-wrap:wrap;gap:12px}
	
	nav{flex:0 0 100%;margin-top:6px}
	
	nav a{margin-left:0}
}
	
.hamburger{
	display:block;
	width:22px;
	height:16px;
	 position:relative;
	background:transparent;
}

.hamburger::before,
.hamburger::after{
	content:"";
	position:absolute;
	left:0; right:0;
	height:2px;
	background:#fff;
	border-radius:2px;
}

.hamburger::before{ top:0; }      /* top line    */
.hamburger::after{ bottom:0; }    /* bottom line */
.hamburger{box-shadow:none;}      /* middle line */
.hamburger span{display:none;}
.hamburger::marker{content:"";}
.hamburger{--mid:7px;}
.hamburger{
  background-image: linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position: 0 var(--mid);
}

li.note{ list-style: none; }