@font-face {
  font-family:"JTC Win M9", sans-serif; 
  src: url("NIS-JTC-Win-M9-rename.ttf");
  }
@font-face {
  font-family:"Fantasque"; 
  src: url("FantasqueSansMono-Regular.ttf");
  }
  
  body{
      background-image: url("aalcc-ss-1.png");
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
  }
  /*unvisited link:*/
  a:link {color: #003c9c;}
  /*visited link:*/
  a:visited {color: #58009c;}
  /*hover state:*/
  a:hover {color: #9c0000;}
  /*active link (just when its clicked):*/
  a:active {color: #b00000;}
  
  * {
    box-sizing: border-box;
  }
  .container {
    width:80%;
    margin:auto;
  }
  .mainContent {
    font-family: "Fantasque", monospace;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 10px;
  }
  .content {
    display: flex;
    width: 100%;
  }
  .header {
    color:#ffffff;
    width:100%;
    background-color: #000000;
    border: 2px solid #000000;
    padding: 10px 20% 10px 20%;
  }
  .sidebar-left {
    width: 27%;
    margin-right:10px;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 5px;
  }
  .sidebar-right {
    width: 27%;
    margin-left:10px;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 5px;
  }
  .sidebox {
    font-family:"Fantasque", monospace;
    height: 150px; 
    overflow-y: scroll;
    border:2px solid #c0c0c099;
    padding:5px;
  }
  
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #c0c0c099;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #a6a6a699;
  }
  
  img {          
    display: block;
    margin: auto;
  }
  ul{
    font-family:"Fantasque", monospace;
    list-style: none;
    padding-left: 0;
  }
  li::before {
    content: "-";
    margin-right: 5px;
  }
  hr{
    width:0px;
    opacity:0;
  }
  
  
@media (max-width: 800px) {
  .content {
    flex-direction: column;
  }
  .sidebar-left,
  .sidebar-right,
  .mainContent {
    width: 100%;
    margin: 0 0 10px 0; /* optional spacing between stacked sections */
  }
  .header {
    padding: 10px 10% 10px 10%;
  }
}