html {
  /* prevent scrollbars */
  /*overflow: hidden; */
  float: none !important;
}


body {
  transform-origin: 0% 0% 0;
  transform: scale(.8, .8);
  margin: 0;
  padding: 0;
}

@media print {
  body {
    transform: scale(1.0) !important;
  }


  section {
    page-break-after: always;
    page-break-inside: avoid;
    position:relative;
    float:none;
  }

  /* Show everything when printing */

  .undisplay{
    display: block;
  }

  .invisible {
    visibility: visible;
  }


}

@media screen {
  .undisplay{
    display: none;
  }


  .invisible {
    visibility: hidden;
  }
}

section {
  /* don't change width, height when adding border or padding */
  box-sizing: border-box;
  position: relative;

  width: 1000px;
  /*height: 750px; */
  /*border: 1px solid red;*/

  /* prevent margin collapse */
  padding: 1px;


  margin-left:80px;
  margin-right: 80px;
}


iframe {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.pythontutor {
  width: 100%;
  transform-origin: 0 0;
  transform: scale(1.4, 1.4);
}


/* Centered text within a section */
section .c {
  text-align: center;
}

img.c {
  display:table;
  margin:0 auto;
}

.cx {
  display:table;
  margin:0 auto;
}

/* vertically center */
/* Does not work with printing, removed.
.cy {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
*/

.indent {
  margin-left: 80px;
}

.floatright {
  float:right;
}

.floatleft {
  float:left;
}

/* Colors */

.blue {
  color: blue;
}

.red {
  color: red;
}

.orange {
  color: orange;
}

.green {
  color: green;
}

.purple {
  color: purple;
}

/* Tables */

table, th, td {
    border: 1px solid black;
}


table {
  border-collapse: collapse;
}


th {
  text-align: center;
  padding-left: .5em;
  padding-right: .5em;
}

td {
  text-align: right;
  padding-left: .5em;
  padding-right: .5em;
}