@font-face {
  font-family: 'nombre';
  src: url(archivo.otf);
}
@font-face {
  font-family: 'Apercu';
  src: url(Apercu.otf);
}
@font-face {
  font-family: 'hp1006x8';
  src: url(Px437_HP_100LX_6x8.ttf);
}
@font-face {
  font-family: 'hIBM_Model3x';
  src: url(Px437_IBM_Model3x_Alt2.ttf);
}
@font-face {
  font-family: 'Rainbow100';
  src: url(Px437_Rainbow100_re_80.ttf);
}

body {
background-color: #f85c67;
display:inline-block;
margin:0;
	width: 100%;
	height: 100%;
align-items: center;
}
#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
display: inline-block;
}
h1 {
  font-family: 'Rainbow100';
  position: sticky;
  top:0%;
  left:16%;
  font-size: 4.5vmax;
  margin-left: 16%;
}
h2, h3 {
  padding:3%;
  border-style: inset;
  border:5px 5px;
  position: relative;  top:19%;
    left:10%;
    max-width: 45%;
  font-family: 'hIBM_Model3x';
  margin-bottom:6%;
}
#content {

display: inline-block;

}

.outputSample {

}

#content {


}


/* Aquí van los estilos que imprime el bot */
#output {
  margin-left: 6%;
align-items: center;
	font-size:1.7vmax;
	font-family: 'Apercu';

}

#grammar {

}
p {
  font-family: 'hIBM_Model3x';
  font-size: 1.8vmax;
  margin-left: 23%;
padding: 0%;
width: fit-content;
border: 2px;
border-style: solid;
}

img{
	width: auto;
	height: 78vh;
	margin:2%;
display: inline;
	background-color: #808080;
	border: 5px gray;
  border-style:  outset;


}
#datacenter {
height: 80vmax;
width: 80vmax;
  margin: 0;
display: inline-block;
  margin-bottom: 5%;
}



/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  img {
    width: 100%; 
    max-width:740px;/* The width is 100%, when the viewport is 800px or smaller */
    height:auto;
  }

#datacenter {
height: auto;
width: 80vw;}
#output {
  margin-left: 1%;}}