/* 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");
}

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

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

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

.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;
}

.maincolumn {
  width:80%;
  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");
}

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

.content {
  height:80%
}

.sidebarblock {
  height:16.8%;
}

.sidebar {
  min-height:30%;
  margin-top:5em;
  text-align:center;
}

.frontcontainer {
  display:flex;
  justify-content:center;
  align-items:center;
  height:90%;
}

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

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

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

.ctext {
  text-align:center;
}

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