body
{
    font-family: 'Times New Roman', Times, serif;  
  /*  font-family: 'Libre Baskerville', Times, serif; */
    font-size: 20px;
    width: 720px;
    margin: 0 auto; 
}
h1, h2
{
    text-align: center;
}

h1.title
{
    font-family: Quintessential;
    font-size: 54px; /* too wide for iPad 64px; */
}

h2.chapterTitle
{
    margin: 1em 0;
    line-height: 1.5;
    font-size: 175%;
}

h2.partTitle
{
    margin: 1em 0;
    line-height: 1.5;
    font-size: 200%;
}

span.fancy
{
    font-family: Quintessential;
    font-size: 48px;
}

a.title-link
{
    color: black;
    text-decoration: none;
}

p
{
    line-height: 1.35;
}

p.dropcap:first-letter
{
    float: left;
    font-size: 3.5em;
    line-height: 1;
    margin-top: -10px;
    margin-bottom: -10px;
    margin-right: 5px;
}

p.center
{
    text-align: center;
}

p.indent
{
    margin-left: 2em;
}

.largeFont
{
  /*  text-align: center; */
    font-size: 2em;
}

p.right
{
    text-align: right;
}

p.copyright
{
    text-align: right;
    margin-right: 10px;
}

p.footnote
{
    font-size: 16px;
}


p.insight
{
    text-align: center; 
    font-weight: bold
}

/* Borders for images? */

img.center
{
    display: block;
    margin: 0 auto;
}

img.left
{
    display: block;
    float: left;
    margin-right: 20px;
}

blockquote
{
    font-size: 18px;
    line-height: 1.35;
}

/* Reminder to myself:

    There's a difference between the 'math' element and 
        the 'pre' element with the 'math' class! 
*/        

pre.math
{
    margin-left: 240px;
    text-underline-position: auto;
}

pre.code
{
    margin-left: 0;
}


span.plain
{
    font-family: sans-serif; 
}  

/* Redefine s */

s
{
    text-decoration: none;
    font-family: sans-serif;
}




/* would rather use inherit in following style, but some stuff doesn't display quite right */

math
{
    font-family: math;      
    font-size: inherit; 

    math-style: normal; 
    margin-left: 4em;
}

math.center
{
    margin-left: 0em;
    display: block math; 
    font-weight: bold;
}

math.emphasize
{
    font-weight: bold; 
    font-size: 150%;
    margin-left: 2.5em;
}

/* For underneath the slide rule */
math.slideRuleDisplay
{
    font-size: 200%;
    margin-left: 0em;
    display: block math;
}

/* Is this being used? */

math.indent
{
    margin-left: 2em; 
}

math.naked
{
    margin-left: 0;
}
 
mpadded
{
    width: 720px;
}

mi.italic
{
    font-style: italic;
}

div.canvas-container
{
    width: max-content;
    margin: 0 auto;
    padding: 0;

    touch-action: none; 
}

div.sandbox
{
    background-color: papayawhip;
}

canvas
{
    touch-action: none;
    cursor: default; 

    margin: 0;
    padding: 0;
}

.bordered
{
    border: 1px solid black;
}

/* For testing purposes */
.pink
{
    background: #FFE0E0;
}

div.centered
{
    width: max-content;
    margin: 0 auto;
}




table
{
    margin: 0 auto;
    border-spacing: 0px;
}

/* grid containers */

div.grid-container
{
    display: grid;
    width: 720px;
    column-gap: 25px;
}

div.grid-item-buttons
{
    display: flex;
    justify-content: space-around;
    align-items: center
}


/* UI Elements */


div.ui-container
{
    display: grid; 
    place-items: center; 
    scale: 1; 
    padding: 10px 0;
}

.ui-text
{
    text-align: center;
    font-size: 110%; 
    font-weight: bold;
}

.slider
{
    width: 50%;
}

p.slider-text
{
    margin-top: 0;
    margin-bottom: 0;
}






.nav
{
    display: flex;
    justify-content: space-around;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 150%;	
    text-transform: uppercase;
}            

a.nav-link 
{
    color: blue;
    text-decoration: none;
}

a.nav-link:hover
{
    font-weight: bold;
    font-style: italic;
}	

a.nav-link-current 
{
    color: green;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

.flex-between
{
    display: flex;
    justify-content: space-between;
}