/* Lexend - Regular */
@font-face {
  font-family: 'Lexend';
  src: url('/fonts/Lexend-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Lexend - Bold */
@font-face {
  font-family: 'Lexend';
  src: url('/fonts/Lexend-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Symbola */
@font-face {
  font-family: 'Symbola';
  src: url('/fonts/Symbola.woff2') format('woff2'),
       url('/fonts/Symbola.woff') format('woff'),
       url('/fonts/Symbola.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Math */
@font-face {
  font-family: 'Notosans';
  src: url('/fonts/NotoSansMath-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Fira Math */
@font-face {
  font-family: 'Firamath';
  src: url('/fonts/FiraMath-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible - Regular */
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible - Regular */
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible - Italic */
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-RegularItalic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Atkinson Hyperlegible - Bold */
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible - Bold Italic */
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-BoldItalic.otf') format('opentype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* OpenDyslexic - Regular */
@font-face {
  font-family: 'Opendyslexic';
  src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
       url('/fonts/OpenDyslexic-Regular.woff') format('woff'),
       url('/fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* OpenDyslexic - Italic */
@font-face {
  font-family: 'Opendyslexic';
  src: url('/fonts/OpenDyslexic-Italic.woff2') format('woff2'),
       url('/fonts/OpenDyslexic-Italic.woff') format('woff'),
       url('/fonts/OpenDyslexic-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;	
}

/* OpenDyslexic - Bold */
@font-face {
  font-family: 'Opendyslexic';
  src: url('/fonts/OpenDyslexic-Bold.woff2') format('woff2'),
       url('/fonts/OpenDyslexic-Bold.woff') format('woff'),
       url('/fonts/OpenDyslexic-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* OpenDyslexic - Bold Italic */
@font-face {
  font-family: 'Opendyslexic';
  src: url('/fonts/OpenDyslexic-Bold-Italic.woff2') format('woff2'),
       url('/fonts/OpenDyslexic-Bold-Italic.woff') format('woff'),
       url('/fonts/OpenDyslexic-Bold-Italic.otf') format('opentype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: myFirstFont;
  src: url(/fonts/lexendsemibold.ttf);
}

body.sans .mq-math-mode,
body.sans .mq-math-mode .mq-editable-field,
body.sans .mq-math-mode .mq-text-mode,
body.sans .mq-math-mode .mq-nonSymbola,
body.sans .mq-math-mode .mq-font *,
body.sans .mq-math-mode .mq-operator-name {
  font-family: "Notosans", "Firamath", sans-serif !important;
  font-style: normal !important;
  font-weight: normal !important;
}

body.sans .mq-math-mode var {
  font-family: 'Notosans', "Firamath", sans-serif !important;
  font-style: italic !important;
  display: inline-block !important;
  transform: translate(-1px, 0px);
}

body.sans .mq-large-operator > big {
  transform: translateY(-0.1em);
}

 *, *::before, *::after {
  box-sizing: border-box;
} 

html { margin: 0px }

html, body {
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  /* Optional, helps prevent layout shift 
  scrollbar-gutter: stable; */
}

input, textarea, select, button, div, span, option {	
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  /* background-color: inherit; */
}
select {
	background-color: var(--color1);
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
}

body {
  margin: 50px 0px 0px 0px;	
  font-family: Lexend, Atkinson, sans-serif;
  background-color: var(--color2);
  color: var(--color3);	
  min-height: 100vh; /* or 100dvh for newer browsers */
  display: flex;
  flex-direction: column;	
	overflow-x: hidden;
}
footer {
  margin-top: auto;
}

.content {
  flex: 1 0 auto; /* Grow and push the footer down */
  /* Ensure there's no overlap gap */
  margin-bottom: 0;
  min-height: calc(100vh - 50px);
  overflow-y: hidden;
}	



.navbar-top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color1);
  border-bottom: 2px solid black;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
  padding: 0 0px;
  /* margin? */
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 0px;
}

.navbar-top .dropbtn {
	height: 50px;
  	width: auto;
  	display: block;
  	box-sizing: border-box;
}

.navbar-top img.topimg, .navbar-top a {
  display: inline-block;
  color: var(--color5);
  text-align: center;
  padding: 0px 0px;
  border-radius: 25px;
  text-decoration: none;
  height: 50px;
  box-sizing: border-box;
}

.dropdown a {
	border-radius: 0px;
	box-sizing: border-box;
	display: flex;
}

.navbar-top a:hover, 
.dropdown:hover, .dropbtn:hover, .dropbtn:focus {
  background-color: var(--color4); 
}

.dropdown {
	position: relative;
  	display: flex;
  	align-items: center;
	z-index: 11;
}	

.dropdown-content {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  background-color: var(--color1);
  min-width: 160px;
  box-shadow: 5px 5px 10px var(--shadow);
  z-index: 11;
  flex-direction: column;
}

.dropdown-content.show {
  display: block;
} 

/* .show {display:block; } */

.dropdown-content a {
  color: var(--color5);
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}

.dropdown-content a:hover, button.up-to:hover {
  background-color: var(--color4);
}

div.menu-note {
	display: none;
	position: absolute;
	right: 0px;
	top: 50px;
	background-color: var(--color1);
	/* border-left: 2px solid black;
	border-bottom: 2px solid black; */
	box-shadow: 5px 5px 10px var(--shadow);
	z-index: 11;
}

button.close-note {
	display: none;
	position: absolute;
	margin: 0;
	right: 5px;
	top: 5px;
	border-radius: 20px;
	z-index: 11;
}
.close-note:hover {
  background-color: var(--color4);
}

footer {
    width: 100%;
    background-color: var(--color1);
    color: var(--color3);
    text-align: center;
    flex-shrink: 0;
    margin: 0;
    padding: 10px;
}
footer a {
	color: #15a44a;
}
footer a:visited {
	color: var(--color4);
}

button.tile {
	display: block;
	margin-left: auto;
	margin-right: auto;
    padding: 0.2em;
    border-radius: 0.1em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    border: none;
    color: var(--color1);
    cursor: pointer;
	box-shadow: 4px 2px 2px var(--shadow);
    background-color: var(--colorx);
    /* width: 30%; */
    font-size: 1.1em;
}

button.red {
	background-color: var(--colorn); /* EAI Algebra Tile Negative */
}

button.tile:disabled, 
button.tile[disabled]{
  border: none;
  background-color: #cccccc;
  color: #666666;
}

.button:disabled, 
.button[disabled]{
  border: none;
  background-color: #cccccc;
  color: #666666;
}

.button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 25%;
  text-decoration: none;
  background-color: #15a44a;
  color: white;
  padding: 10px 15px 10px 15px;
  border-radius: 10px;	
	margin-top: 15px;
    margin-bottom: 15px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.button-short {
	display: block;
	margin-left: auto;
	margin-right: auto;
  text-decoration: none;
  background-color: #15a44a;
  color: white;
  padding: 2px 5px 2px 5px;
  border-radius: 5px;	
	margin-top: 5px;
    margin-bottom: 5px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.button-short:disabled, 
.button-short[disabled]{
  border: none;
  background-color: #cccccc;
  color: #666666;
}

div.paper {
	display: none; 
	position: fixed; 
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0%);
	width: 80%; 
	z-index: 1; 
	padding: 10px;
	margin: 0;
	border: 1px solid #f1e9d2; 
	border-radius: 1px; 
	background-color: var(--color1);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	/* overflow-y: scroll; */
}

div.paper-container {
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px; /* new Sept 12 */
	height: auto;
	width: 100%; 
	max-width: 100vw;
	background-color: transparent;
	transition: margin-top 0.5s ease, height 0.5s ease;
}

.paper-placeholder {
  	visibility: hidden;
  	height: auto;
	padding: 10px;
}

div.paper-plain {
	display: flex;
	position: absolute; /* was absolute until tinkering on Sept 12 */
	/* max-height: 60svh; */
	top: 0px;
	left: 50%;
    transform: translate(62.5%, 0%);
	width: 80%; 
	min-width: 640px;
	z-index: 1; 
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
	border: 1px solid var(--color7); 
	border-radius: 1px; 
	background-color: var(--color1);
	box-shadow: 5px 5px 10px var(--shadow);
	transition: transform 0.5s ease;
}

/* .paper-plain:not(.enterRight):not(.exitLeft) {
  display: none !important;
} */

.paper-container.shifted {
	margin-top: 0px;
	/* height: calc(50svh - 179.6px); */
}

.paper-plain.enterRight {
	transform: translate(-50%, 0%);
}

.paper-plain.exitLeft {
	transform: translate(-162.5%, 0%);
}

.calculator {
	position: relative; /* Add if missing */
	display: none; /* initial hidden */
	margin: 0 auto; 
	margin-top: calc(50px - 60svh); /* offscreen above */
	width: 80%; 
	min-width: 640px;
	height: calc(60svh - 50px);
	margin-bottom: 0px;
	padding: 0;
	z-index: 9;
	/* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
	transition: margin-top 0.5s ease;
}

.calculator.show {
	display: block; 
}

.calculator.slide-in {
	display: block;
	margin-top: 0px;
}

button.up-to {
	display: none;
	position: fixed;
	right: 193.26px;
    transform: translate(50%, 0%);
	top: 51.6px;
	border-radius: 15px;
	padding: 0px 7px 2px 7px;
	border: 1px solid black;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}


button.slideRight, button.slideLeft {
	display: block;
	
	padding: 0;
	width: 50px;
	height: 25px; 
    /* line-height: 30px; */
	
	top: 0 ;
	/* transform: translateY(-50%); */
	position: absolute;
	
	z-index: 14;
	border: 0;
	font-size: 1.325em;
	background-color: transparent;
}


/* button.slideRight:hover, button.slideLeft:hover {
	background-color: hsla(0, 100%, 50%, 0.5); 
} */

button.slideRight {
	right: 0px;
	text-align: right;
}

button.slideLeft {
	left: 0px;
	text-align: left;
}

input[type='checkbox'] {
	width: 1.2em; 
	height: 1.2em;
	transform: translateY(0.2em);
	accent-color: var(--colorxy);
}

	
@media (max-width: 640px) {
	div.paper-container, div.paper-plain, .calculator {
		min-width: 240px;
		width: 100%;
	}
	button.slideRight, button.slideLeft {
		font-size: 2em;
	}
	/* 
	.paper-container.shifted {
	margin-top: 0px;
	}
	
	.calculator {
	margin-top: calc(50px - 80svh);
	height: calc(80svh - 50px);
	}
	*/
}