/*** hugo beaureau main.css **************************************************/
/*** license: GPL3 ***********************************************************/
html {
    height: 100vh;
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--grey-1);
    font-size: 0.9em;
    line-height: 1.5em;
    font-family: var(--font-family-monospace);
    color: var(--text);
}
/*****************************************************************************/
/*** grid ********************************************************************/
body {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 960px) 1fr;
    grid-template-rows: minmax(auto, auto) minmax(auto,auto) 1fr minmax(auto, auto);
    grid-auto-rows: min-content;
}
header {
    grid-column: 1 / -1;
    grid-row:    1;
}
main {
    grid-column: 2 / 3;
    grid-row: 3;
}
footer {
    grid-column: 1 / -1;
    grid-row: 4;
}
/*** sub grid *****************************************************************/
main {
    display: grid;
    grid-template-columns: minmax(auto, 960px);
    grid-template-rows: minmax(auto, max-content) minmax(auto, auto) minmax(auto, max-content);
    grid-auto-rows: min-content;
    animation:intro 1s both;
    animation-delay:.15s;
}
main .top {
    grid-column: 1 / -1;
    grid-row: 1;
}
main .in-between {
    grid-column: 1 / -1;
    grid-row: 2;
}
main .bottom {
    grid-column: 1 / -1;
    grid-row: 3;
}
/*****************************************************************************/
/*** header / nav ************************************************************/
header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--tone-one-dark);
/*    padding: 0.5em 0; */
    font-size: 1em;
    line-height: 2rem;
}
header nav.menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
}
header nav.menu ul.main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
header nav.menu ul.secondary {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
header .title a, header nav.menu ul li a {
    padding: .5em .5em;
    color: var(--link);
    text-decoration: none;
    border-bottom: none;
    transition: var(--transition);
}
header .title a:hover, header nav.menu ul li a:hover {
    color: var(--link-hover);
    text-decoration: none;
    background: var(--tone-one-dark);
    padding: .5em .5em;
}
header nav ul li.current {
    background-color: var(--grey-4);
}
header nav ul li.current a{
    color: var(--tone-one-bright);
}
/*****************************************************************************/
/*** common main settings ****************************************************/
main {
    padding: 0 1rem;
}
main .top {
    text-align: center;
    padding: 1em 0;
    font-size: 1.5em;
}
main .top a {
    border-bottom: none;
}
main .in-between {
    padding-bottom: 1em;
}
main .bottom {
    padding: 2em 0;
}
main hr {
    border: none;
    border-bottom: var(--border-tone-one-dark);
    height: 0px;
/*    background: var(--grey-2); */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
main code {
    white-space: pre-wrap;
    font-family: var(--font-family-monospace);
    font-size: .9em;
    color: var(--tone-one-bright);
    background-color: var(--grey-3);
    border: 0px solid var(--grey-3);
 /* border-radius: 0.2em; */
    padding: 0 .5em;
    margin: 0;
    display: inline-flex;
    word-break: break-all;
    line-height: 1.5em;
}
.vh50 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main h1 {
    font-size: 1.5rem;
}
.main h2 {
    font-size: 1.3em;
}
.main h3 {
    font-size: 1.1em;
}
.main h4 {
    font-size: 1em;
}
.main h5 {
    font-size: 0.9rem;
}
.main h6 {
    font-size: 0.9rem;
}
img[src$='#center']
{
    display: block;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}
img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}
img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}
/*****************************************************************************/
/*** footer ******************************************************************/
footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px dashed var(--tone-one-dark);
/*    padding: 0 .5em; */
    font-size: 1em;
    line-height: 2rem;
}
footer .title {
    color: var(--link);
}
footer a {
    color: var(--link);
    text-decoration: none;
    border-bottom: none;
    transition: var(--transition);
    padding: .5em .5em;
}
footer a:hover {
    color: var(--link-hover);
    text-decoration: none;
    background: var(--tone-one-dark);
    padding: .5em .5em;
}
footer .status {
    padding-left: .5em;
}
/*****************************************************************************/
/*** keyframes ***************************************************************/
@keyframes highlight {
    from {
        background: var(--tone-one);
        color: var(--text-bright);
    }
    to {
        background: var(--grey-1);
        color: var(--text);
    }
}
@keyframes intro {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/*****************************************************************************/
/*** more ********************************************************************/
a {
    color: var(--text);
    text-decoration: none;
    border: none;
    border-bottom: 1px dotted var(--tone-one-dark);
    transition: var(--transition);
}
a:hover {
    color: var(--text-brighter);
    background-color: var(--tone-one-dark);
    text-decoration: none;
}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
    animation: highlight 2s ease;
}
.asterisk {
    color: #BF9936;
}
.highlight {
    color: var(--tone-one);
}
.green {
    color: #397;
}
.red {
    color: #933;
}
/*****************************************************************************/
/*** accordion ***************************************************************/
.accordion {
    background-color: var(--grey-2);
    color: var(--text);
    cursor: pointer;
    padding: 0.5em;
    margin: 0.5em 0;
    text-align: left;
    transition: 0.4s;
/*    border-radius: 0.2em; */
}
.active, .accordion:hover {
    background-color: var(--tone-one-dark);
    color: var(--text-bright);
}
.accordion:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: '\f13a';
    color: var(--text);
    float: right;
    margin-left: 5px;
    transition: 0.4s;
}
.active:after {
    font-weight: 700;
    font-family: "Font Awesome 5 Free";
    content: "\f056";
    color: var(--text-bright);
}
.active, .accordion:hover:after {
    color: var(--text-bright);
}
.accordion.active > .panel {
      border: var(--border-tone-one-dark);
}
.panel {
    padding: 0 0.5em;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
/*****************************************************************************/
/*** status code pages / external pages **************************************/
#svg-status-code-401 {
    fill: var(--text-dark);
    height: 50vh;
    max-width: 100vw;
}
#svg-status-code-404 {
    fill: var(--black);
    height: 50vh;
    max-width: 100vw;
}
#svg-dirlisting-disabled {
    fill: var(--text-dark);
    height: 30vh;
    max-width: 100vw;
}
#peace-fingers {
    fill: var(--text-dark);
    height: 50vh;
    max-width: 100vw;
}
footer .left .response {
    padding-left: .5em;
}
/*****************************************************************************/
/*** categories / tags *******************************************************/
main.categories-list .in-between .list article, main.tags-list .in-between .list article {
    padding: 1ch 0;
}
main.categories-list .bottom .fa-arrow-left, main.categories-taxonomy .bottom .fa-arrow-left, main.tags-list .bottom .fa-arrow-left, main.tags-taxonomy .bottom .fa-arrow-left {
    padding-right: 1ch;
}
/*** taxonomy lists ***********************************************************/
main.categories-taxonomy .top .relpermalink, main.tags-taxonomy .top .relpermalink {
    border-bottom: 1px dotted var(--tone-one);
}
main.categories-taxonomy .group, main.tags-taxonomy .group {
    display: flex;
    margin-bottom:1.9em;
}
main.categories-taxonomy .year, main.tags-taxonomy .year {
    padding-top:6px;
    margin-right:1.8em;
    font-size:1.6em;
    opacity:.6
}
main.categories-taxonomy .list, main.tags-taxonomy .list {
    flex-grow:1;
    margin:0;
    padding:0;
    list-style:none
}
main.categories-taxonomy .item, main.tags-taxonomy .item {
    border-bottom:1px dashed var(--tone-one-dark);
}
main.categories-taxonomy .item a, main.tags-taxonomy .item a {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:12px 6px
}
main.categories-taxonomy .date, main.tags-taxonomy .date {
    flex-shrink:0;
    margin-left:1em;
    opacity:.6
}
main.categories-taxonomy a:hover .date, main.tags-taxonomy a:hover .date {
    opacity: 1;
}
main.categories-taxonomy .in-between a, main.tags-taxonomy .in-between a {
    box-shadow: none;
    border: none;
}
/*****************************************************************************/
/*** responsiveness **********************************************************/
@media (max-width: 768px) {
}