@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@use "sass:math" {}html, body {
  font-family: sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
  color: #557;
  overflow-x: hidden; }
  html > div, body > div {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column; }

article {
  flex-grow: 1; }
  article .heading {
    background: #54ffc4;
    background: linear-gradient(320deg, #54ffc4 0%, #64c5d4 100%); }
    article .heading h1 {
      line-height: 80px;
      color: #000000; }
    article .heading > * {
      margin: auto;
      max-width: 960px; }
  article > section {
    margin: auto;
    max-width: 960px; }
    article > section.full-width {
      max-width: 100%;
      background: rgba(0, 0, 0, 0.05);
      text-align: center; }
  article blockquote {
    border-left: 3px solid #AC75FF;
    margin-inline-start: 20px;
    padding-left: 20px; }
  article pre {
    max-width: 920px;
    overflow-x: auto;
    font-size: 75%;
    background: rgba(0, 0, 0, 0.05);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 20px;
    box-sizing: border-box;
    border: 2px solid #223;
    border-radius: 10px;
    flex-grow: 1;
    box-shadow: 8px 8px 0 #07E5A9;
    font-weight: bold; }
  article img {
    display: block;
    margin: auto;
    max-width: 960px; }

header {
  background: #223;
  color: #ffe;
  display: flex;
  line-height: 60px;
  overflow-y: hidden;
  height: 60px; }
  header > a {
    flex-grow: 1; }
    header > a:hover svg {
      opacity: 0.8; }
  header ul {
    margin: 0; }
  header li {
    list-style: none;
    margin: 0 1em;
    display: inline-block; }
    header li a {
      color: #FFC847; }
  header .icon {
    height: 60px !important; }
  header h1 {
    padding: 0 0.5em;
    margin: 0; }
    header h1 a {
      color: #ffffff;
      text-decoration: none; }
    header h1 a:hover {
      text-decoration: underline; }

main h1, main h2, main h3, main h4, article h1, article h2, article h3, article h4 {
  font-family: "Playfair Display", serif; }

main {
  flex-grow: 1; }
  main > .banner {
    width: 100%;
    height: 240px;
    background: #07E5A9;
    background: linear-gradient(320deg, #07E5A9 0%, #64c5d4 100%);
    overflow-x: hidden; }
    main > .banner section {
      background: #ffffff;
      z-index: 200; }
  main .cards-right {
    justify-content: flex-end !important;
    align-content: center !important;
    height: 100%; }
    main .cards-right > section {
      max-width: 470px !important;
      width: 470px !important; }
  main .cards {
    width: 960px;
    max-width: 960px;
    margin: 10px auto 50px auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    gap: 20px; }
    main .cards > section {
      box-sizing: border-box;
      padding: 10px;
      width: 246.15385px;
      border-bottom: 2px solid #223;
      padding-bottom: 0;
      max-height: 200px;
      overflow: hidden;
      border: 2px solid #223;
      border-radius: 10px;
      flex-grow: 1;
      box-shadow: 8px 8px 0 #FFC847; }
      main .cards > section:nth-child(3n) {
        box-shadow: 8px 8px 0 #E53207; }
      main .cards > section:nth-child(2n) {
        box-shadow: 8px 8px 0 #07E5A9; }
      main .cards > section a {
        color: #223;
        text-decoration: none; }
        main .cards > section a:hover h2 {
          text-decoration: underline; }
        main .cards > section a:active, main .cards > section a:visited {
          color: #223; }
      main .cards > section h2, main .cards > section h3 {
        margin: 5px 0; }
      main .cards > section p {
        height: 100%;
        text-overflow: ellipsis;
        margin-bottom: 0; }
      main .cards > section.fullwidth {
        flex-grow: 1;
        width: 960px;
        min-width: 960px; }

footer {
  background-color: #ddd; }

ul.tags {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  padding: 0; }
  ul.tags li {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-style: italic;
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 5px; }
    ul.tags li.selected {
      background: #FFC847; }
    ul.tags li a {
      color: black;
      text-decoration: none;
      white-space: nowrap; }
      ul.tags li a:hover {
        text-decoration: underline; }

svg.icon {
  width: 2em;
  height: 2em;
  display: inline; }
  svg.icon path {
    fill: #ffe; }

a:hover svg.icon path {
  fill: #FFC847; }