@import url('https://fonts.cdnfonts.com/css/satoshi');
/*@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');*/

:root {
  --accent-color: #f31179;
  --heading-color: #e28743;
}

body {
  font-family: "Satoshi", sans-serif;
  min-height: 100vh;
}

h1 {
  color: var(--accent-color);
}

h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  margin-top: 2.5em;
}

h2:after, h3:after, h4:after, h5:after, h6:after {
  content: "";
  height: 1px;
  display: block;
  background: linear-gradient(90deg, var(--heading-color), rgba(255, 255, 255, 0) 50%);
  position: relative;
  top: 0.3em;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin-bottom: 1.2em;
}

.sidebar {
  background-color: #f5f6f8;
  padding: 1.4em 3em 3em 3em;
  border-right: 2px solid #e3e5e8;
  box-shadow: 0px 0px 20px #dedede;
  height: 100%;
  min-height: 100vh;
}

@media (max-width: 767.98px) { 
  .sidebar {
    min-height: auto!important;
  }
}

.content {
  font-size: 1.3em;
  padding-top: 1.4em;
  padding-left: 3em;
  padding-bottom: 6em;
  position: relative;
}

@media (max-width: 767.98px) { 
  .content {
    padding-left: 1em;
  }
  .markdown-body {
    max-width: 90vw!important;
  }
}

.markdown-body {
  max-width: 50vw;
}

.markdown-body img {
  max-width: 100%;
  margin-bottom: 2em;
  box-shadow: 0px 0px 20px #dedede;
}

.backlinks {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid #e3e5e8;
}

.content.hasbanner {
  padding-top: 5em;
}

.banner {
  opacity: .6;
  position: absolute;
  z-index: -5;
  width: 100%;
  height: 100%;
  max-height: 25em;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.buttons {
  padding-bottom: 1em;
  margin-bottom: 2em;
  border-bottom: 1px solid #e3e5e8;
}

.buttons svg {
  width: 40px;
  height: 40px;
  stroke: #e3e5e8; 
}

.buttons a:hover svg, .buttons a.active svg {
  stroke: var(--bs-body-color); 
}