/* 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 {
  background: black url("https://forum.derivative.ca/uploads/default/original/2X/5/587316267eb6a5deb21f9836829a3ff395ab64b9.gif"); /*Replace with your own background*/
	background-size: center;
	background-repeat: no-repeat; /* */
  background-position: center center; /* */
	background-attachment: fixed;
  background-position:center;
	font-family: "VT-100", fixedsys, System, monospace;
	font-size: 13px;
  }
  
center {
  text-align: center;
  }
  
a {
  color: #f7636a;
  }

/*All sidebars go in here.*/  
.sidebar-group {
  position: fixed;
  top: 0;
  margin-top: 25px;
  }
  
/*Code shared by all window-style boxes. To see what different specific sidebar classes look like, check the demo page.*/
.sidebar, .mini-sidebar, .wide-sidebar, .box {
  background: #910007;
  border-radius: 5px;
  border: 1px solid #520004;
  box-shadow: 2px 2px #520004;
  }
  
/*Prevent image overflow.*/
.sidebar img, .mini-sidebar img, .wide-sidebar img, .box img {
  max-width: 100%;
  height:auto; /*Prevent squishing*/
  }
  
.sidebar, .sidebar-box {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  }
  
/*Container for vertical stacks of multiple mini-sidebars*/
.sidebar-box {
  margin-left: 10px;
  }
  
.sidebar {
  width: 160px;
  margin-left: 25px;
  }
  
.mini-sidebar {
  margin-bottom: 25px;
  }
  
.wide-sidebar {
  margin-left: 25px;
  margin-top: 25px;
  width: 340px;
  min-height: 150px;
  }
  
/*Inside/main text of window boxes.*/
.inner {
  color: white;
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
  }

/*The title bar at the top of window boxes.*/
.title-bar, .box-title-bar {
  background: #520004;
  color: white;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  }
  
/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.box-title-bar {
  padding: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  }
  
/*For the symbol in the top right corner.*/
.right {
  float: right;
  margin-right: 5px;
  font-family: "Arial", sans-serif;
  line-height: 12px;
  }
  
/*Round circular image.*/
.icon {
  border: #520004 solid 2px;
  border-radius: 50%;
  }
  
/*Main body text boxes.*/
.box {
  color: white;
  margin-top: 25px;
  margin-left: 400px;
  width: 600px;
  margin-bottom: 25px;
  }

/*tab links.*/
.tab-link {
    position: relative; /* Essential for positioning the pop-out content relative to the tab link */
    background: #520004;
  color: white;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
    cursor: pointer;
    border: 1px solid black;
    width: 50px;
      border-radius: 5px;
    margin-right: 5px;
}

.tab-content {
    visibility: hidden; /* Hide the content by default */
    opacity: 0;
    position: absolute;
    /* Position the pop-out content below the tab */
    top: 100%; 
    left: 0;
    width: 80px;
    padding: 10px;
    color: white;
    background-color: #b30009;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1; /* Ensure the pop-out appears above other content */
    transition: opacity 0.3s, visibility 0.3s; /* Add a smooth transition */
}

.tab-link:hover .tab-content {
    visibility: visible; /* Show the content on hover */
    opacity: 1;
}

.tab-container {
  display: flex;
  justify-content: flex-start; /* Aligns tabs to the left */
  list-style: none; /* Removes default list bullets */
  padding: 0;
  margin: 0;
}
  
  
/*this part is a joke. no need to use it.*/
.big-quote {
  font-size: 32px;
  color: white;
  letter-spacing: 6px;
  word-spacing: 2px;
  font-family: "Garamond", "Bookman", serif;
  position: fixed;
  margin-left: 1050px;
  margin-top: 300px;
  top: 0;
  width: 300px;
  }
  
wide {
  letter-spacing: 16px;
  }
  
midwide {
  letter-spacing: 3px;
  }