@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 800;
  src: local("Cantarell Extra Bold"), local("Cantarell-ExtraBold"), url(fonts/cantarell-extra-bold-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 600;
  src: local("Cantarell Bold"), local("Cantarell-Bold"), url(fonts/cantarell-bold-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 400;
  src: local("Cantarell Regular"), local("Cantarell-Regular"), url(fonts/cantarell-regular-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}

html, body {
  font-size: 14px;
  background-color: #fafafa;
}

@media (min-width: 600px) {
  html, body {
    font-size: 16px;
  }
}

@media (min-width: 900px) {
  html, body {
    font-size: 18px;
  }
}

@media (min-width: 1400px) {
  html, body {
    font-size: 20px;
  }
}

main, footer, .nav-container {
    max-width: 800px;
    width: 87%;
}

@media (min-width: 600px) {
  main, footer, .nav-container {
      width: 80%;
  }
}

/* navbar */
.nav{
  background-color: #1a5fb4;
  background: linear-gradient(90deg, #1a5fb4 0%, #26a269 100%);
  padding: 1em 0;
}

.nav span {
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: 3px;
}
.nav ul {
  margin-top: 1em;
}
.nav li {
  margin: 0 0.3rem;
  padding: 0;
  opacity: 1;
}
.nav span {
  background: rgba(255,255,255,0);
  padding: 0.5em 1em;
  border-radius: 0.4em;
  text-align: center;
}
.nav span:hover {
  background: rgba(255,255,255,0.2);
}

@media (min-width: 600px) {
  .nav ul {
    margin-top: -0.2em;
  }
}

.nav-title{
  color: #FFFFFF;
}

/* quotes */
blockquote{
  margin-top: 0;
  padding: 1em 1.2em;
  border: none;
  border-radius: 1em;
  background: #ffffff;
  color: #353535;
  overflow-wrap: break-word;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 1px 3px 1px rgba(0,0,0,0.07), 0 2px 6px 2px rgba(0,0,0,0.03);
}
@media (min-width: 900px) {
  blockquote{
    padding: 1.6em 1.9em;
  }
}

blockquote .html-video{
  margin-top: 15px;
  padding: 20px;
}

.post img{
  padding: 0;
  padding-top: 0.5em;
  margin-bottom: 0;
  max-height: 800px;
}

.post .html-video {
  max-height: 800px;
}

/* fonts */
p, a, h1, h2, h3, li, span, .catalogue-title, .post-title, .catalogue-time {
  font-family: "Cantarell";
}

.post h1{
  margin-top: 1.5em;
  font-size: 1.6em;
}

.post h3{
  font-weight: 600;
  margin: 2em 0 0.5em;
}

.post h1 + h3 {
  margin-top: 0.5em;
}

h1.post-title{
  font-size: 2.5em;
  text-align: left;
  margin-top: 0.8em;
}

@media (min-width: 900px) {
  h1.post-title{
    margin-top: 0.6em;
  }
}

.post-details{
  font-family: "Cantarell";
  margin-bottom: 2em;
  font-weight: 600;
}

.post p{
  text-align: left;
}

/* code blocks */
pre{
  background: #ffffff;
  border: 1px solid #deddda;
  border-radius: 8px;
  padding: 10px;
}

/* heading anchors */
.heading-anchor {
  display: inline-block;
  line-height: 1;
  margin-left: -22px;
  opacity: 0;
  padding-right: 6px;
}

a.heading-anchor:hover {
  text-decoration: none;
}

:is(h1, h2, h3, h4):hover .heading-anchor {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
    body, :root {
        color: #FFFFFF;
        background-color: #242424;
    }

    blockquote {
        background-color: #363636;
        border-color: #FFFFFF50;
    }

    code {
        background-color: #545454;
        color: #d47480;
    }

    .catalogue-title, p, .pagination span, footer span, a.arrow, a.top, .post :is(h1, h3), main h1, ul, ol {
        color: #FFFFFF !important;
    }

    .catalogue-item {
        border-bottom-color: #FFFFFF50;
    }

    .catalogue-line, .pagination {
        border-top-color: #FFFFFF50;
    }

    svg {
        filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(211deg) brightness(105%) contrast(105%);
    }
}