html{font-size:23px;}
body{background-color:white;margin:0;font-family:Georgia;}
a{text-decoration:none;color:blue;}
a:visited{color:blue;}
#heading{display:none;}
	/*background-color:#14162d;
	color:#19aec1;
	text-align:center;
	margin: 0;
	box-sizing:border-box;
	display:flex;
	font-size:1rem;
	padding:0.5rem;
	height:100%;
	font-family: Courier New;
	font-weight:normal;
}*/
figcaption{
    font-size:0.6rem;
    text-align: center;
}
figure{
    padding-bottom: 10px;
}
#menuformobile{	
	display:flex;
	flex-direction:row;
	padding:0;
	position:sticky;
	top:0;
	z-index:100;
	height:1.5rem;
	box-shadow:3px 3px 8px #070707;
	/*border-top:1px solid gray;*/
}
#menubutton,#homebutton {
	width:50%;
	background-color:#14162d;
	color:white;
	text-align:center;
	font-size:0.75rem;
	padding:.2rem;
}

#method_menu{
	box-sizing:border-box;
	display:none;
	width:100%;
	max-height:95vh;
	overflow:auto;
}
img{
	margin:0;
	padding:0;
}
/*******************ACCORDION*********************/
.accordion {
  background-color: #99ff99;/*#dcdcef;*/
  color: #202346;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 0.7rem;
  transition: 0.4s;
  border-top-style:none;/*solid;*/
  border-top-width:1px;
  font-family:Georgia;
  box-shadow:3px 3px 6px #aaaaaa;
  margin:1px 0px;
}
.active{
	background-color: #14162d;/*#ccc;*/
	color:white;
} 
.accordion::after {
  content: '\002B';
  color: #000;
  /*color:white;*/
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active::after {
  content: "\2212";
  color:white;
}
.panel {
  padding: 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size:0.6rem;
  opacity:0.9;
}
.panel ol{margin:0.4rem;padding-left:1rem}
.panel ol li{padding:2px;height:auto}
.panel ol li a{color:#14162d}
/*******************************************************************/
#container{
	display:flex;
	flex-direction:column;
}
#left-sidebar{
	display:flex;
	margin:0;
	padding:0;
	font-size:0.7rem;
	position:fixed;
	top:1.5rem;
	z-index:100;
	justify-content:left;
}
figure{
	padding-top:10px;
	margin:0;
}
main{
	display:flex;
	flex-direction:column;
}
#methods{
	max-width:100%;
	padding:1vw;
}

#main_heading{
	text-align:center;
	font-size:1rem;
	background-color:white;
	margin:0.3rem;
}
#contentMenu{
	width:100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
}
.contentButton{
	background-color: #dcdcff;
	box-sizing:border-box;
	padding:2px 4px 2px;
	margin:2px;
	font-size:0.7rem;
	/*width:25%;*/
	border: 1px solid white;
	font-weight:regular;
	color:black;
	text-align:center;
	box-shadow:3px 3px 6px #aaaaaa;
    min-width:40px;
}
#contentMenu a:visited{
	color:black;
}
.article p{
	/*padding-top:2rem;*/
	font-size:0.7rem;
	text-align:justify;
	margin:0.2rem;
	
}
.with-indent{
	text-indent:20px;
}
h5.codeHeading{
	text-align:center;
	box-sizing:border-box;
	margin-top: 3px;
	margin-bottom: 0px;
	padding:1px;
	color : #14162d;
	font-family: courier;
	font-size:0.9rem;
	border:1px solid #14162d;
	box-shadow:6px 6px 5px #aaaaaa;
	background-color:white;
}
pre{
	font-size:0.6rem;
	overflow:auto;
	box-shadow:6px 6px 5px #aaaaaa;
	border:1px solid #14162d;
	background-color:white !important;
    font-family: courier/* !important;*/
}
.output{
	background-color:black !important;
	width:100%;
	padding-top:10px;
	border-style:none;
	color:white; 
}
			
#flowchart{
	box-sizing:border-box;
	width:100%;
	overflow:auto;
	padding:5%;
}
canvas{
	
	max-width:100%;
	box-shadow:6px 6px 5px #aaaaaa;
	height:auto;
}
#graphGIF{
	max-width:100%;
	padding:0;
	margin:0;
}
video{
	max-width:100%;
}
#sketch-holder{
	max-width:100%;
	/*box-shadow:6px 6px 5px #aaaaaa;*/
	height:auto;
}

#right-sidebar{
	
	margin:0;
	padding:10px;
	font-size:0.7rem;
	text-align:center;
}
footer{
	display:flex;
	flex-direction:row;
	background-color:#14162d;
	min-height:50px;
	padding:0;
}
footer a {
	width:100%;
	box-sizing:border-box;
	margin:0;
	padding:12px;
	color:lightblue;
	font-size:0.5rem;
	text-align:center;
}
footer a:visited{color:lightblue;} 
/*--------------FOR VIEWPORT WIDTH GREATER THAN 768 PIXELS--------------------*/
@media screen and (min-width:768px){
	body{
		margin-left:0%;
		margin-right:0%;
	}
	header{
		height:3.5rem;
		background-color:#14162d;
		display:flex;
		justify-content:center;
	}
	#heading{ 
		background-color:#14162d;
		color:#19aec1;
		text-align:center;
		margin: 0;
		box-sizing:border-box;
		display:flex;
		font-size:2rem;
		padding:0.5rem;
		height:100%;
	}
	#caption{
		font-size:1rem;	
	}
	#menuformobile{
		display:none;
	}
	#container{
		display:flex;
		flex-direction:row;
	}
	main{
		width:60%;
		padding:10px;
		flex-direction:column;
		order:0;
		min-height:720px;
	}
	#left-sidebar{
		top:0;
		display:flex;
		width:20%;
		margin:0;
		padding:10px;
		border-right-style:solid;
		border-right-width:1px;
		position:relative;
	}
	#method_menu{display:block;width:100%;max-height:200vh}
	#right-sidebar{width:20%;}
	footer{flex-direction:row;}
	footer a{padding:17px;}
	#methods{padding:10px;}
	.accordion {background-color: #eeeef7;font-size:0.75rem;}
	.active{color:#eeeef7;background-color:#14162d;}
	.accordion:hover {color:#eeeef7;background-color:#14162d;}
	.accordion:hover::after{color: white;} 
	.active:hover{background-color: #eeeef7;color:#14162d;}
	.active:hover::after{color:#14162d;}
	.panel{font-size:0.65rem;}
	.panel ol li{padding:2px;}
	.panel ol li a:hover{color:blue;}
}