@font-face {
  font-family: 'oman';
  src: url(RomanAntique.ttf);
}
@font-face {
  font-family: 'apercu';
  src: url(Apercu.otf);
}
:root {
--main-bg-color:  black;
--main-bg-color1:  black;
--main-bg-color2:  black;
--main-bg-color3:  black;
--main-bg-color4:  black;
--main-bg-color5:  black;
--main-bg-color6:  black;
--main-bg-color7:  black;
--main-bg-color8:  black;
--main-bg-color9:  black;
--main-bg-color10:  black;
--main-bg-color11:  black;
--main-bg-color12:  black;
--main-bg-color13:  black;}


html:{
  box-sizing: content-box;
  width: 800px;
  height: 800px;
  max-width: 800px;
  max-height: 800px;
  overflow:none;

}

body {
  background-color: #2c302d;
  width: 100%;
  height: 100%;
  overflow: none;
}

#container {
	width: 800px;
	height: 800px;
  max-width: 800px;
  max-height: 800px;
  overflow:none;  overflow: none;
	margin: 0 auto;
  align-items: center;
  box-sizing: content-box;
}

#content {
	margin: 7px;
  box-sizing: content-box;
  width: 800px;
	height: 800px;  overflow: none;
  max-width: 800px;
  max-height: 800px;

  font-family:  'apercu';

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

.outputSample {
  overflow: none;
}



img {
  position:absolute;
   margin:0;
object-position: 100% 0;
  width:100%;
  height:100%;
  min-width: 1500px;
  min-height: auto;
  background-size: cover;
transform-origin: center;
  overflow: none;

  object-fit: cover;
}
#output {
  overflow: none;

  font-family:  'apercu';
align-content: center;
color: pink;
}

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

p{
  position: absolute;
  top:55%;
  left:4%;
  right:4%;
margin-bottom: 3%;

overflow: none;
text-align: center;
font-size: 5vw;
word-break: normal;
word-wrap: break-word;
line-height:  100%;
z-index: 1;
color:yellow;
text-shadow: 1px 1px black;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
  font-family:  'apercu';
}
 .ssatur {
 filter:saturate(var(--satur));
 transform: scale(var(--escala)) translateX(var(--transx)) translateY(var(--transY));

}
.ssatur2 {
   filter: saturate(var(--satur2))  hue-rotate(var(--huer));
    transform: scale(var(--escala)) translateX(var(--transx))translateY(var(--transY));
}
.ssatur3 {
   filter: saturate(var(--satur)) contrast(var(--contr));
    transform: scale(var(--escala)) translateX(var(--transx));
}
.filt1 {
filter: blur(var(--blurear)) brightness(var(--brigt)) contrast(var(--contr)) grayscale(var(--grey)) hue-rotate(var(--huer)) ;
 transform: scale(var(--escala)) translateX(var(--transx));
}
.filt2 {
filter:brightness(var(--brigt)) contrast(var(--contr)) grayscale(var(--grey)) hue-rotate(var(--huer))saturate(var(--satur3))  ;
 transform: scale(var(--escala)) translateX(var(--transx)) translateY(var(--transY));
}

.filt5 { filter: invert(var(--inverto)) saturate(var(--satur3)) contrast(var(--contr));
 transform: scale(var(--escala)) translateX(var(--transx)) translateY(var(--transY))}
.filt3 {
filter: grayscale(var(--grey))blur(var(--blurear))  saturate(var(--satur3));
 transform: scale(var(--escala)) translateX(var(--transx)) translateY(var(--transY));;
}
.filt4{ filter: invert(var(--inverto)) brightness(var(--brigt)) contrast(var(--contr)) saturate(var(--satur));
   transform: scale(var(--escala)) translateX(var(--transx));
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 500px) {
  #content, #output {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  p {
    font-size: 5vmax;
    margin-bottom: 3%;
    max-height: 55%;
  }
}