/* Richcolour Bollotext CSS (c) 2024. Hello you. Do not copy my css, yeah? */


/* CSS RESET FOR BROWSER CONSISTENCY */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* LINKS BLAND */

a:link { 
  text-decoration: none;
  background-color:#000000; 
} 
a:visited { 
  text-decoration: none; 
  background-color:#000000; 
} 
a:hover { 
  text-decoration: none; 
  background-color:#0000ff;
} 
a:active { 
  text-decoration: none; 
  background-color:#0000ff;
}


a.fastext-red:link {text-decoration: none; color: #ff0000; background-color:#000000;} 
a.fastext-red:visited {text-decoration: none; color: #ff0000; background-color:#000000;} 
a.fastext-red:hover {text-decoration: none; color: #000000; background-color:#ff0000;} 
a.fastext-red:active {text-decoration: none; color: #000000; background-color:#ff0000;} 

a.fastext-green:link {text-decoration: none; color: #00ff00; background-color:#000000;} 
a.fastext-green:visited {text-decoration: none; color: #00ff00; background-color:#000000;} 
a.fastext-green:hover {text-decoration: none; color: #000000; background-color:#00ff00;} 
a.fastext-green:active {text-decoration: none; color: #000000; background-color:#00ff00;} 

a.fastext-yellow:link {text-decoration: none; color: #ffff00; background-color:#000000;} 
a.fastext-yellow:visited {text-decoration: none; color: #ffff00; background-color:#000000;} 
a.fastext-yellow:hover {text-decoration: none; color: #000000; background-color:#ffff00;} 
a.fastext-yellow:active {text-decoration: none; color: #000000; background-color:#ffff00;} 

a.fastext-cyan:link {text-decoration: none; color: #00ffff; background-color:#000000;} 
a.fastext-cyan:visited {text-decoration: none; color: #00ffff; background-color:#000000;} 
a.fastext-cyan:hover {text-decoration: none; color: #000000; background-color:#00ffff;} 
a.fastext-cyan:active {text-decoration: none; color: #000000; background-color:#00ffff;} 

/* BODY */
html, body {
    font-family: JellyText,'Courier New', Courier, monospace; 
    margin: 0.5rem 0rem 0rem 0rem;
    padding: 0;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: 100vh; 
    background-color: #535050;
}




/* TELETEXT BOX */
.monospace-box {
    width: calc(46ch);  
    height: calc(34ch + 2rem); 
    font-size: 5.3vw; 
    line-height: 2ch; /* Match line height to font size for even spacing */
    /* padding: 1rem; */ 
    border-width: 0.5em 1em 1em 1em; 
	border-style: solid; 
	border-color: #000;
	background-color: #000;
    /* overflow: hidden;  Prevent overflowing content */
    white-space: pre; /* Preserve spaces and line breaks */
}

/* FONTS */
@font-face {
    font-family: JellyText;
    src: url('../../fonts/jellytext.woff2') format('woff2'),
        url('../../fonts/jellytext.woff') format('woff');
}

/* FONT COLOURS */
.tt-blue {color:#0000ff;}
.tt-red {color:#ff0000;}
.tt-magenta {color:#ff00ff;}
.tt-green {color:#00ff00;}
.tt-cyan {color:#00ffff;}
.tt-yellow {color:#ffff00;}
.tt-white {color:#ffffff;}

/* IMAGES */
 .bt-banner  {
	width: calc(42ch);
	height: auto;
    /* height: calc(3ch); */
      background-image: url('../../images/bollotext-banner.png');
      background-size: 100% 100%;  /* Stretch the image to fill the div */
      background-repeat: no-repeat; /* Prevent image repetition */
      background-position: left; /* Center the image */
	  padding: 1rem 0rem 0rem 0rem;
 }

/* MAKING LINES */
.line { 
	display: none;
	margin: 0;
	padding: 0;
}
.line.visible {
	display: block;
}