.invis {
  display: none;
}

.crossout {
  text-decoration: line-through;
}

:focus {
  outline: 0 !important;
}

.chyron {
  height: 50px;
  overflow: hidden;
  position: relative;
  background-color: #000;
}

.chyron p {
  background-color: #000;
  font-weight: bold;
  white-space:nowrap;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translateX(100%);
  animation: scroll-left 16s linear infinite;
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-500%); }
}

.bigride {
  animation: shaky 0.05s infinite alternate;
}

.crunch {
  animation: cronch 0.4s infinite alternate;
}

@keyframes cronch {
  0% { transform: translate(-1px, 2px)}
  10% { transform: translate(0px, -1px)}
  20% { transform: translate(2px, 0px)}
  70% { transform: translate(0px, 2px)}
  90% { transform: translate(-1px, 2px)}
  100% { transform: translate(-2px, 0px)}
}

.rocknroll {
  animation: roll ease-in-out 3s infinite alternate;
}

@keyframes roll {
  from { transform: rotate(-1.2deg) }
  to { transform: rotate(1.2deg) }
}

.skree {
  color: #bb0b0b;
  font-weight: bold;
  font-size: 30pt;
  animation: shaky 0.03s infinite alternate;
  text-align: center;
}

@keyframes shaky {
  from { transform: translateY(1px); }
  to { transform: translateY(-2px) }
}

.incomprehensible {
  color: transparent;
  text-shadow: 0 0 7px #fff;
}

.incomprehensible b {
  color: #fff;
  text-shadow: 0 0 0;
}

.command {
  font-weight: bold;
  font-style: italic;
  animation: commando 2s infinite alternate;
}

