/*pergamino1*/

body {
    display:grid;
   overflow: none;
    max-height:100%;
    	width: 100%;
	height: 100%;
    
}
@font-face {
  font-family: Apercu;
  src: url(./Apercu.otf);
}
#container {
	width: 100%;
	height: 100%;

}

#content {


	width: 100%;
}


.outputSample {
  position: absolute;
  left:7%;
  right:7%;
  height:auto;
  top:4vmax;
overflow:visible;
		align-content: center;
	padding: 5px;
   word-break: break-all;
     grid-template-columns: fit-content(100%);
display:grid;
}

#content {

}

#output {
	font-size:16.7vmax;
line-height:.7;
  grid-template-columns: fit-content(100%);
z-index:1
  color:black;
 word-break: break-all;
 overflow: none;
 min-height:100%
 line-height: normal;
 display: grid;
 
}

#grammar {
		padding: 5px;
	margin: 10px;
}

#segundo {
   border-style:none;
position: absolute;
left:0%;
right:0%;
top:0%;
max-width: 100%;
z-level:-1;
overflow:none;
height:100%;


width: 100%;


  align-content: center;

}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  #output {
    	font-size:10.7vmax;
  }
  .outputSample {

    top: 12vmax;
  }
  iframe {
    max-height: 120%;
    height: 140%;
  }
}