:root{
	--webBrown:   #463730;
	--webVBlue:   #3B429F;
	--webAirBlue: #759FBC;
	--webPeach:   #F5D6BA;
	--webTan:     #F49D6E;
}

body{
	background-color: WhiteSmoke;
}

h1{
	font-family:calibri;
	text-align:center;
	font-size: 36pt;
	margin-top:0;
}

p{
	max-width: 700px;
	min-width: 300px;
}

p.intro{
	font-family:Comic Sans MS, cursive, sans-serif; 
	font-size:14pt;
	margin:auto;
	text-align:center;
}

img.frame{
	border: 5px solid var(--webBrown);
	border-radius:10px;
}

#centeredDiv{
	display: flex; 
	justify-content: center;
}

a{
	color:var(--webVBlue);
}

a:hover{
	color: var(--webPeach);
}

a.thrm{
	font-weight: 900;
}

a.bib{
	font-weight: bold;
	text-decoration: none;
}

a.bib:hover{
	text-decoration: underline;
}

.references{
	text-indent: -36px; 
	padding-left: 36px;
}


div.topnav {
	text-decoration: none;
	background-color: var(--webTan);
	width: 95%;
	min-width:480 px;
	margin: auto;
	padding: 15px;
	border: 5px solid var(--webBrown);
	
}

a.topnav {
	text-decoration: none;
	font-family: Cambria Math; 
	color: #FAF4F0;
	font-size: 16pt;
	padding: 15px;
	
}

a.topnav:hover{
	background-color: var(--webPeach);
	color: #525252;
	border-radius: 5px
}

.alignright {
	float: right;
}

.maindiv {
	margin-left: 250px; /* Same as the width of the sidenav */
	margin-right: -40px;
	margin-top: 10px;
	/*height: 70vh;*/
	overflow:auto;
	min-height: 100px;
}


.sidenav {
  width: 200px; /* Set the width of the sidebar */
  height: 90%; /* Full-height: remove this if you want "auto" height
  /*top: 150; /* Stay at the top */
  left: 35px;
  background-color: var(--webAirBlue);
  color:white;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden;
  margin-top:5px;
  position:fixed;
  
}

/* The navigation menu links */
.sidenav a {
	padding: 1px 8px 1px 16px;
	text-decoration: none;
	font-family:calibri;
	background-color: var(--webAirBlue);
	color: var(--webVBlue);
	display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	background-color: var(--webTan);
	color: #f5f5f5;
}

/* When you choose navigation links, change their color */
.sidenav a:active {
	background-color: var(--webTan);
	color: #f5f5f5;
}
.sidenavlabel{
	color:white;
	background-color:#233d4d; 
	padding: 2px 16px 2px 6px;
	font-size: 16pt;
	font-weight:500;
}






/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 14px;}
} 

.accordion {
  background-color: var(--webAirBlue);
  color: var(--webVBlue);
  cursor: pointer;
  padding: 1px 8px 1px 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
  font-family:calibri;
}

.accordion:hover {
  background-color: var(--webTan);
  color: #f5f5f5;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}


.panel {
  padding: 0 0 0 20px;
  background-color: WhiteSmoke;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

#scroll {
	position:absolute;
	bottom:25px;
	right: 50px;
	height:44px;
	width:333px;
}

#backtotop {
	display:none;
	position: absolute;
	bottom:5px;
	right:5px;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: var(--webAirBlue);
	color: var(--webPeach);
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
}
	
#backtotop:hover{
	background-color: var(--webTan);
}

.theorem {
display: block;
font-style: italic;
	max-width: 700px;
	min-width: 300px;
}
.theorem:before {
content: "Theorem. ";
font-weight: bold;
font-style: normal;
}
.theorem[text]:before {
content: "Theorem " attr(text) ".  ";
}

.lemma {
display: block;
font-style: italic;
	max-width: 700px;
	min-width: 300px;
}
.lemma:before {
content: "Lemma. ";
font-weight: bold;
font-style: normal;
}
.lemma[text]:before {
content: "Lemma " attr(text) ".  ";
}

.proof {
display: block;
font-style: normal;
	max-width: 700px;
	min-width: 300px;
}


.proof:before{
    content:'Proof.\00a0\00a0';
    float:left;
    font-style: italic;
}

.proof:after {
	content:"\25FC \A";
	float:right;
}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}