:root {
    /* TODO colors */
}
body {
    font-family: 'Verdana', sans-serif;
    margin: 50px 25px;
}

a {
    color: #2a99b6;
}

a:hover {
    color: #33bbdf;
}

.page h2 a {
    text-decoration-thickness: 0.3rem;
    text-decoration-color: #daeef3;
    /*#cbedf5;*/
}
header, footer, div.page {
    width: 760px;
    margin: 0 auto;
    background: #daeef3;
    padding: 20px 30px;
}

header h1 {
    color: #169bbd;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

div.page {
    background: #f1fbfe;
    overflow: hidden;
}


div.box-draft-warning {
    --warning-orange-1: hsl(48.4, 79.8%, 80%);
    background: var(--warning-orange-1);
}

.blog-post img {
    margin: auto;
    width: 70%;
    display: block;
}

.qed {
  width: 100%;
  text-align: right;
}

.qed::after {
  content: "□";
}

.math-block,
.math-proof,
.box-draft-warning {
  margin: 1em -30px;
  padding: 1em calc(30px + 0ex);
}

.math-block,
.math-proof {
  background-color: #e3f5f9;
  box-shadow: 2px 2px 7px #ddd;
}

.math-block>*,
.math-proof>* {
    display: inline;
}

.math-block-title {
  font-weight: bold;
  margin-right: 1ex;
}

.math-proof-keyword {
    font-style: italic;
    margin-right: 1ex;
}