/* Customize jsPsych's default canvas to fit the browser better */
.jspsych-content {
  max-width: 900px;
  text-align: center; /* Centered all text explicitly for both mobile and desktop */
  line-height: 1.6;
}

/* Base text formatting */
body {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px; /* A good, legible baseline starting point */
}

/* Markdown elements formatting (generated by showdown) */
h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

p {
  margin-bottom: 15px;
}

ul, ol {
  display: inline-block;
  text-align: left; /* Keep bullets aligned with each other but centered on screen */
}

li {
  margin-bottom: 8px;
}

/* 
===================================================
 MOBILE RESPONSIVENESS
=================================================== 
*/

/* On screens smaller than 600px (most phones) */
@media screen and (max-width: 600px) {
  body {
    /* 
      We make the base font size slightly larger on phones, OR 
      you can use relative text sizing! 
    */
    font-size: 20px; 
  }

  .jspsych-content {
    /* Give the text a little padding so it doesn't touch the very edges of the phone screen */
    padding: 0 15px; 
  }
}