@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css?family=Tangerine&display=swap');

:root {
  --color_H_G: 120;
  --color_H_Y: 80;
  --color_H_R: 0;
  --cursorX: 0vw;
  --cursorY: 0vh;
  --font_family: Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
:root:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  background: radial-gradient(
    circle 25vmax at var(--cursorX) var(--cursorY),
    hsla(var(--color_H_G),100%,85%,0.25 ) 0%,
    hsla(var(--color_H_G), 25%,25%,0.125) 50%,
    hsla(var(--color_H_G),  0%, 0%,0.75 ) 100%
  )
}

html, body {
  background-color: hsla(var(--color_H_G),25%,12.5%,1);
  color: hsla(var(--color_H_G),65%,90%,1);
  cursor: default;
  font-family: var(--font_family);
  font-size: 12pt;
  line-height: 16pt;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1 { font-family: var(--font_family); font-size: 2.5em; letter-spacing: 2vh; font-weight: 600; }
h2 { font-family: var(--font_family); font-size: 1.8em; font-weight: 600; }
h3 { font-size: 2.25em;  font-weight: 600; }
h4 { font-size: 2.00em;  font-weight: 600; }
h5 { font-size: 1.50em;  font-weight: 600; }
h6 { font-size: 1.25em;  font-weight: 600; }
h7 { font-size: 1.125em; font-weight: 600; }
.title-corp {
  font-weight: 900;
}
#warning-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 2em;
  font-weight: 600;
  line-height: 2em;
  padding: 10px 35px;
  /*
  background-color: transparent;
  background-color: hsla(var(--color_H_R),50%,25%,0.75);
  color: hsla(var(--color_H_Y),100%,50%,1);
  border-color: hsla(var(--color_H_G),50%,50%,0.8);
  */
  background-color: hsla(var(--color_H_G),0%,0%,0.75);
  color: hsla(var(--color_H_G),0%,25%,1);
  border-color: hsla(var(--color_F_G),0%,25%,0.8);
  border-width: 2pt;
  border-style: solid;
  border-radius: 15px;
  box-shadow: 0px 0px  7px hsla(var(--color_H_G),25%,100%,1), 
              0px 0px 25px hsla(var(--color_H_G),25%,0%,0.9);
}
#warning-box{
  font-family: var(--font_family);
  background-color: rgba(148,0,0,0.9);
  color: rgba(255,255,0,1);
  border-color: rgba(232,232,0,9);
  box-shadow: 0px 0px 10px hsla(var(--color_H_G),25%,100%,1), 
              0px 0px 35px hsla(var(--color_H_G),25%,0%,0.95);
}
.heroe {
  font-family: var(--font_family);
  background-color: hsla(var(--color_H_G),100%,100%,0.125);
  text-align: center;
  padding: 60px 100px 25px;
}
div.heroe h1 {
  font-family: "Bangers", var(--font_family);
}
header {
  position: fixed;
  top: 0%;
  width: 100%;
  padding: 0px;
  background-color: transparent;
  color: hsla( var(--color_H_G),25%,75%,1 );
  background: linear-gradient(to bottom, hsla( 220,0%,0%,0.3 ) 65%, hsla( 220,50%,100%,0.05 ) 100% );
  box-shadow: 0px 5px 55px hsla(180,0%,0%,0.45);
}
footer {
  position: fixed;
  bottom: 0%;
  width: 100%;
  font-family: var(--font_family);
  font-size: 0.8em;
  letter-spacing: 0.125vh;
  line-height: 1.25em;
  text-align: center;
  padding: 10px 0px;
  background-color: transparent;
  background: hsla(180,100%,100%,0.125);
  color: hsla( var(--color_H_G),25%,75%,1 );
  box-shadow: 0px -5px 55px hsla(180,0%,0%,0.35);
}
p {
  padding: 0px;
  margin: 0px;
}
.table-info {
  font-size: 10pt;
  position: fixed;
  float: right;
  right: 0px;
  margin: 0px;
  padding: 0px;
  background-color: hsla(0,0%,0%,0.25);
  color: hsla(120,100%,50%,1);
}
.table-info table {
  margin: 0px;
  border-collapse: collapse;
}
.table-info table tr td {
  width: 80px;
  padding: 3px 8px;
  margin: 0px;
  border: 1px solid rgba(128,128,128,1);
}