/* Load Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Raleway:wght@400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Heebo&display=swap');


/* Styles apply to all screens */
body {
  color: #333;
  line-height: 1.5;
}

a {text-decoration: none;}
a:hover {text-decoration: underline}

#top_colorbar {background-color: #6f93bc;}
#nav_colorbar {background-color: #37516f;}

#nav_ContentContainer {width: 100%;  }

p {
    margin-top: 0rem;
}
h1, h2, h3, h4 {
    color: #37516f;
    margin-top: 2rem;
    margin-bottom: 0rem;
    font-family: "Heebo","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {    font-size: 2.2em; }
h2 {    font-size: 1.8em; }
h3 {    font-size: 1.6em; }
h4 {    font-size: 1.4em; }

p {margin-bottom: 1rem;}
.ad_div {margin-top: 1.5rem;}
/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: "Heebo","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
}

#top_ContentContainer,#nav_ContentContainer,#maincontent_container {
    max-width: 1200px;
}

.pure-g > div {
    box-sizing: border-box;
}
.padded-box {
    padding: 1em;
}

.pure-button {
    background-color: #3e885b;
    color: white;
}
#searchbtn i {
    font-size: 1.2em;
}


/* Things for small screens */

@media screen and (max-width:48em) {
    #logoimg {width:60%; height: auto; max-width: 300px }
    #top_ContentContainer {
        padding-left:2rem;
        padding-top:1rem;
        padding-bottom:.3rem;
    }
    #logodiv {
        text-align: center;
    }
    h1 {font-size: 1.5rem;}
    #maincontent_container {
        background-color: white;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Things for larger screens */


@media screen and (min-width:48em) {
    #top_ContentContainer {
        padding-left: 3rem;
        padding-top: 2rem;
        padding-bottom: 1rem;
        padding-right: 3rem;
    }
    #nav_ContentContainer { padding-left: 2em; }
    #maincontent_container {
        background-color: white;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.fmh_homepage_subjects {
    text-align: center;
    padding-top: 5px;
    border-radius: 10px;
}
.fmh_homepage_subjects:hover {
    background-color: #F0F5FF
}
.fmh_homepage_subjects h2 {
    font-weight: 700;
    font-size: 16pt;
    margin-top: 5px
}
footer {
    margin-top: 4em;
    padding-left: 2em;
}
.mathway {
    width: 100%;
    max-width: 600px;
    height: 700px;
    border: 1px solid #E1E1E1;
}
.highlighted_box {
    box-shadow: 2px 2px 4px 1px #ccc;
    margin-left: 3em;
    background-color: aliceblue;
    color: black;
    border-color: #37516f;
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    padding-left: 1em;
    padding-right: 1em;
    width: 70%;
    max-width: 400px;
}

/* pure-hidden-sm */
@media screen and (max-width:48em) {
    .pure-hidden-sm{display:none}
}

/* fmh_pure_hide_medium_and_up */
@media screen and (min-width:48em) {
    .fmh_pure_hide_medium_and_up{display:none}
}