@keyframes commando {
  0% { color: #fff }
  100% { color: #ff0000 }
}

#jot {
  color: #000;
}

.jet {
  background: linear-gradient(to left, #FFF, #FFF, #000, #000, #000, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thwoom linear 4s;
  background-size: 200% auto;
  font-weight: bold;
  background-repeat: no-repeat;
  background-color: #fff;
 -webkit-animation-fill-mode: forwards;
}

@keyframes thwoom {
  0% { background-position-x: 100% }
  70% { font-size: 30pt }
  100% { background-position-x: -100%; font-size: 32pt }
}

#octo {
  color: #bb0b0b;
  font-weight: bold;
}

.light {
  animation: lightshow 10s infinite;
  transition: text-shadow 0.1s;
}

@keyframes lightshow {
  0% { text-shadow: 0 0 0px #000}
  30% { text-shadow: 0 0 15px yellow}
  70% { text-shadow: 0 0 20px yellow}
  100% { text-shadow: 0 0 30px #000}
}

#traitor2{
  font-family: "Courier New", Courier, monospace;
}

#traitor{
  font-family: "Courier New", Courier, monospace;
}

.next{
  font-size: 14pt;
  font-weight: bold;
  float:right;
}

.prev{
  font-size: 14pt;
  font-weight: bold;
  float:left;
}

* {
  box-sizing: border-box;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  line-height:1.5;
}

a {
  color:#fff;
  text-decoration: none;
}

h2 {
  font-size:180%;
  text-align: center;
  color: #bb0b0b;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

body, html {
  padding: 3px 3px 3px 3px;
  background-color: #000;
  font-family: Verdana, sans-serif;
  font-size: 12pt;
  text-align: center;
}

strong {
  color: #fff;
  font-weight: normal;
}

p.boom {
  transition: font-size 0.1s;
}

p.booom {
  font-size:80pt;
  color: red;
  animation: shaking 0.08s ease-out 3 alternate;
}

@keyframes shaking {
  0% { transform: translateX(3px) }
  1% { transform: translateY(1px) }
  52% { transform: translateY(-2px) }
  100% { transform: translateX(-3px) }
}

@keyframes pinging {
0% { color: cyan}
15% { color: cyan}
100% { color: #000}
}

p.ping {
  font-style:italic;
  color:cyan;
  animation: pinging 7s infinite;
}

[class*="table_of_contents"] {
  font-size:17pt;
  font-weight:bold;
  text-align:left;
  margin-left:15%;
  line-height:2;
}

[class*="viewport"] {
  width: 100%;
}

@media only screen and (min-width: 1200px) {
  div.viewport { width: 42%; }
  div.table_of_contents { margin-left:30%;font-size:18pt;font-weight:bold;text-align:left; }
  #title { font-size: 5vw; }
}

div.main_page {
  position: relative;
  display: table;
  margin-bottom: 3px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 0px 0px 0px;
  box-shadow: 0 0 0 5px #100606;
  border-radius: 8px;
  background-color: #000;
  text-align: center;
}

div.page_header {
  border-radius: 8px;
  height: 80%;
  width: 100%;
  text-align: center;
  background-color: #000;
}

div.page_header span {
  margin: 15px auto 0px auto;
  color: #bb0b0b;
  text-shadow: 2px 2px 1px #000;
  font-size: 380%;
  font-weight: bold;
}

div.page_header img {
  margin: 3px 0px 0px 40px;
  border: 0px 0px 0px;
}

div.content_section {
  color: #FFF;
  background-color: #000;
  text-align: left;
}

div.content_section_text {
  transition: height 2s;
  text-align: left;
  margin-left: 6%;
  margin-right: 6%;
  color: #FFF;
}

div.content_section_container {
  margin: 15px 0px 15px 0px;
  text-align: center;
}

div.content_section_text ul, div.content_section_text li {
  padding: 4px 8px 4px 0px;
  list-style-type: none;
  margin-left:0px;
}

div.section_header {
  padding: 3px 6px 3px 6px;
  background-color: #8E9CB2;
  border-color: #000;
  border-width: 3px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 112%;
  text-align: center;
}

div.section_header_red {
  background-color: #CD214F;
}

div.section_header_grey {
  background-color: #9F9386;
}

div.section_header_green {
  background-color: green;
}

div.section_header_rust {
  text-shadow: 2px 2px 4px #0a0a56;
  background-color: #500303;
}

.floating_element {
  position: relative;
  text-align: center;
}

div.content_section_text p {
  margin-top:10px;
}

div.content_section_text a:link,
div.content_section_text a:visited,
div.content_section_text a:active {
  color: #FFF;
}

div.table_of_contents a:hover {
  color: red;
}

div.content_section_text a:hover {
  color: red;
}

div.copyright {
  color: #FFFFFF;
}

div.terminal {
  font-size:80%;
  border-width: 5px;
  text-align: left;
  padding:10px;
  padding-left:3%;
  margin:9px 0px 15px 0px;
  background-color: #2700c3;
  box-shadow: 2px 2px 3px #000;
  border-radius: 5px;
  font-weight: bold;
}

div.email {
  font-size:80%;
  border-width: 5px;
  text-align: left;
  padding:10px;
  padding-left:3%;
  margin:9px 0px 15px 0px;
  background-color: #f0f1e4;
  color: #000;
  box-shadow: 2px 2px 3px #000;
  border-radius: 5px;
}

p.gray {
  color: #565656;
}

div.email a,
div.email a:link,
div.email a:visited,
div.email a:active
{
  text-decoration:underline;
  color: blue;
}

div.email a:hover {
  text-decoration:underline;
  color: #bb0b0b;
}

div.quotebox {
  font-size:80%;
  border-width: 5px;
  text-align: left;
  padding:10px;
  padding-left:3%;
  margin:9px 0px 15px 0px;
  background-color:#082b0c;
  color: #03b31a;
  box-shadow: 2px 2px 3px #000;
  border-radius: 5px;
}

div.quotebox strong {
  color: #03b31a;
}

div.quotebox-danger {
  font-size:80%;
  border-width: 5px;
  text-align: left;
  padding:10px;
  padding-left:3%;
  margin:9px 0px 15px 0px;
  background-color:#210707;
  color: red;
  box-shadow: 2px 2px 3px #000;
  border-radius: 5px;
}

div.quotebox em {
  line-height:200%;
  font-size: 97%;
  font-style: normal;
  animation: blink 1s infinite alternate;
}

div.quotebox-danger em {
  line-height:200%;
  font-size: 97%;
  font-style: normal;
  animation: blinkred 2s infinite alternate;
}

@keyframes blink {
0% { color: #fff}
100% { color: #03b31a}
}

@keyframes blinkred {
0% { text-shadow: 0px 0px 0px; }
60% { text-shadow: 0px 0px 0px; }
100% { text-shadow: 0px 0px 3px; }
}