.experiment { background-color: #F5F6F4; color: #0d1329; position: absolute; top: 10%; width: 90vw; border-radius: 7px; padding: 12px; margin: auto; left: 0; right: 0; }
.experiment-title { font-weight: bold; margin-bottom: 5px; }
.experiment-date { margin-bottom: 5px; font-size: 12px; font-family: 'Cutive Mono'; color: #444444 }
.canvas_style { border: 1px #444444 solid; }
.image_div {border: 1px #D1D1D1 solid; border-radius: 3px; padding: 5px; display: inline-block;}
.code-button {font-size: 18px; margin-bottom: 10px; background-color: #0d1329; color: #22FF00; border: 0; border-radius: 5px; padding: 5px 12px 5px 12px; }
.code-header {font-family: 'Cutive Mono'; font-weight: bold; font-size: 18px;}
.code-block {border: 1px solid #A0A0FF; border-radius: 2px; padding: 4px; transition: opacity 100ms ease-in-out; opacity: 0; visibility: hidden; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.code-block.hide {display: none}
.code-margin { margin: 0px;}
.control_container { font-size: 18px; display: inline-block; vertical-align: top; border-collapse:collapse;}
.control_container td { border: 1px solid #C0C0C0}
.control_container input[type=range] { width: 200px; }
.control_container input[type=text] { width: 60px; }
.control_head { text-align: center; font-weight: bold; }
.bordered_table td { border: 1px solid #999999; padding: 3px;}
.expln_image { vertical-align: top; }
.codes_and_formulas { font-family: 'Cutive Mono'; background-color: rgb(247, 232, 150)}
.upper_line { border-top: 1px solid #333333;}
.datatable {font-family: 'Cutive Mono'; font-size: 14px; overflow-y: scroll; height: 300px; display: block;}
.datatable th {font-weight: bold; border: 1px solid #d1d1d1; padding: 2px;}
.datatable td {border: 1px solid #d1d1d1; padding: 2px;}
pre code { font-size: 18px; word-wrap: break-word;}

/** PUT STYLES THAT ARE DEPENDENT ON DISPLAY SIZES HERE **/
/* Large desktop */
@media (min-width: 1008px) {
  .experiment { top: 10%; border-radius: 7px; padding: 12px; }
  pre code { font-size: 18px; word-wrap: break-word; white-space: pre-wrap; }
  .code-button {font-size: 18px; margin-bottom: 10px; border-radius: 5px; padding: 5px 12px 5px 12px; }
  .control_container { font-size: 18px; }
  .control_container input[type=range] { width: 200px; }
  .control_container input[type=text] { width: 60px; }
  .control_head { text-align: center; font-weight: bold; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 641px) and (max-width: 1007px) {
  .experiment { top: 7%; border-radius: 5px; padding: 10px; }
  pre code { font-size: 16px; word-wrap: break-word; white-space: pre-wrap; }
  .code-button {font-size: 16px; margin-bottom: 7px; border-radius: 3px; padding: 4px 10px 4px 10px; }
  .control_container { font-size: 16px; }
  .control_container input[type=range] { width: 150px; }
  .control_container input[type=text] { width: 45px; }
  .control_head { text-align: center; font-weight: 600; }
  .expln_image { max-width: 200px; max-height: 200px; }
  .datatable {font-size: 12px; height: 200px; }
  .experiment-date { font-size: 11px; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 640px) {
  .experiment { top: 7%; border-radius: 5px; padding: 5px; }
  pre code { font-size: 14px; word-wrap: break-word; white-space: pre-wrap;}
  .code-button {font-size: 14px; margin-bottom: 5px; border-radius: 3px; padding: 3px 8px 3px 8px; }
  .control_container { font-size: 14px; }
  .control_container input[type=range] { width: 50px; }
  .control_container input[type=text] { width: 30px; }
  .control_head { text-align: center; font-weight: 400; }
  .expln_image { max-width: 120px; max-height: 120px; }
  .datatable {font-size: 11px; height: 200px; }
  .experiment-date { font-size: 10px; }
}