a {
        color: #fff;
        text-decoration: none;
      }
      a:hover {
      	color: turquoise;
      }
      body {
        background-color: #1b6fb9;
        width: 1280px;
        margin: 0 auto;
        color: #ffffff;
        font-family: "Noto Sans", Arial;
      }
      code {
      	font-size: 16pt;
      }
      
      h1 {
        font-size: 24pt;
        text-align: center;
        margin: 0;
      }
      h2 {
        font-size: 16pt;
      }
	  h3 {
	  	font-size: 12pt;
	  	padding: 0;
	  	margin: 0;
	  }
 	  img {
 	  	vertical-align: middle;
 	  }
       strong {
      	color: turquoise;
      	font-weight: normal;
      }
  	  .left {
  	  	float: left;
  	  	width: 400px;
  	  }
  	  .left_js {
  	  	float: left;
  	  	height: 1280px;
  	  	width: 120px;
  	  	margin: 0;
  	  	padding: 20px;
  	  }
      }
      .clear {
        clear: both;
      }
 	  .index_head {
  	  	border-bottom: 2px dotted #fff;
  	  	border-top: 2px dotted #fff;
  	  }
 	  .index_left {
  		float: left;
  		height: 800px;
  		width: 120px;
  	  }
  	  .index_right {
  		float: right;
  		width: 660px;
  		height: 800px;
  	  }
  	  .logo {
  	  	margin: 0;
  	  	text-align: center;
  	  }
  	  .right {
  	  	float: right;
  	  	width: 220px;
  	  }
  	  .right_js {
  	    float: right;
  	    width: 600px;
  	    margin: 0;
  	    padding: 20px;
  	  }

/* p5JS styles start here, from https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01 */

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}


.highlight {
  border: 1px solid #ffff77;
}

/* collapsible, from https://codepen.io/markcaron/pen/RVvmaz */

/*
 CSS for the main interaction
*/

/* selects all input type checkbox with parent class accordion (parent means directly above) */
/* -100% of viewport width 
.accordion > input[type="checkbox"] { 
  position: absolute;
  left: -100vw; 
}
*/

/* selects content class inside accordion class 
hide vertical overflow 
.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}
*/

/* selects all content class preceded by checked input checkboxes with parent accordion 
.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}*/

/* selects label elements inside accordion class 
.accordion label {
  display: block;
}
*/

/*
 Styling
*/

/* font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif; 
body {
  font:  16px Helvetica, sans-serif;
  color: #333;
  font-weight: 300;
}


.accordion {
  margin-bottom: 1em;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-top: 0;
}

.accordion .handle {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;
}

.accordion label {
  color: #333;
  cursor: pointer;
  font-weight: normal;
  padding: 15px;
  background: #e8e8e8;
}

.accordion label:hover,
.accordion label:focus {
  background: #d8d8d8;
}
*/

/* :before creates 1st child of label 
.accordion .handle label:before {
*/
  /* font-family: 'fontawesome';
  content: "\f054";
  */
/*
  content:  "";
  display: inline-block;
  margin-right: 10px;
  font-size: .58em;
  line-height: 1.556em;
  vertical-align: middle;
}
*/

/* 
.accordion > input[type="checkbox"]:checked ~ .handle label:before { */
  /* content: "\f078"; */
/*
  content:  '**';
}
*/

/*
 Demo purposes only

*,
*:before,
*:after {
  box-sizing: border-box;
}
*/

/*
body {
  padding: 40px;
}

a {
  color: #06c;
}

p {
  margin: 0 0 1em;
}

h1 {
  margin: 0 0 1.5em;
  font-weight: 600;
  font-size: 1.5em;
}
*/

/*
.accordion {
  max-width: 65em;
}

.accordion p:last-child {
  margin-bottom: 0;
}
 */