:root {
  --padding: 1em;
  --text-color: #4a4a4a;
  --bg-color: #f9f9f9;
  --bg-dark-color: #f1f1f1;
  --highlight-color: #1d7484;
  --highlight-color-rgba: ■ rgba(29, 116, 132, 0.2);
  --highlight-secondary-color: #982c61;
  --highlight-dark-color: #144f5a;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/static/fonts/EBGaramond-VariableFont_wght.ttf")
}

.no-bullets {
    list-style-type: none;
    padding-left: 0;
}

.banner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    text-align: center;
    background-color: beige;
}

.no-decoration:hover {
    text-decoration: none;
    border-bottom: none;
}

html,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "EB Garamond";
    font-weight: 500;
}

body {
    max-width: 95%;
}

main {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

main > * {
    padding: 1rem;
}

#np-outer-container {
    border: 4px solid var(--highlight-color);
    padding: 0 1em;
}

#np-inner-container {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

#np-cover-art {
    max-height: 100px;
}

#np-listenbrainz a {
    flex-grow: 1;
    text-align: center;
    align-self: center;
}

.left-sidebar-item > a {
    display: inline-block;
    padding: 4px;
    width: 100%;
}

.left-sidebar-item > a:hover {
    background-color: var(--bg-dark-color);
}

.tag-bar {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin-bottom: 0.5em;
}

.main-content {
    flex: 3 1 0;
    max-width: 60%;
}

.main-content a {
    text-decoration: underline;
}

.main-content a[href^="http://"]:not([href*="negatethis.com"]),
.main-content a[href^="https://"]:not([href*="negatethis.com"]),
.main-content a[href^="//"]:not([href*="negatethis.com"]),
.h-entry a[href^="http://"]:not([href*="negatethis.com"]),
.h-entry a[href^="https://"]:not([href*="negatethis.com"]),
.h-entry a[href^="//"]:not([href*="negatethis.com"]) {
  background: url(/static/img/ext.svg) no-repeat;
  background-origin: padding-box;
  padding-right: 1.3em;
  background-size: 0.7em;
  background-position-y: center;
  background-position-x: calc(100% - 0.3em);
  text-decoration: none;
}

.h-entry .u-photo {
  max-width: 50%;
}

#webmentions-inner-container {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.webmentions-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

.webmentions-item p {
    margin: 0;
}

.webmention-avatar {
    max-height: 5%;
    max-width: 5%;
    margin: 0;
}

footer nav {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

#socials li {
    box-sizing: border-box;
    border: 1px solid var(--highlight-color);
    text-align: center;
}

#socials li a {
    display: inline-block;
    width: 100%;
    padding: 4px;
}

#socials li a:hover {
    background-color: var(--bg-dark-color);
}

@media screen and (max-width: 850px) {
  main {
    flex-flow: column wrap;
  }

  .main-content {
      max-width: 100%;
      order: 1;
  }

  #left-sidebar {
      order: 2;
  }

  footer {
      order: 3;
  }
}