@font-face {
  font-family: "Monaspace Argon";
  src: url("./MonaspaceArgon-Regular.otf") format("opentype");
}

* {
  /* vw adapts the width to the screen  */
}
/* STYLES FOR BODY AND <pre> */
body {
  font-family: "Monaspace Argon", sans-serif;
  font-size: 0.7vw;
}

pre {
  width: 100%;
}
/* STYLES FOR <a> TAG AND BLUE HOVER EFFECT */
a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: blue;
}

/* BLACKBOX STYLES SO IT'S BLACK */
.blackBox {
  background-color: black;
  color: white;
  position: absolute;
  display: none;
}
/* Initially hidden display:none; */
/* SIZES AND POSITIONS OF EACH BOXES */
/* width:<size>px and height:<size>px */

#blackBoxReadMe {
  width: 30ch;
  padding: 2ch;
  top: 168ch;
  left: 267ch;
}
#blackBoxGame {
  padding: 2ch;
  top: 146ch;
  left: 326ch;
}
#blackBoxlolly {
  padding: 10px;
  top: 152ch;
  left: 84ch;
}
#blackBoxlexico {
  padding: 2ch;
  top: 100ch;
  left: 207ch;
}
#blackBoxDelirium {
  padding: 2ch;
  top: 214ch;
  left: 177ch;
}
#blackBoxepi {
  padding: 2ch;
  top: 193ch;
  left: 293ch;
}
#blackBoxdeus {
  padding: 2ch;
  top: 129ch;
  left: 280ch;
}
#blackBoxgyrate {
  padding: 2ch;
  top: 170ch;
  left: 28ch;
}
#blackBoxPilfer {
  padding: 2ch;
  top: 149ch;
  left: 17ch;
}
#blackBoxmisery {
  padding: 2ch;
  top: 47ch;
  left: 100ch;
}
#blackBoxDomain {
  padding: 2ch;
  top: 48ch;
  left: 21ch;
}
#blackBoxAllo {
  padding: 2ch;
  top: 15ch;
  left: 28ch;
}
#blackBoxPeevish {
  padding: 2ch;
  top: 140ch;
  left: 189ch;
}
#blackBoxPonder {
  padding: 2ch;
  top: 50ch;
  left: 149ch;
}
#blackBoxFugitive {
  padding: 2ch;
  top: 122ch;
  left: 294ch;
}
#blackBoxpers {
  padding: 2ch;
  top: 91ch;
  left: 107ch;
}
#blackBoxvalance {
  padding: 2ch;
  top: 76ch;
  left: 223ch;
}
#blackBoxtimbre {
  padding: 2ch;
  top: 21ch;
  left: 264ch;
}
#blackBoxindent {
  padding: 2ch;
  top: 99ch;
  left: 350ch;
}
#blackBoxargonaut {
  padding: 2ch;
  top: 55ch;
  left: 260ch;
}
#blackBoxarchi {
 padding: 2ch;
  top: 2ch;
  left: 316ch;
}
#blackBoxjejune {
  padding: 2ch;
  top: 35ch;
  left: 122ch;
}

/* textjejune
blackBoxjejune */

/* BOX HOVER CONNECTION (id) body:has(<a tag id>:hover) <blackbox id> (remember to add #)  */
body:has(#textReadMe:hover) #blackBoxReadMe {
  display: block;
}
body:has(#textjejune:hover) #blackBoxjejune {
  display: block;
}
body:has(#textarchi:hover) #blackBoxarchi {
  display: block;
}
body:has(#textargonaut:hover) #blackBoxargonaut {
  display: block;
}
body:has(#textindent:hover) #blackBoxindent {
  display: block;
}
body:has(#texttimbre:hover) #blackBoxtimbre {
  display: block;
}
body:has(#textvalance:hover) #blackBoxvalance {
  display: block;
}
body:has(#textGame:hover) #blackBoxGame {
  display: block;
}
body:has(#textpers:hover) #blackBoxpers {
  display: block;
}
body:has(#textlolly:hover) #blackBoxlolly {
  display: block;
}
body:has(#textlexico:hover) #blackBoxlexico {
  display: block;
}
body:has(#textDelirium:hover) #blackBoxDelirium {
  display: block;
}
body:has(#textepi:hover) #blackBoxepi {
  display: block;
}
body:has(#textgyrate:hover) #blackBoxgyrate {
  display: block;
}
body:has(#textdeus:hover) #blackBoxdeus {
  display: block;
}
body:has(#textmisery:hover) #blackBoxmisery {
  display: block;
}
body:has(#textpilfer:hover) #blackBoxPilfer {
  display: block;
}

body:has(#textdomain:hover) #blackBoxDomain {
  display: block;
}
body:has(#textallo:hover) #blackBoxAllo {
  display: block;
}
body:has(#textpeevish:hover) #blackBoxPeevish {
  display: block;
}
body:has(#textponder:hover) #blackBoxPonder {
  display: block;
}
body:has(#textfugitive:hover) #blackBoxFugitive {
  display: block;
}