:root{
background-color: black;
  font-size: 12pt;
  --header-bg:#000000;
  --nav-bg:#4cf4ff;
  --article-bg:#000000;
  background-color:#000000;
  --border-color:#E0E0E0;
  --sidebar-text-color:#ec33ec; /*no colour box*/
  --article-text-color:#ffffff;
  --article-heading-color:#000000;
  --nav-link-color:#ff06c8;
  --darker-border-color:#ec33ec;
}
div.newHeader{
  align-content: center;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  height:169px;
}
.subtitles{
   image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
    align-content: center;
    height:35px;
}
.subtitle {
  width: 100%;
  border:1px solid var(--darker-border-color);
  background: linear-gradient(to right, #00ffff 0%, #cc99ff 100%);
  color:var(--article-text-color);
  font-weight:bold;
  letter-spacing:1px;
  color:#000000;
  text-align: center;
  width: 100%;
}
article .subtitle {
  text-transform:uppercase;
  font-size:16px;
  color:var(--article-heading-color);
  margin-top:10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
}
  .nav {
  margin-top:10px;
  border:2px solid var(--darker-border-color);
  background-color: var(--nav-bg);
  border-left:none;
  border-right:none;
  text-align:center;
  margin-left:0 !important;
  margin-right:0px;
  margin-bottom: 0%;
  }
.nav li {
  display:inline-block;
   margin: 8px;
}
.nav li a {
  text-decoration:none;
  text-transform:uppercase;
  color:var(--nav-link-color);
}
  .nav li {
    padding-bottom:5px;
  }
  header, nav {
  max-width:100%;
}
.container {
  display:flex;
  flex-wrap: wrap; /* Allows items to wrap to a new line */
  margin-top: 0%;
}
.left-sidebar {
  width: 220px;
  background-color:var(--article-heading-color);
  text-align: left;
}
.side-button{
    align-items: left;
    background-color: var(--nav-bg);
    font-size: 13px;
    padding: 3px;
}
.main-container{
    flex: auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 0px;
  }
  .main-content-box {
  height: auto;
  background-color:var(--darker-border-color);
  text-align: center;
  margin: 0%;
  }
  .right-sidebar-content {
    float: left;
    width: 100%;
  }
  .hider{
    background: linear-gradient(to right, #00ffff 0%, #cc99ff 100%);
    color:var(--article-text-color);
    font-weight:bold;
    letter-spacing:1px;
    color:#000000;
    text-align: center;
    width: 100%;
  }
footer{
  width: 100%;
  border:1px solid var(--darker-border-color);
  color: var(--nav-bg);
  text-align: center;
}
.peeper{
  display: none;
}
@media only screen and (max-width: 1080px) {
  .left-sidebar {
  width: 130px;
  }
  .main-container{
    margin: 2px;
  }
  .right-sidebar {
    width: 100%;
    flex-wrap: wrap;
  }
  .hider{
display: none;
  }
  .right-sidebar-content{
    display: flex;
    width: 100%;
    margin: 5px;
  }
  .links {
  list-style-type:none;
  padding-left:0;
  }
.links li {
  background-color:var(--nav-bg);
  border:1px solid var(--border-color);
  margin-bottom:3px;   
  }
.links li a {
  text-decoration:none;
  color:inherit;
  color:#860068;
  }
}
@media only screen and (max-width: 500px) {
.left-sidebar{
  width: 100px;
  font-size: 9pt;
}
.main-container{
  overflow-x:hidden;
  width: 1px;
}
.main-content-box{
  overflow-x:hidden;
}
.right-sidebar{
  display: none;
}
.peeper{
  background: linear-gradient(to right, #00ffff 0%, #cc99ff 100%);
  color:var(--article-text-color);
  display: block;
  width: 100%;
  }
}