@font-face {
  font-family: 'comic';
  src: url(comicsans.ttf);
}
@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: #0065e5;

margin:0;
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: 6.5vmax;
  margin-left: 66%;
}
h2, h3 {
  padding:3%;
  border-style: inset;
  border:5px 5px;
  position: relative;  top:19%;
    left:10%;
    max-width: 45%;
  font-family: 'hIBM_Model3x';

}
#content {



}

.outputSample {

}

#content {


}


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

}

#grammar {

}

p {
font-family:comic;
font-size: 2.7vmax;
-webkit-text-stroke-width: 1px;
       -webkit-text-stroke-color: yellow;
}
.texto1{
  position: absolute;
  left:7%;
  top:7%;
    max-width: 36%;
}
.texto2{
  position: absolute;
  left:66%;
  top:35%;
  max-width: 30%;
}
.texto3{  position: absolute;
  left:43%;
  top:65%;
    max-width: 36%;

}
.texto4{
  position: absolute;
  left:55%;
  top:75%;
    max-width: 30%;
}
img{
	width: 40%;
	height: 40%;
	margin:0%;
display: inline;
	background-color: #808080;



}

#button {
  max-width: 6vmax;
  max-height: 2vmax;
  margin-left: 1%;
}

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