@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

/* Fonts */


@font-face {
    font-family: 'Charter';
    src: url('/fonts/Charter Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Charter';
    src: url('/fonts/Charter Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Charter';
    src: url('/fonts/Charter Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Charter';
    src: url('/fonts/Charter Bold Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Custom Mono';
    src: url('/fonts/Courier.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


li { margin-bottom: 1.5rem; }


 /* * A better looking default horizontal rule */
 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px dashed #CCC;
    margin: 1em 0;
    padding: 0;
}




figure {
    margin: 0;
}

figure img {
    max-width: 100%;
}

figcaption {
    text-align: center;
    font-size: 0.8rem;
}






/* Main Typography */

html { font-family: "Charter", "Lora", serif; text-rendering: optimizelegibility; font-size: 100%; margin: 20px; }

body { line-height: 1.65em; font-size: 1.16rem; margin: 0px auto; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

a:visited { color: #0000ee; }

#postamble { text-align: right; }

h2 { margin-top: 3.5rem; }
h1 { margin-top: 3rem; }


/* Layout */


@media only print {
    #preamble: display: none;
}  

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

    html, body { margin: 0px }
    
    body { display:  grid;
	   grid-template-columns:  1fr 120px 960px 120px 1fr;
	   grid-template-rows:  20px 40px 1fr 80px;
	   grid-template-areas: ". preamble preamble preamble ."
				". . . . ."
				". . content . ."
				". . postamble . ."; }

    #preamble {	grid-area: preamble; display: flex; padding-top: 20px }

    #preamble div { padding-right: 20px }
    #preamble a, #preamble a:visited { color: #505050; text-decoration: none; font-size: 80%}
    #preamble a:hover { text-decoration: underline }


    #content { grid-area: content; }

    #postamble { grid-area: postamble; }
}



/* Code Typography */

pre, code { font-family: "Custom Mono",
			 Menlo, Monaco, "Courier New", Courier, monospace; }

pre { font-size:  80%; line-height: 1.1rem; margin:  0 0 24px;
      max-width:  100%; overflow:  auto;
      padding:  10px; background-color:  #f2f2f2;
      border-radius:  8px; border:  4px solid #f2f2f2; }

.code-highlighted { background-color: #ffff00; }

code { background-color: #f2f2f2; font-size: 80%; padding-top: 1px; padding-bottom: 1px;
       padding-left: 3px; padding-right: 3px;  border-radius:  6px; border:  3px solid #f2f2f2;}

/* Copy to Clipboard Typography */

.copy-btn { float: right; }

button:not(.pseudoLabel) { position: relative;
			   background-color: #CCC; color:  black;
			   border:  none; border-radius:  4px;
			   top: 0px; right: 0px; padding: 10px; }

button:not(.pseudoLabel):hover { display: inline; background-color: darkgray; color: black; }

button:not(.pseudoLabel):focus { outline: 0; }

button:not(.pseudoLabel):active { transform: scale(0.95); }



/* Table Typography */

table { border-collapse: collapse; display: block; overflow-x: auto; }

caption.t-above { caption-side: top; }

caption.t-bottom { caption-side: bottom; }

td, th { vertical-align: top; border: 1px solid #CCC; padding: 0.5em; }

th.right { text-align: center; }

th.left { text-align: center; }

th.center { text-align: center; }

td.right { text-align: right; }

td.left { text-align: left; }

td.center { text-align: center; }