html {
    font-size: 6.25%; /* rem = px */
}

body {
    margin: 40px auto;
    padding: 0px 20px;
    max-width: 700px;

    line-height: 1.6;
    font-size: 18rem;
    font-family: "Iosevka", "Iosevka Fixed Web", monospace;

    background-color: #111111;
    color: white;
}

/* text elements */
a { color: #00aaff; }
a:visited { color: #00aaff; }

h1, h2, h3 {
    line-height: 1.2;
}

.special {
    color: #b00b1e;
    font-style: normal;
    font-weight: bold;
}

.muted {
    color: #555;
    font-size: 16rem;
}

code:not(div.codehilite code) {
    font-family: inherit;
    border: 1px solid #333;
    background-color: #0e0d0d;
    border-radius: 5px;
    padding: 0px 4px;
}

/* tables */
table {
    border-spacing: 0;
    border-collapse: separate;
}

table img {
    max-width: 100%;
    height: auto;
    width: auto;
}

th, td {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 5px;
}

th:first-child,
td:first-child {
  border-left: 1px solid #333;
}

th {
  background: #222;
  border-top: 1px solid #333;
}

table tr:first-child th:first-child { border-top-left-radius: 20px; }
table tr:first-child th:last-child { border-top-right-radius: 20px; }
tbody tr:last-child td:first-child,
tbody tr:last-child th:first-child { border-bottom-left-radius: 20px; }
tbody tr:last-child td:last-child,
tbody tr:last-child th:last-child { border-bottom-right-radius: 20px; }

/* blog stuff, but it could apply to other pages eventually i guess */

.codehilite {
    background-color: #0e0d0d !important;
    border: 1px solid #333;
    color: white !important; 
    border-radius: 10px;
    padding-left: 20px;
    overflow-x: scroll;
}

.codehilite * {
    font-family: "Iosevka", "Iosevka Fixed Web", monospace;
}

.MathJax_Display {
    overflow-y: hidden;
    overflow-x: scroll;
}

figure {
    text-align: center;
    max-width: 100%;
    margin: 24px 0px;
}

figure img {
    max-width: 60%;
}

figcaption {
    max-width: 75%;
    font-size: 16rem;
    color: #bbb;
    margin: auto;
}

.title {
    margin-bottom: 10px;
}

.heading {
    font-size: 36rem;
    font-weight: bold;
    line-height: 1.2;
}

figure.wide img {
    max-width: 100%;
}

@media only screen and (max-width: 500px) {
  figure img {
    max-width: 100%;
  }

  figcaption {
    max-width: 100%;
  }
}