* {
  outline: 0;
/*    
  will-change: transform, opacity;*/
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    .biggie {
      font-size: 2em;
    }
}

body {
	font-family: "Avenir Next", "Avenir", Helvetica, sans-serif;
	background-color: #666666;
	padding: 0em;
	-webkit-text-size-adjust: none;
}

.biggie {
/*	text-align: right; */
	text-align: left;
/*	display: block; */
/*	font-size: 5em; */
/* 	font-size: 2em;  */
	font-size: 1.5em;
	color: white;
}
#yturl {
/*	text-align: right; */
/* border: solid; */
	text-align: left;
	display: inline-block;
/*	font-size: 5em; */
	font-size: 1em;
	color: rgb(0, 0, 0);
}
#notes {
	/* theoretical notes styling */
/*	text-align: right; */
	text-align: left;
	display: block; 
/*	font-size: 5em; */
	font-size: 1em;
	color: rgb(255, 255, 255);
	/*	
	background-color: rgb(175, 174, 175);
	*/
}
#annotate {
	/* annotate link styling */
	float: right;
	display: inline-block;
	/* border: solid; */
	font-size: 1em;
	color: rgb(0, 0, 0);
	text-align: right;
	text-align-last: right;
}
#ytxtalign {
	text-align: left;
	color: rgb(208, 208, 210);
	font-size: 1.5em;
}

hr {
/*	
	margin-top: 10px; 
	margin-bottom: 10px;
*/
/*	border-bottom: solid 1px #FFFFFF; */
	border-bottom: 1px dotted #FFFFFF;
	}
	
/* https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form/15600151#15600151 */
DIV.table {
    display:table;
}
FORM.tr, DIV.tr {
    display:table-row;
}
SPAN.td {
    display:table-cell;
}

/* https://www.studytonight.com/css-howtos/how-to-create-two-div-elements-with-same-height-side-by-side-in-css */
.row {
  display: flex; /* equal height of the children */
  margin-bottom: 25px;
}
.col {
  flex: 1; /* additionally, equal width */
  padding: .4em;
  /* border: solid; */
  margin: 2px;
}
.colLeft {
  padding: .4em;
  /* border: solid; */
  margin: 2px;
    width: 710px;
}
.sectiongrp {
    white-space: pre-line;
}
 /* unvisited link */
a:link {
/*  color: rgb(237, 249, 85); */
    color: rgb(255, 255, 255); 
/*  color: rgb(81, 165, 248); */
}
a.neutral:link {
  font-weight: 550; 
	color: rgb(244, 255, 116);  
/*  color: rgb(0, 0, 0);*/
  text-decoration: none;
}

a.neutral:hover {
	font-weight: 550; 
	color: rgb(248, 237, 0);
	text-decoration: none;
}

/* visited link */
a:visited {
 /* color: red; */
/*  color: rgb(255, 255, 255); */
/*    color: rgb(237, 249, 85);  */
        color: rgb(255, 255, 255); 
}

/* mouse over link */
a:hover {
/*  color: rgb(0, 0, 0);  */
      color: rgb(237, 249, 85);  
}

/* selected link */
a:active {
  color: rgb(55, 165, 18);
} 
input[type=text] {
	font-size:24px;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 1em 1em;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
display: block;
}
.upme {
  background-color: rgb(231, 199, 0);
  border: none;
  color: white;
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
display: block;
}
.downme {
  background-color: rgb(74, 73, 186);
  border: none;
  color: white;
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
display: block;
}
textarea {
	font-family: "Avenir Next", "Avenir", Helvetica, sans-serif;
	font-size: large;
	text-align: left;
	overflow: hidden;
	width: 100%;
	height: 300px;
	padding: 12px;
	box-sizing: border-box;
/*	
	background-color: #f8f8f8;
	*/
	font-size: 18px;
	resize: none;
}
.beefy {
	text-align: left;
	font-size: 2.5em;
	color: white;
}
.none {
	text-decoration: none;
}