.center {
  margin: auto;
  width: 80%;
  padding: 10px;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="center"] {
    width: 100%;
  }
}

/* make text more readable, increase line distance */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

.center-text{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div> */

/* make toc smaller */
.toc-container{
    line-height: 1.0;
    font-size: 0.8em;
}

/* any h3 child of container */

.toc-container h3{
    margin: 10px;
}

.toc-container ul li{
    font-size: 0.8em;
    line-height: 1.2;
}

.description-container{
	/* float: right; */
	/* width: 33%; */
}

.video-container{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin: 40px;
	margin: 40px;
	pointer-events: none;
}

.body-text-styles{
	font-size: 25px;
}

.main-title{
	font-size: 70px;
}

.red-background {
	background-color: red;
}

.blue-background {
	background-color: blue;
}
a {color:blue; text-decoration: none;}
a:visited {color:blue;}
a:hover {color:blue; text-decoration: underline;}
a:active {color:blue}

code{
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 3px;
	margin-right: 3px;
    background-color: #f0f0f0;
	border-radius: 3px;
	font-family: monospace;
	font-size: 80%;
}

.code-block{
	margin-top: 20px;
	margin-bottom: 20px;
    background-color: #f0f0f0;
}

.desc{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: xx-large;
}

.youtube-video { 
	margin: auto;
	/* width: 80%; */
	width: 50%;
	/* padding: 10px; */
}