@font-face {
  font-family: 'Noto Sans';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot");
  src: url("../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix") format("embedded-opentype"),
       local("Noto Sans"), local("Noto-Sans-regular"),
       url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2") format("woff2"),
       url("../fonts/Noto-Sans-regular/Noto-Sans-regular.woff") format("woff"),
       url("../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf") format("truetype"),
       url("../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans") format("svg");
}

@font-face {
  font-family: 'Noto Sans';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot");
  src: url("../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"),
       local("Noto Sans Bold"), local("Noto-Sans-700"),
       url("../fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"),
       url("../fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"),
       url("../fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"),
       url("../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg");
}

@font-face {
  font-family: 'Noto Sans';
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot");
  src: url("../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"),
       local("Noto Sans Italic"), local("Noto-Sans-italic"),
       url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"),
       url("../fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"),
       url("../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"),
       url("../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg");
}

@font-face {
  font-family: 'Noto Sans';
  font-weight: 700;
  font-style: italic;
  src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");
  src: url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"),
       local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"),
       url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"),
       url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"),
       url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"),
       url("../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg");
}


.highlight table td {
  padding: 5px;
}
.highlight table pre {
  margin: 0;
}
.highlight .cm, .highlight .c1, .highlight .cd {
  color: #999988;
  font-style: italic;
}
.highlight .cp, .highlight .cs, .highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv, .highlight .o, .highlight .ow {
  color: #000000;
  font-weight: bold;
}


body {
  background-color: #fff;
  padding: 1px 10px 20px 25px;
  font: 14px/1.5 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #727272;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  color: #222;
  margin: 0 0 20px;
}
h1 {
  font-size: 24px;
}


a {
  color: #104d78;
  text-decoration: none;
}
a:hover, a:focus {
  color: #069;
  font-weight: bold;
}
a small {
  font-size: 11px;
  color: #777;
  margin-top: -0.3em;
  display: block;
}
/* Container for the header */
.header-container {
  position: fixed;        /* Fixes the header in place */
  width: 25vw;            /* Header takes up 33% of the viewport width */
  height: 100vh;          /* Full viewport height */
  left: 0;                /* Sticks it to the left */
  top: 0;                 /* Starts at the top */
  background-color: #fff;  /* Background color of the header */
  border-right: 1px solid #e5e5e5; /* Optional: a line to separate header from the content */
  padding: 20px;          /* Padding inside the header for spacing */
  overflow-y: auto;       /* If the header has too much content, it scrolls internally */
}

/* Main content wrapper */
.wrapper {
  margin-left: 25vw;      /* Moves the content to the right to make space for the header */
  padding: 20px;          /* Adds some padding for the content */
  width: 60vw;            /* Content takes up the remaining 57% of the viewport width */
  max-width: 1000px;
  display: flow-root;
}

/* Header element adjustments */
header h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

header img {
  width: 100%;            /* Logo takes up full width of header */
  margin-bottom: 20px;
}

header p {
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* Responsive design for mobile devices */
@media screen and (max-width: 768px) {
  .header-container {
    position: static;    /* Unfixes the header */
    width: 100%;         /* Header takes up full width of the screen */
    height: auto;        /* Adjusts height based on content */
    border-right: none;  /* Removes the border */
  }

  .wrapper {
    margin-left: 0;      /* No margin needed, as header is now on top */
    width: 100%;         /* Content takes up full width below header */
    padding-top: 20px;   /* Adds spacing between header and content */
  }
}

/* Add print-specific rules */
@media print {
  .header-container {
    position: static;    /* Unfixes the header */
    width: 100%;         /* Makes the header full width for print */
    height: auto;        /* Adjusts the height automatically based on content */
    border-right: none;  /* Removes the border for print */
    max-height: 50vh;    /* Limits the height of the header to half a page */
    overflow: hidden;    /* Prevents content overflow */
    text-align: center;  /* Centers content inside the header */
    padding: 10px;       /* Optional: reduces padding for a more compact header */
  }

  .header-container img {
    max-width: 60%;      /* Adjusts image size, making it more reasonable */
    max-height: 25vh;    /* Limits the image height to 25% of viewport height */
    height: auto;        /* Keeps the aspect ratio intact */
    width: auto;         /* Ensures responsive resizing */
    margin: 0 auto;      /* Centers the image */
  }

  header h1 {
    font-size: 18px;     /* Optionally reduce header title font size for print */
    margin-top: 10px;    /* Adds some spacing between the image and title */
  }

  .wrapper {
    margin-left: 0;      /* Resets margin for content */
    width: 100%;         /* Content takes up full width */
    padding: 20px;       /* Maintains padding */
  }

  body {
    padding: 0;          /* Removes padding around the page */
  }
}


footer {
  width: 0px;
  float: left;
  position: fixed;
  bottom: 50px;
}


@media print, screen and (max-width: 960px) {
  div.wrapper {
    width: auto;
    margin: 0;
  }
}

html {
  scroll-behavior: smooth;
}
.pub-content {
  border-left: 2px solid #ddd;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
}

h1 { font-size: 2rem; }   /* ~32px */
h2 { font-size: 1.5rem; }/* ~28px */
h3 { font-size: 1.25rem; } /* ~24px */
h4 { 
  margin-bottom: 0.5rem; 
  font-weight: normal;
  font-size: 1rem; 
}/* ~20px */
h5 { font-size: 0.875rem; }/* ~18px */
h6 { font-size: 0.75rem; }   /* ~16px */

.paper-heading {
  display: flex;          /* put title and toggle on one line */
  align-items: baseline;  /* align text nicely */
  font-weight: normal;    /* your current choice */
  margin-bottom: 0.5rem;
}

.paper-heading .toggle-link-dfajdsfhjk {
  font-size: 0.8rem;        /* reset to body text size */
  font-weight: normal;    /* not bold like h4 */
  margin-left: 0.3rem;   /* spacing from title */
  color: #104d78;         /* matches your normal link color */
}