/* FONTS */
  @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Rubik+80s+Fade&family=Russo+One&family=Secular+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

body {
  background-color:black;
  font-family:"Roboto Mono", monospace;
  box-sizing:border-box;
  background-image:url("bg4.png");
  background-size:cover;
}

p {
  margin:5px 0 5px 0;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  color:grey;
  font-style:italic;
}

.mainbody {
  width:53%;
  display:flex;
  gap:1.5%;
  color:white;
  height:98vh;
}

@media only screen and (max-width: 1440px) and (min-width:801px) {
  .mainbody {
    width:65%;
  }
}

@media only screen and (max-width: 800px) {
  .mainbody {
    width:90%;
  }
}

.container {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(11,11,11,1) 100%);
  background-color: #0B0B0B;
  border:#0B0B0B 2px solid;
  border-image:linear-gradient(180deg, rgba(11,11,11,1) 0%, rgba(0,0,0,1) 100%) 1;
  padding:0.5rem;
  scrollbar-width:2px;
  scrollbar-color:#595959;
}

.container::-webkit-scrollbar {
  width:2px;
}

.container::-webkit-scrollbar-track {
  background: #000000;
}

.container::-webkit-scrollbar-thumb {
  background: #595959;
  border-radius:2px;
}

.maincolumn {
  width:79%;
  display:flex;
  flex-flow: column nowrap;
  gap:1.5%;
}

.sidecolumn {
  display:flex;
  flex:1;
  flex-flow:column nowrap;
  gap:1%;
}

.header {
  flex:1;
  position:relative;
  background-image:url("skyline_h.png");
  background-size:cover;
}

.headertext {
  position:absolute;
  bottom:0;
  font-family:"Russo One", monospace;
  font-size:3rem;
}

.content {
  height:80%;
  display:none;
  overflow-y:auto;
}

.content.default {
  display:block;
}

.content:target {
  display:block;
}

.content:target ~ .content.default {
  display:none;
}

.sidebarblock {
  height:16.8%;
}

.sidebar {
  min-height:30%;
  max-height:50%;
  margin-top:5em;
  text-align:center;
  overflow-y:auto;
  display: flex;
  flex-direction: column;
}

.frontcontainer {
  display:flex;
  flex-flow: column nowrap;
  justify-content:center;
  align-items:center;
  flex: 1;
  font-size:0.85em;
}

.frontcontainer > li {
  list-style-type: "» ";
  list-style-position:inside;
  font-style:bold;
}

.sidenav {
  height:2%;
  text-align:center;
  vertical-align:middle;
  font-family:"Russo One",monospace;
}

.sidestamps {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.sideheading {
  font-family:"Russo One",monospace;
}

.contentheader {
  font-family:"Russo One",monospace;
  font-size:2em;
}

.ctext {
  text-align:left;
  padding:0.2em 2em 0.2em 2em;
}

.cblock {
  background-color:#070707;
  text-align:left;
  border:1px solid #1F1F1F;
  border-radius:5px;
}

.cblock li {
  list-style-type: "» ";
  list-style-position:inside;
}

.top {
  margin-top:0.5em;
}

.topic {
  font-weight:bold;
}

.answer {
  color:#C3C3C3;
}

.centered {
  text-align:center;
}

.clarge {
  text-align:center;
  font-size:1.5em;
  font-family:"Russo One",monospace;
}