@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #1F1F1F;
    font-family: "Noto Sans", sans-serif;
  
    color: #CCCCCC;
    min-height: 100vh;
  }

  h1 {
    font-family: "Noto Sans", sans-serif;
    text-transform: uppercase;
    text-align: center;
    padding-top: 15px;
  }

  h2 {
    text-align: center;
  }

  h6{font-size: 14px}

  h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
  }
  
  .content {
    width: 80%;
    max-width: 480px; /*630px*/
    font-size: 18.9px;
    white-space: pre-wrap;
    /*font-family: "Inter", sans-serif;
    line-height: 1.7;
    */
    text-align: justify;
    font-family: "Noto Sans", sans-serif;
    line-height: 1.5;
    margin: 0 auto;
    padding-top: 24.5vh;
    padding-bottom: 60vh;
  }

  [contenteditable]:focus {
  outline: none;
  box-shadow: none;
}

codeblock {
    /* 1. Make it a block-level element (CRITICAL!) */
    display: block;

    /* 2. Set the font to be monospaced, like in code editors */
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 0.9em;

    /* 3. Style the block's appearance */
    background-color: rgb(28, 28, 28); /* A slightly darker background to stand out */
    border: 1px solid rgb(60, 60, 60);
    border-radius: 5px;
    padding: 1em;
    
    /* 4. Preserve whitespace and line breaks, and wrap long lines */
    white-space: pre-wrap;
    
    /* 5. Add a horizontal scrollbar if a line is still too long */
    overflow-x: auto;

    /* 6. Use the text color you provided */
    color: #CCC;
}



img {
    border-radius: 10px;
max-height:100%;
max-width: 100%;
}

a.go-back-to {
  font-family: "Noto Sans", sans-serif;
}

a.booklink, 
a.booklink:link, 
a.booklink:visited {
    color: rgb(196, 151, 74);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

a.booklink:hover,
a.booklink:focus {
  color: rgb(255, 196, 94); /* A very light cream/off-white for hover */
  text-decoration: underline;
}

a.booklink:active {
  color: #ffffff; /* Bright white when being clicked */
}

a:not(.booklink),
a:not(.booklink):link,
a:not(.booklink):visited {
  color: #000000; /* The DARK background color */
  background-color: #ccc; /* The LIGHT text color */
  text-decoration: none; /* No underline needed */
  padding: 0.1em 0.4em;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
}

a:not(.booklink):hover,
a:not(.booklink):focus {
  color: #000;
  background-color: #ffffff; /* A much brighter highlight on hover */
}

a:not(.booklink):active {
  background-color: #fff;
}

/* --- A SIMPLER, STARKER CAPTION --- */

/* Parent container for positioning */
cap {
    position: relative;
    display: inline-block; /* Ensures it wraps the image correctly */
    line-height: 0;      /* Prevents extra space below the image */
  }
  
/* The caption/tooltip itself */
cap span {
  position: absolute;   
  bottom: 0;       
  left: 0;            
  width: 100%;  

  /* The ONLY change: A stark, solid black background */
  background-color: rgb(10, 10, 10);
  
  color: rgb(255, 255, 255); 
  padding:5px;

  box-sizing: border-box; 

  font-family: "Noto Sans", sans-serif;
  font-size: 0.9em;
  text-align: center;
  line-height: 1.4;    
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

/* The hover/active state */
cap:hover span,
cap:active span {
  opacity: 1;
  visibility: visible;
}

/* This rule is fine as is */
cap span img {
  max-width: none;
}


.linkheader {
  font-size: 24px;
}

@media (max-width: 768px) {
  .content {
    width: 90%;
    font-size: 18px;
    padding-left: 0;
  padding-top: 24.5vh;
  padding-bottom: 60vh;
  text-align: left;
  }
}

blue, red {
  display: inline; 
}

blue {
  color: #BBFFB8; 
}

red {
  color: #FFFF00; 
}

table {
  border-top: 1px solid #ccc;  
  border-bottom: 1px solid #ccc; 

  border-collapse: collapse; 
  width: 100%;           

  margin-top: 1em;       
  margin-bottom: 1em;   

  
}