/* Insert the proper Curriculum color scheme in a custom.css file */

/* defaults - these are UGLY for a reason!  override these in the custom.css per curriculum guidance. */
:root {
    --h1-bg-color: rgb(255, 89, 0);
    --h2-bg-color: rgb(255, 174, 0);
}

#topheading {
    background-color: darkorange;
    font-size: 150%;
    text-align: center;
    color: white;
}


@media not print {
    html {
        font-size: 20px;
    }
}

h1 {
    color: white;
    background-color: var(--h1-bg-color);
    font-style: italic;
    text-shadow: 3px 2px black;
    text-align: center;
}

.md-typeset h1 {
    color: white;
}

.md-typeset h1 code {
    color: white;
}

.md-search-result__title {
    text-shadow: none;
}

h2 {
    color: black;
    background-color: var(--h2-bg-color);
    border-color: var(--h2-bg-color);
    border-style: solid;
    padding-left: 5px;
    font-weight: bold;
}

.md-typeset h2 {
    font-size: 120%;
}

h3 {
    color: black;
    background-color: rgb(247, 225, 178);
    border-color: rgb(247, 225, 178);
    border-style: double;
    border-width: thick;
    padding-left: 5px;
    font-style: italic;
}

.md-typeset h3 {
    font-size: 100%;
}

/* "code" is for inline code and "codehilite" is for code blocks */
code {
    font-weight: bold;
}

.codehilite {
    font-weight: bold;
}

img {
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

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

img.noborder {
    border-style: none;
}

/* To make an image display at a specified width,
    use the attr_list mkdocs plugin and assign a
    class to the image itself, e.g. {: class="w400" } */
img.w100 {
    width: 100px;
}

img.w150 {
    width: 150px;
}

img.w200 {
    width: 200px;
}

img.w250 {
    width: 250px;
}

img.w300 {
    width: 300px;
}

img.w350 {
    width: 350px;
}

img.w400 {
    width: 400px;
}

img.w450 {
    width: 450px;
}

img.w500 {
    width: 500px;
}

img.w550 {
    width: 550px;
}

img.w600 {
    width: 600px;
}

img.w650 {
    width: 650px;
}



.md-typeset .admonition,
.md-typeset details {
    font-size: .8rem;
}

/* set custom icons for specific admonition box types
   see https://github.com/squidfunk/mkdocs-material/issues/646

   to use, create a style block for:
    ".md-typeset .admonition.<%SLUG%> > .admonition-title::before,
     .md-typeset details.<%SLUG%> > summary::before"
   then replace <%SLUG%> with the type you're going to tweak
   (use icons from https://material.io/resources/icons/?style=baseline) */

.md-typeset .admonition.tip>.admonition-title::before,
.md-typeset details.tip>summary::before {
    color: rgb(0, 191, 165);
    content: "keyboard";
}

.md-typeset .admonition.bug>.admonition-title::before,
.md-typeset details.bug>summary::before {
    color: rgb(245, 0, 87);
    content: "play_circle_outline";
}

/* remove the "copy to clipboard" icon an feature on "summary" admonition
   boxes, which are consistently and only used for command line results */
.summary .md-clipboard {
    visibility: hidden;
}

blockquote {
    background-color: #f5f5f5;
}

.md-typeset blockquote {
    color: black;
    font-size: 90%;
}

/* Provides a means of centering a paragraph of text.  To use, place the following below the text paragraph:
   {: class="centered" }
   */
.centered {
    text-align: center;
}

/* This overlays a "zoom in" icon for all class="zoom" anchor elements. */
a.zoom::after {
    content: ""; /*zoom-in doesnt work yet*/  
    font-family: Material Icons;
    font-size: 25px;
    color: white;
    background: black;
    position: relative;
    bottom: 5px;
    margin-left: -30px;
    /* this needs to be 'negative font-size + bottom' */
    margin-right: 5px;
    /* this should be equal to bottom */
    line-height: 1;
    z-index: 1;
    opacity: 50%;
}