/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button:active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
/* pf w0 h0{
//
// }*/



/* make the canvas fill its container */
/*#codeRunning-canvas { */
codeRunning-canvas {
        width: 100%;
        height: 100%;
        display: block;
      }

.zoomClass{
            zoom: 100%;
  color: red;
            background-color: #01F9F9;
            width: 800px;
            height: 80px;
        }

/* firefox */
.zoom50 {
            zoom: 100% ; /* 50%;*/
            color: red;
            background-color: #00F9F9;
            width: 1000px ; /*500px ; 800px;*/
            height: 300px ; /*250px ; 300px;*/    
        }
.zoom100 {
            zoom: 100% ; /*25%; */
            color: blue;
            background-color: #00F9F9;
            width: 1000px ; /* 1000px;*/
            height: 560px; /*560px;*/
        }

chapter { 
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  /*padding: 1em;*/
  transform: scale(0.5);
  transform-origin: 0 0;
  transition: transform .6s;
  user-select: element ; /*none;*/
}
  

object { 
/*    width: 200px;
  height: 250px;
*/
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform .6s;
  user-select: element ; /*none;*/
}
/*  end firefox */

/* chrome */
.zoom200 {
  color: blue;
            zoom: 200%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }

/*end chrome*/

.large {
  transform: scale(2.0);
}        
        
.zoom300 {
  color: blue;
            zoom: 300%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }
        
        
img {
/*  width: 700px;
  height: 550px;*/
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  /*object-fit: none;*/
}
/*
#myImg {
  object-position: 1px; 
}
*/
/*
#object-position-2 {
  object-position: 100% 10%;
}
*/