@font-face {
  font-family: press;
  src: url('PressStart2P-Regular.ttf');
}

@font-face {
  font-family: abel;
  src: url(./Abel-Regular.ttf);
}

body {
width: 100%;

  background-color: #aed2ff;
}
#container {

}

#content {
  top:18%;
	margin: 5%;
margin-left: 18%;
	width: 80%;
position: absolute;

align-content: center;
 line-height: 115%;
}

.outputSample {

}

.title{
  top:1%;
  width:100%;
  position:absolute;
  height: 19%;
  font-size: 4.4vmax;
  font-family: 'press';
  display: flex;
align-items: center;
justify-content: center

}

#result {
	font-family: 'press', monospace;
  color:red;

}


#output {
	font-size:1.7vmax;
  line-height: 1.3;
	font-family: 'courier', monospace;
font-kerning: normal;


}

#grammar {

}

#tuiter {
    position:absolute;
    top:96%;
    left:90%;
    bottom:1%;
    font-size:1.3vmax;
    
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  #content {
margin-left: 6%;
top:25%; 
  }

  #output {

    font-size:1.7vmax;
    line-height: 1.3;

  }
}