body {
    background-color: #FDFDFF;
}

article {
    padding: 0;
}

.brand {
    padding-top: 0;
    margin-top: 3rem;
}

h1 {
    margin-top: 3rem;
}

#brandContainer h1,
#brandContainer p {
    display: inline;
}

/* Fix bug when there are no line numbers */
/* TODO Why is there no scroll bar without line numbers? */
div>pre>code {
    padding-left: 1rem;
}

.content-title {
    margin: 0;
}

.sidebar {
    padding-right: 2em;
    padding-top: 3em;
}

.sidebar>p {
    margin: 0;
    margin-right: 0;
    width: 100%;
}

.div-class {
  /* display: flex; */
  /* justify-content: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
    body {
        padding-left: 5%;
    }
    .sidenote,
    .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        padding: 1%;
        vertical-align: baseline;
        position: relative;
        color: #4f4f4f;
        background: #F6FBFF;
    }
}

@media (min-width: 761px) {
    body {
        padding-left: 5%;
    }
    .highlight {
        width: 70%;
    }
    h2, h3, p {
        width: 70%;
    }
    .sidenote {
        margin-right: -40%;
        width: 30%;
    }
    .marginnote {
        margin-right: -40%;
        width: 30%;
    }
    blockquote {
        width: 70%
    }
    blockquote>p {
        width: 100%;
    }
}

@media (max-width: 2048px) {
    body {
        padding-left: 6%;
    }
}

.highlight div,
.highlight pre {
  overflow-x: auto;
}

/* landing page */

/* .pure-g h1, .pure-g h2, .pure-g h3, .pure-g div { */
/*     width: 100%; */
/* } */

.index-post h2 {
    width: 100%;
}

.pure-g p {
    max-width: 30em;
    width: 100%;
}

.pure-g .pure-u-sm-1-4 {
    padding-right: 1%;
}

.distributed-horizontally {
    margin-top: 1em;
    display: flex;
    justify-content:space-between;
    margin-left: 5%;
    width: 90%;
  flex-flow: row wrap;
}

.distributed-horizontally hr {
  width: 100%;
}

.story-img {
    width: 80%;
    max-width: 10em;
    margin: auto;
    display: block;
}

.page-list .content-title:first-child {
    margin-top: 0.5rem;
}

.list-page ul, .list-page li {
    max-width: unset;
    width: 100%;
    padding-right: 1%;
}

.break {
  /* flex-basis: 100%; */
    /* height: 0; */
    width: 100%;
}

.img-container img {
    margin-top: 5%;
    margin-bottom: 5%;
}

@media (max-width: 568px) {
    .img-container img {
        margin-top: 30%;
        margin-bottom: 10%;
    }
}

@media (max-width: 760px) {
    .img-container img {
        margin-top: 10%;
        margin-bottom: 5%;
    }
}

$small: only screen and (min-width: 35.5em);  /*  568px */
$medium: only screen and (min-width: 48em);   /*  768px */
$large: only screen and (min-width: 64em);    /* 1024px */
$x-large: only screen and (min-width: 80em);  /* 1280px */
$retina: only screen and (min-width: 90em);   /* 1440px */

.pure-hidden { display: none; }

@media screen and (max-width: 35.438em) { // .pure-hidden-xs
    .pure-hidden-xs { display: none !important; }
    .pure-visible-sm { display: none !important; }
    .pure-visible-md { display: none !important; }
    .pure-visible-lg { display: none !important; }
    .pure-visible-xl { display: none !important; }
}

@media screen and (min-width: 35.5em) and (max-width: 47.938em) { // .pure-hidden-sm
    .pure-visible-xs { display: none !important; }
    .pure-visible-md { display: none !important; }
    .pure-visible-lg { display: none !important; }
    .pure-visible-xl { display: none !important; }
    .pure-hidden-sm { display: none !important; }
}

@media screen and (min-width: 48em) and (max-width: 63.938em) { // .pure-hidden-md
    .pure-visible-xs { display: none !important; }
    .pure-visible-sm { display: none !important; }
    .pure-visible-lg { display: none !important; }
    .pure-visible-xl { display: none !important; }
    .pure-hidden-md { display: none !important; }
}

@media screen and (min-width: 64em) and (max-width: 79.938em) { // .pure-hidden-lg
    .pure-visible-xs { display: none !important; }
    .pure-visible-sm { display: none !important; }
    .pure-visible-md { display: none !important; }
    .pure-visible-xl { display: none !important; }
    .pure-hidden-lg { display: none !important; }
}
@media screen and (min-width: 80em) and (max-width: 89.938em) { // .pure-hidden-xl
    .pure-visible-xs { display: none !important; }
    .pure-visible-sm { display: none !important; }
    .pure-visible-md { display: none !important; }
    .pure-visible-lg { display: none !important; }
    .pure-hidden-xl { display: none !important; }
}
@media screen and (min-width: 90em) { // .pure-hidden-ret
    .pure-visible-xs { display: none !important; }
    .pure-visible-sm { display: none !important; }
    .pure-visible-md { display: none !important; }
    .pure-visible-lg { display: none !important; }
    .pure-visible-xl { display: none !important; }
    .pure-hidden-ret { display: none !important; }
}

body {
    font-family: "EB Garamond";
}

.mono {
    font-family: monospace;
}

.content {
    padding-right: 0.5em;
}

.content-title {
    font-style: normal;
}

hr {
    max-width: unset;
    width: 70%;
}

.home-page hr {
    max-width: unset;
    width: 100%;
}

.home-page footer {
    max-width: unset;
    width: 100%;
}

footer {
    max-width: unset;
}

.hugo-cite-intext {
    white-space: nowrap;
}

.hugo-cite-group .hugo-cite-citation {
    white-space: normal;
    width: 600px;
}

.hugo-cite-group {
    white-space: normal;
}

.hugo-cite-bibliography dl {
    width: 100%;
}

h2 {
    margin-top: 1.5em;
}

#brandContainer .marginnote {
    margin-right: 0;
    width: 25%;
}

.home-page .marginnote {
    display: none !important;
}

ol {
    width: 100%;
}

@media (min-width: 761px) {
    ol {
        width: 70%;
    }
}

details {
    outline: 0px !important;
    border: 1px solid #aaa;
}

details :focus {
    outline: 0px !important;
}

details[open] {
    padding: 0.5em;
    border-left: 1px solid #aaa;
}

details[open] summary {
    padding: 0em;
}

@media (max-width: 761px) {
    .title-panel {
        display: none !important;
    }
}