body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.main {
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

.tbox { 
  display: none;
}


.lbox { 
  display: none;
}


.logo { 
  display: none;
}


.footer {
   clear:both;  
}

.rightimage {
  float: right;
  max-width: 30%
}

.rightimage.expanded {
   width: 100%; /* Scale to the full width of the parent container */
    max-width: none; /* Remove max-width limitation */
    float: none; /* Remove float when expanded */
    display: block; /* Center-align when expanded */
    margin: 0 auto; /* Center in parent container */
}

h2 {
  border-bottom: 1px solid #d1d9e0b3;
}

.redbox {
    display: inline-block; /* Make the span behave like a block */
    background-color: #fde8e8; /* Very light red background */
    border: 3px solid #f28b82; /* Red border for emphasis */
    padding: 10px 15px 10px 40px; /* Extra padding on the left for the exclamation mark */
    margin: 10px 0;
    position: relative; /* Needed for positioning the pseudo-element */
    color: #a33a3a; /* Dark red text */
    font-family: Arial, sans-serif;
    font-size: 14px; /* Adjust text size */
    line-height: 1.5;
}

/* Add exclamation mark inside the box */
.redbox::before {
    content: '!'; /* ASCII exclamation mark */
    font-size: 24px; /* Larger size for emphasis */
    color: #f28b82; /* Match the border color */
    position: absolute;
    left: 10px; /* Position inside the box */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Proper centering */
    font-family: Lucida console, Courier new;
    font-weight: bold; /* Make it bold for visibility */
}

.bluebox {
    display: inline-block; /* Make the span behave like a block */
    background-color: #e8f4fc; /* Very light blue background */
    border: 3px solid #80c1e3; /* Blue border for emphasis */
    padding: 10px 15px 10px 40px; /* Extra padding on the left for the information icon */
    margin: 10px 0;
    position: relative; /* Needed for positioning the pseudo-element */
    color: #316b92; /* Dark blue text */
    font-size: 14px; /* Adjust text size */
    line-height: 1.5;
}

/* Add information symbol inside the box */
.bluebox::before {
    content: 'i'; 
    font-size: 24px; /* Larger size for emphasis */
    color: #80c1e3; /* Match the border color */
    position: absolute;
    left: 10px; /* Position inside the box */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Proper centering */
    font-family: Lucida console, Courier new;
    font-weight: bold; /* Make it bold for visibility */
}

.code {
 background: #e0e0e0;
 border-left: 10px solid #c0c0c0;
 border-right: 10px solid #c0c0c0;
 font-family: "Lucida console";
 position: relative; /* Needed for pseudo-elements */
 padding: 15px 10px;
 margin: 10px auto;
 z-index: -1; /* Do not draw background on top of right image */
}

/* Add quotation mark using pseudo-element */
.code::before {
    content: '</>'; 
    font-size: 20px; /* Large quotation mark */
    color: #black; /* Same color as border */
    position: absolute;
    top: -11px;
    right: 3px; /* Adjust position */
    font-family: Lucida console; 
    font-weight: bold;
    line-height: 1; /* Ensure no extra spacing */
}


.table-wrapper {
    border: 1px solid black; /* Outer border */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensures corners remain rounded */
    display: inline-block; /* Ensures wrapper fits around the table */
}

table {
    border-collapse: collapse; /* Collapse borders between cells */
    width: 100%; /* Full width inside the wrapper */
}

td, th {
    border: 1px solid black; /* Thin black line between cells */
    padding: 8px;
}


/* Frame styling for the Table of Contents */
.toc {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    max-width: 300px;
    box-sizing: border-box;
}

/* Remove bullets and set indentation */
.toc ul {
    list-style-type: none;
    padding-left: 10px;
    margin: 0;
}

/* Indentation for nested items */
.toc ul ul {
    margin-left: 10px;
}

/* Links styling */
.toc a {
    text-decoration: none;
    color: #0645ad;
}

/* Hover effect for links */
.toc a:hover {
    text-decoration: underline;
    color: #0b559f;
}


blockquote {
    background-color: #f0fcff; /* Very light blue background */
    padding: 15px 20px;
    margin: 20px auto;
    border-left: 5px solid #80c1e3; /* Blue border to emphasize */
    position: relative; /* Needed for pseudo-elements */
    font-style: italic;
    color: #333; /* Text color */
    z-index: -1; /* Do not draw background on top of right image */
}

/* Add quotation mark using pseudo-element */
blockquote::before {
    content: '“'; /* Unicode for opening quotation mark */
    font-size: 50px; /* Large quotation mark */
    color: #80c1e3; /* Same color as border */
    position: absolute;
    top: -10px;
    left: 10px; /* Adjust position */
    font-family: Georgia, serif; /* Classic serif font for quotes */
    line-height: 1; /* Ensure no extra spacing */
}

blockquote::after {
    content: '”'; /* Unicode for closing quotation mark */
    font-size: 50px; /* Large quotation mark */
    color: #80c1e3; /* Same color as border */
    position: absolute;
    bottom: -10px;
    right: 10px; /* Adjust position */
    font-family: Georgia, serif; /* Classic serif font for quotes */
    line-height: 1; /* Ensure no extra spacing */
}

/* anchor symbol hidden by default, shown on hover of heading */
.anchor {
  position: relative;
  text-decoration: none; /* remove underline if any */
  color: inherit;
  text-decoration: none;
}

.anchor::after {
  content: "\1F517"; /* or '#' or any symbol */
  position: absolute;
  right: -1em; /* adjust distance from heading */
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.8em;
}

.anchor:hover::after,
.anchor h3:hover::after {
  opacity: 1;
  cursor: pointer;
}

/* optional: clicking the symbol jumps to anchor */
.anchor::after {
  pointer-events: auto;
}


.gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

.gallery li {
    flex: 1 1 200px; /* Minimum width of 200px per item */
    max-width: 250px; /* Maximum width to prevent items from growing too large */
    margin: 10px;
    text-align: center;
}

.gallery a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.gallery img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

.gallery p {
    font-size: 0.9em;
    color: #333;
}

@media screen and (max-width: 600px) and (orientation:portrait) {

.rightimage {
  align:center;
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

}

@media screen and (min-width: 1030px) and (orientation:landscape) {

.main {
 max-width: 1000px; /* Limit the main content width */
}

}

@media screen and (min-width: 1300px) and (orientation:landscape) {

.main {
 max-width: 1200px; /* Limit the main content width */
}

}


@media screen and (min-width: 1790px) and (orientation:landscape) {
    .logo {
      display: inline;
      position: fixed; /* Make it sticky */
      padding: 10px;
      top: 24px; /* Distance from the top of the viewport */
      width: 156px;
      height: 156px;
      margin-left: -180px;
  background-image: url('/wiki-logo.png');
  background-repeat: no-repeat; 
  background-position: 13px 13px; 
    }

    .lbox {
    display: inline;
    position: fixed; /* Make it sticky */
    top: 195px; /* Distance from the top of the viewport */
    margin-left: -180px;
    width: 156px; /* Fixed width for TOC */
    border: none;
    background-color: #f9f9f9;
    padding: 10px;
    bottom: 24px;
    overflow-y: auto;
    }

    .tbox {
    display: inline;
    position: fixed; /* Make it sticky */
    top: 24px; /* Distance from the top of the viewport */
    margin-left: 1180px;
    width: 250px; /* Fixed width for TOC */
    border: none;
    background-color: #f9f9f9;
    padding: 10px;
    bottom: 24px;
    margin-right: 20px; /* Space between TOC and content */
    overflow-y: auto;
    }

}


.lbox ul {
    list-style-type: none;
    padding-left: 10px;
    margin: 0;

}