@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Playfair+Display:wght@700&family=Source+Serif+Pro:wght@400&display=swap');

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

        body {
            font-family: "Inter", "Roboto", Arial, Helvetica, sans-serif;
            max-width: 1400px;
            background-color: #202124;
            color: rgb(226, 226, 229);     
            padding: 20px;          
            font-size: 16px;          
            line-height: 1.6;    
        }

        img {
            object-fit: cover;
        } 

        .image-block {
          display: inline-block;margin: 10px;vertical-align: top; width:200px;
        }

        .image-block img {
          height:220px;width:200px;
        }

        .image-block p {
          font-size: 0.8em;
          width:200px;
        }

  
        .image-block h3 {
          font-weight: 450;
        }

        a {
            color:#B8DDFF;
        }

   

        img {
            max-width: 100%;
        }




        h2, h3, h4, h5, h6 {
            margin: 0; padding: 0;
        }



        blue {
            color: #BBFFB8; 
        }

        red {
            color: #FFFF00; 
        }

        ul {
          list-style: none; /* Remove default bullets */
        }

        li::before {
          content: '- '; /* The emoji plus a space */
          margin-right: 3px; /* Space between emoji and text */
        }

        pre {
   
            white-space: pre-wrap;   
            word-wrap: break-word;     
            font-family: inherit;     
            margin-top: 1em;    
            margin-bottom: 1em;      
           
        }

        pre.literary:not(.literary3) {
            font-family: 'Arial', sans-serif;
            
        }




        body:has(h1 + pre.literary) > h1 {
            font-family: 'Playfair Display', serif;
            
        }

        table {
            /* --- Key properties for the HR effect --- */
            border-top: 1px solid #ccc;    /* Top border: thickness, style, color */
            border-bottom: 1px solid #ccc; /* Bottom border: thickness, style, color */
          
            /* --- Recommended for cleaner table borders --- */
            border-collapse: collapse; /* Merges cell borders, looks cleaner */
            width: 100%;             /* Makes the table (and borders) span the container width */
          
            /* --- Optional: Add spacing around the table --- */
            margin-top: 1em;         /* Space above the top border */
            margin-bottom: 1em;      /* Space below the bottom border */
          
            /* --- Optional: Remove default cell borders if you only want the outer ones --- */
            /*
            border-style: hidden; /* Hides default borders if border-collapse is separate */
            
          }

        @media only screen and (min-width: 600px) {

          body:has(pre.literary):not(:has(.literary2)) {
            max-width: 70ch;
            margin: 0 auto;
        }

            body:has(pre.literary2)  {
              max-width: 70ch;
          }
          
            
        pre.literary h2 {
          font-family: 'Nunito Sans', sans-serif;
          font-size: 50px;
      }

        }
        pre:first-of-type { margin-top: 0; }
        pre:last-of-type { margin-bottom: 0; }


        @media only screen and (max-width: 600px) {
            body {
                max-width: 100vw;
                width: 90%;


            }

            .image-block img {
              width: 100%; 
              height: auto;
              aspect-ratio: 200 / 220;
              
            }



            .image-block {
              display: block;
              margin: 0;
              width:100%;
            }
        }

        /* Style the custom <img-caption> tag */
cap {
    position: relative;      /* Crucial: Establishes positioning context for the absolute span */
    
    width: 100%;
    height: auto;
  } 
  
  /* Style the caption span (inside the custom tag) */
cap span {
    position: absolute;   
    bottom: 0;       
    left: 0;            
    width: 100%;  
  
    background-color: rgba(0, 0, 0, 0.85); 
    color: white;        

    box-sizing: border-box; 
  
    font-family: sans-serif;
    font-size: 0.9em;
    text-align: center;
    line-height: 1.4;    
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
  }
  

  cap:hover span, cap:active span {
    opacity: 1;
    visibility: visible;

  }

  cap span img {
    max-width: none;

  }

switch {
    position: relative;    
    display: block;       
    width: 100%;        
    height: auto;          
  }
  

  switch h2 {

    position: relative;
    z-index: 1;    

  }
  

  switch span {
    position: absolute;  
    bottom: 0;           
    left: 0;       
    background-color: rgba(0, 0, 0, 0.85); 
    color: white;      
    padding: 8px 10px;   
    box-sizing: border-box; 
  
    font-family: sans-serif; 
    font-size: 0.9em;
    text-align: center;
    line-height: 1.4;     
    z-index: 10;        
  

    opacity: 0;
    visibility: hidden;

  }
  

  switch:hover span,
  switch:active span {
    opacity: 1;
    visibility: visible;
  }