@import url(https://fonts.googleapis.com/css?family=Crafty+Girls|Libre+Baskerville:400,400italic|Roboto+Condensed:400,700);

:root {
  --aside-width: 250px;
}

/* reset */
html, body {
  margin:0;
  padding:0;
  min-height: 100vh;
  position: relative;
}

a {
    text-decoration: none;
}


[data-prepend]::before {
  content: attr(data-prepend);
}

/* nav aka aside */

aside {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--aside-width);
  height: 100vh;
  background-color: #e0ecf0;
  border-right: solid 0.5px #707479;
}

aside #user {
  border-top: solid 1px white;
  border-bottom: solid 1px white;
  text-align: center;
  margin-bottom: 2em;
  line-height: 2em;
}

aside #menu-entries {
  padding: 0 .3em;
}

aside a.menu-entry {
  display: block;
  text-decoration: none;
  line-height: 2rem;
  padding-left: 1em;
  color: #222;
  border-radius: .2em;
}

aside a.menu-entry:hover {
  color:blue;
  background-color: white;
}

aside a.menu-entry.active {
  color:blue;
  background-color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

aside #brand {
  line-height: 3rem;
  text-align: center;
  font-weight: 700;
  font-size: 130%;
  color: white;
  background-color: #262626;
}

/* main section */

main#payload {
  min-height: 100vh;
  padding-left: var(--aside-width);
}

main#payload section.container-fluid {
  padding: 1em;
}

/* main title */
main#payload #page-title.container-fluid {
  background-color: #454545;
  text-align: center;
  padding: 0 1em;
}

#page-title h2 {
  line-height: 3rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  color: white;
}

/* Childishness */

#post-edit {
  .post-edit-label, label {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    margin-top: .8rem;
  }

  pre {
    padding: 0.375rem;
    background-color: #eee;
    border-radius: var(--bs-border-radius);
  }
}

.post {
    background-color: #def;
    border-radius: 10px;
    padding: 1em 1em 0.5em 1em;
    margin-bottom: 1em;
    box-shadow: 0px 3px 5px -2px rgba(0,0,95,0.3);
}

.post.private-post {
    background-color: #ffffe4;
}

.post-header {
    margin-bottom: 1em;
}

.post-title {
    font-size: 1.4em;
    letter-spacing: 0.07em;
}

.post-title:hover {
    text-decoration: none;
}

.post-content em {
    font-style: italic;
    font-family: 'Libre Baskerville', serif;
}

.post-meta {
    font-size: smaller;
    line-height: inherit;
}

.post-footer {
    margin-top: 1em;
    font-size: smaller;
}

span.like-widget {
    cursor: pointer;
}

svg.heart {
    fill: transparent;
    stroke-width: 80pt;
    stroke: red;
    max-height: 1em;
    vertical-align: baseline;
}

span.liked {
    color:red;
}

span.liked svg.heart {
    fill: red;
}

.pagination .pagination-button {
  display: inline-block;
  border: gray solid thin;
  line-height: 2em;
  min-height: 2em;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  margin-left: .5em;
}

.pagination .pagination-button.pagination-active {
  background-color: #eee;
  border-color: #08f;
}

.pagination a.pagination-button:hover {
    background-color: #08f;
    color: white;
    transition: background-color .5s, color .5s;
  }
}

/* page editor */
#page-nav nav {
  background-color: #eaeaea;
  border-radius: .3em;
}


#page-render {
  border: solid lightgray 0.5px;
  padding: 0.5em;
  border-radius: 6px;
}