html {
    color: rgb(30, 41, 58);
    background-color: rgb(248,250,250);
    /* background-color: rgb(242,237,252); */ 
    text-align: left;
    font-size: 0.95rem;
    margin: 0;
    padding: 0;
    height: 100%;

    /* Softer colours */
    /* background-color: rgb(225,222,218); */
}

/* This section is for responsive width design */

/* @media only screen and (min-width: 1150px) {
    .flexible {margin: auto; width: 1150px;}
} */

@media only screen and (min-width: 900px) {
    .flexible {margin: auto; width: 900px;}
}

@media only screen and (max-width: 650px) {
    .flexible {margin: auto; width: 650px;}
}

@media only screen and (max-width: 650px) {
    .flexible {margin: auto; width: 100%;}
}

/* Navigation bar class */

.navbar {
    /* background-color: #c39191; */
    /* background-color: #d4c2c2; */
    font-size: 0.95rem;
}

.navbar ul {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 10px;
}

.navbar li {
    display: inline-block;
    margin-right: 0px;
    margin-left: 0px;
  }

.navbar ul li {
    /*background: white;*/
    color: #222222;
    display: inline-block;
    list-style-type: none;
    padding: 10px 4px 0px 4px;
}

.navbar ul li a {
    color: #222222;
    text-decoration: none;
}

.navbar ul li a:hover {
    color: #d4a0a0;
    text-decoration: underline;
}

/* Footer bar class */

.footbar {
    /* background-color: #c39191; */
    /* background-color: #d4c2c2; */
    border-bottom: 10px;
    font-size: 0.95rem;
}

.footbar ul {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 0px;
}

.footbar li {
    display: inline-block;
    margin-right: 0px;
    margin-left: 0px;
  }

.footbar ul li {
    /*background: white;*/
    color: #222222;
    display: inline-block;
    list-style-type: none;
    padding: 0px 4px 10px 4px;
}

.footbar ul li a {
    color: #222222;
    text-decoration: none;
}

.footbar ul li a:hover {
    color: #d4a0a0;
    text-decoration: underline;
}


/* This section is for body settings */

body a {
    color: #007bff;
    text-decoration: underline;
    background-color: transparent;
}

body a:hover {
    color: #d4a0a0;
}

body {
    line-height: 1.45;
    text-align: left;
    font-weight: 400;
    font-size: 14px;

    /* Open Sans font */
    font-family: 'Open Sans', Arial, sans-serif;

    /* Computer Modern */
    /* font-family: 'Computer Modern Serif'; */

    /* Helvetica Neue */
    /* font-family: "Helvetica Neue", Arial, sans-serif; */
    /* color: #212529; */

    background-color: transparent;
    margin: 0px 20px;
    display: flex; /* displays flex-items (children) inline */
    flex-direction: column; /* stacks them vertically */
    height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
    flex: 1; /* takes the remaining height of the "container" div */
    overflow: auto; /* to scroll just the "main" div */
  }

/* This section is for headings: h1 etc. */

h1 {
    /* Center the text within h1 tags */
    text-align: center;
    /*color: #000000;*/
    font-size: 21pt;
  }

h2 {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-weight: 100;
    font-size: 15pt;
    text-decoration: underline;
    text-decoration-color: #d4a0a0;
    text-align: center;
    padding: 25px 0px 0px;
}

/* Might come back to this when I can fix toc links */
/* h2:after{
    content: "↩";
} */

.palatino {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-weight: normal;
}

.scshape {
    font-family: 'Computer Modern Serif';
    font-variant-caps: small-caps;
    font-weight: 200;
    /*font-size: 2em;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: #0066cc;*/
}

/* Styling the spoiler tag */

body details summary:hover {
    color: #3d3535;
    cursor: zoom-in;
}

/* This section is for stylistic settings */

hr {
    margin: 0px 0px;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.3), rgba(50, 50, 50, 0.4), rgba(50, 50, 50, 0.3), rgba(0, 0, 0, 0));
}

.greytext {
    color: #5f5f5f;
}

.doublestrike {
    text-decoration-style: double;
}

.date {
    color: #5f5f5f;
    font-size: small;
    margin: 0px 0px 0px 0px;
    font-weight: 200;
}

/* Alignment */

.center {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Images */

.icon {
    width: 15px !important;
}

/* Styling the code block */

/* Overwrite the code background of the highlightjs script: */
/* .hljs {background: #8f8f8d !important;} */

pre {
    backdrop-filter: blur(10px);
    border-radius: 7px;
    overflow-x: auto;
    font-size: 13px;
}

code {
    background-color: rgb(235,238,245);
    padding: 2px;
    border-radius: 3px;
    font-size: 13px;
}

code:hover{
    /* background-color: rgb(222, 228, 241); */
    background-color: rgb(233, 236, 243);
}

.warning {
    background-color: rgb(247, 255, 27);
    padding: 5px;
    border-radius: 5px;
    text-align: right;
}

.warning:after {
    content: ' ⚠';
}

.source {
    color: #5f5f5f;
    font-size: small;
    margin: 0px 0px 0px 0px;
    font-weight: 200;
    text-align: right;
}

/* Changing the colour of items on hover */

.svg:hover {
    filter: invert(13%) sepia(8%) saturate(455%) hue-rotate(314deg) brightness(96%) contrast(91%);
    /*color: #2c2828;*/
    /*https://codepen.io/sosuke/pen/Pjoqqp*/
}

.linkedin:hover {
    color: rgb(66, 140, 205) !important;
}

.github:hover {
    color: rgb(128, 39, 183) !important;
}

.stackexchange {
    filter: grayscale(100%);
}

.stackexchange:hover {
    filter: grayscale(0%);
    color: rgb(168, 0, 0) !important;
}

/* Interactive Mathematics Stack Exchange Logo */

.msetop {
    fill: #CB181F;
    filter: grayscale(80%);
    stroke:rgb(225, 6, 141);
    stroke-width:0.1pt;
}

.msetop:hover {
    filter: grayscale(0%);
    fill: #CB181F;
}

.mseright {
    fill: #B6161C;
    filter: grayscale(80%);
    stroke:rgb(225, 6, 141);
    stroke-width:0.1pt;
}

.mseright:hover {
    filter: grayscale(0%);
    fill: #B6161C;
}

.msebottom {
    fill: #7F0F13;
    filter: grayscale(80%);
    stroke:rgb(225, 6, 141);
    stroke-width:0.1pt;
}

.msebottom:hover{
    filter: grayscale(0%);
    fill: #7F0F13;
    /* stroke:none; */
}