/* build instructions: 

1. move TOC nav outside of ltx_page_main
2. replace the TOV nav top line with the following:

<div class="header"><button id="menu" onclick="document.getElementById('sidebar').classList.toggle('show')">&#9776;</button></div>
<nav id="sidebar" class="ltx_TOC ltx_list_toc ltx_toc_toc"><h6 class="ltx_title ltx_title_contents">Contents</h6>


3. include the following headers:

<meta property="og:title" content="A Practical Guide To Feminizing HRT" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.pghrt.diy" />
<meta property="og:image" content="/img/cover.png" />
<meta property="og:description" content="The futile attempt at answering every possible question for someone looking to trans their sex." />
<link rel="icon" type="image/png" href="/img/favicon.png">
<link rel="stylesheet" href="pghrtcss.css" type="text/css">
<script type="text/javascript" src="pghrtjs.js" defer></script>


4. footer


word -> latex conversion::

\\sub
\\

^(?: )([^\n]+$)
\\subsection{$1}

(and i'm leaving these here because it's funny but after devising these hideous
things it turns out that in my desire to have the styled text pasted for me
the easiest way was to paste the word into overleaf and THEN run regex
and then take it to vs code because i am not doing this in overleaf. funny, huh?)

^[A-Z ]+$
\\section{$0}

^((?:[A-Z][a-zA-Z ’'“”\-,\/()\[\]ü]+(?:\.[a-zA-Z ’'“”\-,\/()\[\]ü]+)?)\?)$
\\subsection{$0}

*/

@font-face {
    font-family: 'bold';
    src: url('font/bold.otf.html') format('opentype');
}

@font-face {
    font-family: 'ital';
    src: url('font/italics.otf.html') format('opentype');
}

@font-face {
    font-family: 'crm';
    src: url('font/crm.otf.html') format('opentype');
}

@font-face {
    font-family: 'boit';
    src: url('font/boit.otf.html') format('opentype');
}

body {
	font-family: 'crm';
  padding: 0 0px 0 0; margin: 0;
font-size: 17px;
}

.ltx_TOC a:link, .ltx_TOC a:visited, .ltx_p a:link, .ltx_p a:visited { color: blue !important; }
.ltx_personname a:link, .ltx_personname a:visited { color: fuchsia; }


.ltx_TOC a

.ltx_title_abstract, .ltx_title, .ltx_font_bold { font-family: 'bold';}
.ltx_font_italic { font-family: 'ital';}
.ltx_font_bold.ltx_font_italic { font-family: 'boit' !important; }

#menu {
	content: '\09776';
	min-height: 5vh;
	height: 5vh; 
	width: 5vw;
}
.header { display: none; }


.ltx_page_main { margin-left: 400px; transition: margin 0.2s ease-out; padding: min(1em,1.5%) min(3em,4.5%) min(1em,1.5%) min(3em, 4.5%); width: 50%;}
.ltx_TOC a { display: block; width: 100%; }
.ltx_TOC { position: fixed; overflow-y: scroll; width: 400px; background-color: #eee; transition: width 0.2s ease-out; top: 0; bottom: 0; }
.ltx_TOC.show { width: 100vw; visibility: visible; }
#menu { display: none; }


.ltx_toclist { padding: 0; }
.ltx_tocentry { padding-left: 20px }
.ltx_title_contents {text-align:center; font-size: 120%; font-weight:bold; margin-top: 1em; margin-bottom: 1em; }
.ltx_tag_section { margin-right: .5em }
.ltx_p { line-height: 1.4; }

.ltx_tocentry_section {
  cursor: pointer;
}

.ltx_graphics {
	object-fit: contain;
	height: auto !important;
	width: 100% !important;
	max-width: max-content;
}

.ltx_eqn_center_padleft, .ltx_eqn_center_padright {
	min-width: 0;
}

/*side bar*/
ol[class="ltx_toclist ltx_toclist_section"]{ 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.ltx_tocentry_subsection:hover, .ltx_ref.active:hover {
 background-color: #ccc;
}
*
.ltx_tocentry_section:hover {
  background-color: #ddd;
}


/* +/- handling */

.ltx_tocentry.ltx_tocentry_section > .ltx_ref:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 16px;
  color: white;
  float: right;
  margin-right: 5px;
  position: relative;
  z-index: 100;
font-family: serif;
}

.ltx_tocentry.ltx_tocentry_section > .ltx_ref.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  position: relative;
  z-index: 100;
font-family: serif; 
}

/* removing +/- from any without subs*/
.del:after {
	content: "" !important;
} 

@media screen AND (max-width:1000px) {
	.ltx_TOC  { width: 0; visibility: hidden; top: 5vh; }
	#menu { display: block; width: 100%; padding: 0; border-radius: 0; border-top: none; border-left: none; border-right: none;}
	.header { display: block; position: sticky; width: 100%; top: 0; padding: 0;}
	.ltx_page_main { margin: 0px; width: 90% !important;}
	.ltx_eqn_table {width: 90% !important;}

	.ltx_tocentry.ltx_tocentry_section > .ltx_ref:after { margin-right: 20px; }

}

	.ltx_eqn_table {font-size: 15px; }


}
e: 15px; }


}