/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/*------Body------*/
body {
  background-color: black;
  color: white;
  font-family: techno;
}

/*------Header------*/
header h2 {
  text-align: center;
}

/*------Main Container------*/
.container {
  margin: 20px;
  display: flex;
  width: 97.5%;
  /*background-color: red;*/
}
.container > div {
  margin: 10px;
  padding: 15px;
  /*background-color: yellow;*/
}
h2 {
  text-align: center;
}


/*------Side navigation panel------*/
.side-nav {
  display: block;
  /*margin: 10px;*/
  /*margin-right: 20px;*/
  column-width: 250px;
}
.side-nav > div > img {
  border-radius: 10px;
  border: solid;
}
ul {
  list-style-type: none;
  /*margin: 0;*/
  padding: 0;
  /*width: 305px;*/
  /*background-color: #f1f1f1;*/
  overflow: auto;
}
li a {
  display: block;
  color: white;
  font-size: 17px;
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover {
  /*background-color: #555555;*/
  color: #555555;
}
.active {
  /*background-color: #04AA6D;*/
  color: white;
}
.side-nav-pg {
  display: block;
  column-width: 250px;
}
.toggle-list-container {
  display: block;
  /*background-color: blue;*/
  max-width: 350px;
  /*padding: 10px;*/
} 
.toggle-list {
  font-size: 14px;
  margin: 15px;
}
.toggle-list li a {
  display: block;
  color: white;
  font-size: 11px;
  padding: 8px 16px;
  text-decoration: none;
}
.toggle-list li a:hover {
  /*background-color: #555555;*/
  color: #555555;
}

/*------vertical divider------*/
.vertical {
  border-left: 0 solid white;
  height: auto;
}


/*------Main Contents (excluding side nav)------*/
.main-container {
  /*background: orange;*/
  column-width: 1000px;
  margin-left: 20px;
}

/*------Intro Paragraph Section------*/
.intro-container {
  margin-bottom: 20px;
  border: 2.5px solid white;
  border-radius: 2%;
  padding: 0 25px;
}
.intro-container > p {
  font-size: 12px;
}

/*------Update Log Section------*/
.update-container {
  display: block;
  border: 2.5px solid white;
  border-radius: 2%
}
.update-container h6 {
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 25px;
}
hr {
  width: 98%;
}
.update-container section {
  display: block;
}
.update-container div {
  margin: 12px 15px;
  padding: 0 15px;
  border: 0.5px solid white;
  font-size: 9px;
  border-radius: 2%;
}

@font-face {
  font-family: "techno";
  src: url("misc/Conthrax-SemiBold.otf");
}