@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
h1 {font-size:200%;margin-top:5px;}
h1.optionalsection {color:purple;}



#chapter,#number {font-family:"Luckiest Guy",sans; margin-top:20px;z-index:2;position:relative;}
#number {text-align:center; font-size:100%;margin-top:-5px;}
#body {
    margin: 20px 100px;
    border:1px solid;
    padding:16px;
    padding-top:10px;
    font-size:28px;
}
body>p {margin-top:50px;}
.float {float:right;margin-left:8px; clear:right;}
.floatleft {float:left;margin-right:8px;clear:left;}
.float,.floatleft {padding:16px;margin-bottom:8px;margin-top:8px;}
.imgcenter {margin:8px auto; overflow:auto;}
div.float,div.floatleft{
    border:1px solid;
    font-size:70%;
    padding:20px;
}

.optional {
    background-color:#ddd;
    padding:0px 16px 16px 16px;
    margin:8px;
    margin-top:50px;
    clear:both;
    border:3px solid;
}
.optional::before, .example::before, .wideexample::before {
    font-variant:small-caps;
    font-size:125%;
    position:relative;
    top:-20px;
    border:3px solid;
    border-bottom:0px;
    padding:4px;
}
div.optional::before {
    content: "Optional";
    background-color:#ddd;
}
.example,.wideexample {
    background-color: #daf;
    padding:0px 16px 16px 16px;
    margin:16px auto;
}
.example {    max-width:600px;}
.example::before,.wideexample::before {
        content: "Example";
        background-color:#daf;
    }
.footnote {
    background-color:#ddf;
    padding:16px;
    margin:8px;
}

    .footnote>p {margin-top:0px;margin-bottom:5px;font-size:70%;font-style:italic;}
    .footnote>p:first::before {content:"*"} /*first Might be wrong*/
    
    

    h2 {font-family:"Luckiest Guy",sans;font-size:125%;text-align:center;}
    /*a.section {font-family:"Luckiest Guy";font-weight:100px;font-size:80%}*/
    a.section,span.section {font-variant:small-caps;font-weight:bold;font-size:80%}
    a.section.PS {color: brown;}
#chapter {
        position:absolute;
        top:4px;
        font-size:60%;
        z-index:1;
        color:blue;
        text-align:center;
        display:block;
        left:0px;
        width:100%;
        margin:0 auto;
    }
    img.center {margin:auto;display:block;}
    #chapter>a {color:blue;z-index:1;}
    .important>span,.important>mjx-container, .important>p {border:2px solid; background-color:gold;display:inline-block !important;margin:auto;padding:6px 12px;text-align:center;}
    .important p {margin:0px;}

    div.important {display:block;text-align:center;margin-bottom:8px;}
    table.bordered th,table.bordered td {border:1px solid; padding:2px 5px;text-align:center;}
    table.bordered {border-collapse:collapse;margin:auto;}
    td.alignright {text-align:right !important;}
    td.alignleft {text-align:left !important;}

    .calc {font-family:monospace;border:1px solid;padding:2px; margin:0px
        2px; background-color:black;color:white;}
    .mono {font-family:monospace;font-weight:bold;}

    .variable {float:right; background-color:SpringGreen;border:1px solid;
        padding:5px;
        margin:10px;
        text-align:center;
        max-width:200px;
    }
    .variable .name {font-weight:bold;}
    .variable .symbol {font-size:150%;padding-bottom:10px;}
    .variable .units {font-weignt:bold;}
    .variable label[for="units"] {font-variant:small-caps;font-size:80%;font-weight:normal;}

    span#snumber {font-size:50%;display:block;}
    figure {display: table;}
    figcaption {margin:0px; padding:10px; font-style:italic;font-size:80%;
                display: table-caption;
                caption-side: bottom;
                padding-top: 0px;
                text-align: center;
               }

    mark.vocab {
        text-decoration:underline;
        font-weight:bold;
        background-color: transparent;
    }
    span.sc {font-variant:small-caps;}
    div.note,div.leftnote {font-size:70%; border:1px solid;max-width:200px;padding:2px 20px;}
    div.note {float:right;margin-left:10px;}
    div.leftnote {float:left;margin-right:10px;}
.calculator {white-space: nowrap;}
.calculator>span {border: 2px outset;
    background-color:beige;
    font-size:90%;
    font-family:monospace;
    padding:2px 4px;
}

div.column {
//    height:100%;
    vertical-align:top;
    display:inline-block;
//    width:28%;
    text-align:center;
    margin:1%;
    padding:10px;
}
div.column.bordered {
    border:2px inset;
}
div.center {
    text-align:center
    position:relative;
}
x-grid, div.grid {
    display:flex;
}

img {font-size:50%;font-style:italic;color:purple;background-color:white;}


.optionalsection::before {
    content: "(Optional Section)";
    position:absolute;
    font-size: 30%;
    top: 30px;
    text-align: center;
}
#creativecommons {font-size:0px;}




/********************PHONE********************/
@media only screen and (max-device-width: 600px) {
    .arrow#prevsec {display:none;}
    .arrow#nextsec {display:none;}
    #body {width:100%;margin:20px 20px;border:0px;padding:40px;
	   font-size:48px;
	  }
    body {margin:0px;}
    #number {margin-top:30px;}
    .arrow {
	font-size:40px;
    }
    .arrow>a {font-size:100%;}
    .arrow#prevsecbottom {
	margin-bottom:500px;
	width:50%;
	left:0px;
    }
    .arrow#nextsecbottom {
	margin-bottom:250px;
	width:50%;
	right:0px;
    }
    #body {padding-bottom:200px;}
    #chapter {font-size:120%;}
    #legaltext {font-size:18px;}
}

    iframe {
        margin: auto;
        display: block;
    }

    li.shift {margin-left: 40px;}