@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;
  }
  /* a {
    target-new:tab;
  } */
  /*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 {
    width:60%;
    font-family: "Fantasque", monospace;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 10px;
    
  }
  .content {
    display: flex;
    gap:10px;
    width: 100%;
  }
  .header {
    color:#ffffff;
    width:100%;
    background-color: #000000;
    border: 2px solid #000000;
    padding: 10px 15% 10px 5%;
  }
  .sidebar-left {
    font-family: "Fantasque", monospace;
    width: 20%;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 5px;
    height:fit-content;
  }
  .sidebar-right {
    font-family: "Fantasque", monospace;
    width: 20%;
    background-color: #c0c0c099;
    border: 2px solid #c0c0c099;
    padding: 5px;
    height: fit-content;
  }
  .sidebox {
    font-family:"Fantasque", monospace;
    height: 150px; 
    overflow-y: scroll;
    border:2px solid #c0c0c099;
    padding:5px;
  }
  #applegif {
    width: 150px; 
    height:auto;
    align-self:flex-end; 
    flex:1 0 20%
  }
  #site-header {
    font-family: JTC Win M9; 
    align-self:flex-end;
    text-align: center;
    flex:1 0 60%; 
  }
  
  .like-wrap {
    display: inline-flex;
    align-items: center;
    padding: 5px 0 20px 20px;
  }
  .like-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }
  /* default state - show outline, hide filled */
  .like-icon-outline {
    display: block;
  }
  .like-icon-filled {
    display: none;
  }
  /* hovered or liked - show filled, hide outline */
  .like-btn:hover .like-icon-outline,
  .like-btn.liked .like-icon-outline {
    display: none;
  }
  .like-btn:hover .like-icon-filled,
  .like-btn.liked .like-icon-filled {
    display: block;
  }
  .like-count {
    font-size: 0.85rem;
    color: #888;
  }
  .like-label {
    font-family: "Fantasque", monospace;
    font-size: 0.85rem;
  }


  ::-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;
    margin-top:0;
    margin-bottom:0;
  }
  li::before {
    content: "-";
    margin-right: 5px;
  }
  hr{
    width:0px;
    opacity:0;
  }
  hr.arrows {
    width:100%;
    opacity:1;
    border: none;
    border-top: 1px solid #ccc;
    text-align: center;
    overflow: visible;
  }
  hr.arrows::after {
    content: "\2193";
    /* display: inline-block;
    position: relative;
    top: -0.7em;
    padding: 0 0.5em; */
    background: #ffffff00;     /* match your page background */
    color:black;
    font-size: 1rem;
  }
  p {
    margin-top:0;
    margin-bottom:0;
    padding: 0 3% 0 3%;
  }
  
  
@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 */
  }
  #applegif {
    width: 80px;
  }
}