.site-background {
  background-image: url('/images/bg-dark.jpg');
  background-color: rgba(0, 0, 0, .3);
  background-blend-mode: darken;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

.blackwhite-icon {
    filter: invert(100%);
}

.content-block {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fafafa;  
}

.navigation-sidebar {
  border-bottom: 1px solid rgba(238, 238, 238, 0.5);
  background-color: rgba(0, 0, 0, 0.2);
}

#nav a {
  font-weight: bold;
  color: white;
}

a {
    color: #BF40BF;
}

a:hover {
    color: purple;
}

a:visited {
    color: grey;
}

a:visited:hover {
    color: purple;
}

.content-block-wrapper p:last-of-type{
    margin-bottom: 0;
}

/* for light mode */
@media (prefers-color-scheme: light) {
  .site-background {
    background-image: url('/images/bg-light.jpg');
    background-color: rgba(255, 255, 255, .3);
  }
  .blackwhite-icon {
    filter: none;
  }
.content-block {
  background-color: rgba(255, 255, 255, 0.8);
  color: #050505;  
}
#nav a {
  font-weight: bold;
  color: black;
}
.navigation-sidebar {
  border-bottom: 1px solid rgba(17, 17, 17, 0.5);
  background-color: rgba(255, 255, 255, 0.2);
}

}

.content-block {
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  font-size: 18px;
}

/* default setup (for mobile) */
.page-wrapper {
  display: flex;
  flex-direction: column; /* Navigation stacks neatly on top of content */
}

.navigation-sidebar {
  width: 100%;
  padding: 10px;
}

.navigation-sidebar .nav {
  display: flex;
  flex-direction: row; /* Horizontal links across mobile screen */
  justify-content: space-around;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-block-wrapper {
  display: flex;
  flex-direction: column; /* Stack multiple main-blocks vertically */
  gap: 10px;              /* Spacing between blocks on mobile */
  padding: 0px;
}

/* for all non-small displays */
@media (min-width: 768px){
  .page-wrapper {
    position: relative;
    width: 100%;
  }

  .navigation-sidebar {
    width: 250px;
    height: 100vh;
    position: fixed; /* stays pinned to edge and doesn't scroll */
    top: 0;
    left: 0;
    border-bottom: none;
    border-right: 1px solid rgba(238, 238, 238, 0.5);
    padding: 20px 10px;
    z-index: 1000;
  }

  .navigation-sidebar .nav {
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* for mid-size displays */
@media (min-width: 768px) and (max-width: 1749px) {
  .page-wrapper {
    display: block;
  }

  .content-block-wrapper {
    max-width: 100%;
    margin-left: 250px; 
    margin-right: 0;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Kept stackable */
  }

  .content-block {
    width: 100%; 
    
    /* THE 1500px - 1750px TRANSITION:
       Caps the blocks at 1200px once the screen is wide enough. Because the 
       left side is locked to the sidebar, any space added past 1500px only 
       grows on the right side, until the layout hits 1750px wide. */
    max-width: 1200px; 
  }
}

/* large monitors */
@media (min-width: 1750px) {
  .content-block-wrapper {
    max-width: 100%;
    margin: 0;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    display: flex;
    flex-direction: column; /* Kept stackable */
    align-items: center;    /* Horizontally centers the entire stack */
  }

  .content-block {
    width: 1200px;         /* Locked structural size */
    max-width: 1200px;     
    margin: 0;             /* Alignment is controlled perfectly by the parent flexbox */
  }
}

.tooltip-dotted {
	border-bottom: 1px dotted;
	cursor: help;
}

.recursive-indent {
    margin-left: 1.5em;
}

.content-warning {
  background-color: rgba(255, 116, 108, .6);
}

.font-125 {
  font-size: 125%;
}
.tag-btn {
  margin-bottom: 0.3em;
}
img {
  max-width: 100%;
}

table.content-table td {
    padding-right: 2em;
}