:root {
/* CSS HEX */
--brown: #780000ff;
--red: #c1121fff;
--beige: #fdf0d5ff;
--blue: #1a659e;
--orange: #E07B1B;
--orange-dark: #B36216;
}

* {
  color: #333;
}


.layout-container {
  max-width: 680px;
  margin: 0 auto;
}

.layout-content {
  margin-block-start: 3rem;
}



#block-drpl-site-branding,
#block-drpl-learn-sitebranding
{
  color: #555;
  font-family: sans-serif;
  font-size: 1.7rem;
  font-style: italic;
  margin-block: 3rem;

  a {
    /* font-size: 2rem; */
    font-style: italic;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none;
    text-transform: uppercase;
  }
}

.reading > header {
  border-bottom: solid #ddd 1px;
  font-style: italic;
  padding-block-end: 2rem;
}

.reading .views-row {
  padding-block-start: 1rem;
  padding-block-end: 3rem;

  &:not(:last-of-type) {
    border-bottom: solid #ddd 1px;
  }


}

.views-field-field-url {

  .field-content {
    display: inline-block;

    &::before {
      content: '» ';
    }
  }

}

.views-field-title {
  h2 {
    a {
      text-decoration: none;
    }
  }
}

code {
  background: var(--beige);
  border-radius: 4px;
  padding: 2px 4px;

}

a {
  color: var(--blue);
  text-underline-offset: 3px;

  &:hover {
    color: var(--red);
  }

}

nav, [id$="-tabs"]
{
  ul:not(.toolbar-menu) {
    padding-inline-start: 0;

    li {
      display: inline-block;
      list-style-type: none;
      margin-inline-end: 2rem;
    }

    a {
      font-family: sans-serif;
      font-size: 0.9rem;
      text-decoration: none;
      text-transform: uppercase;


      &.is-active {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
      }

      &:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
      }
    }

  }
}

nav.pager {
  text-align: center;

  li.is-active a {
    font-weight: bold;
    text-decoration-thickness: 2px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}


main + footer {
  background: #eee;
  font-size: 85%;
  line-height: 1.4rem;
  margin-block: 4rem;
  padding: 0.5rem 1rem 0.8rem 1rem;
  text-align: center;
}

hr {
  background: #ccc;
  border: none;
  height: 1px;
  margin-block-start: 3rem;
  margin-block-end: 3rem;
}

.rss-wrapper {
  text-align: center;
  margin-block-start: 3rem;

  a {
    background: var(--orange);
    /* border: solid var(--orange-dark) 1px; */
    color: #fff;
    font-family: sans-serif;
    font-size: 90%;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: lowercase;

    &:hover {
      background: var(--orange-dark);
    }
  }
}