@layer local{

/* Old */
div {
	margin:auto;
	max-width:90vw;
}





/* MathCell */
.mathcell,.mathcell-square {
	border: none;
	margin: 25px auto;
	display: flex;
	flex-direction: column;
	line-height: 2.5;
	max-width: var(--maxWidth);
	padding-left: 2%;
	padding-right: 2%;
}
.mathcell {
	width: 100%;
	aspect-ratio: 2;
}
.mathcell-square {
	width: 100%;
	max-width: 6in;
	aspect-ratio: 2;
}

.slidecontainer {
	width:90%;
	margin: 0 auto;
}
input[type=range] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;
	background: lightblue;
	outline: none;
	opacity: 0.95;
	-webkit-transition: .2s;
	transition: opacity .2s;
	margin: 0px auto;
}



/* Slider */
 .slide-container {
  width: 100%;
 }
 .slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
 }
 .slider:hover {
  opacity: 1;
 }
 .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
  border-radius:15px;
 }
 .slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
  border-radius:15px;
 }
 /* Flex */
	div.grid-container {
		display: grid;
		grid-template-columns: 49.5% 49.5%;
		gap:1%;
		padding:1% 0;
	}
	.grid-container > p {
		width:100%;
		margin:2% auto;
	}
	.grid-container > div {
		width:100%;
		margin:auto auto;
	}
	
	@media screen and (max-width: 720px) {
		div.grid-container {
			grid-template-columns: 100%;
		}
		.grid-container > div {
			width:95%;
			margin:auto auto;
		}
	}

} /* End Local Layer */