:root {
  --white: hsl(0, 0%, 100%);
  --oil-matisse: hsl(16, 87%, 59%);
  --oil-matisse-light: hsl(16, 100%, 89%);
  --grey-100: hsl(0, 0%, 97%);
  --grey-200: hsl(0, 0%, 87%);
  --grey-300: hsl(0, 0%, 77%);
  --grey-400: hsl(0, 0%, 67%);
  --grey-500: hsl(0, 0%, 57%);
  --grey-600: hsl(0, 0%, 47%);
  --grey-700: hsl(0, 0%, 37%);
  --grey-800: hsl(0, 0%, 27%);
  --grey-900: hsl(0, 0%, 17%);
  --black: hsl(0, 0%, 0%);
  --black-50-a: hsla(0, 0%, 0%, 0.05);
  --black-100-a: hsla(0, 0%, 0%, 0.1);
  --white-400-a: hsla(0, 0%, 100%, 0.4);
  --white-700-a: hsla(0, 0%, 100%, 0.7);
  --white-850-a: hsla(0, 0%, 100%, 0.85);
  --purple: hsl(300, 100%, 25%);
  --blue: hsl(240, 100%, 50%);
  --yellow: hsl(49, 99%, 70%);
  --skyblue: hsl(197, 71%, 73%);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-h2: 2.441rem;
  --font-size-h1: 5.052rem;
  --body-background: #f5f5f5;
  --body-font-color: var(--grey-900);
  --body-font-color-alt: var(--white);
  --body-font-size: var(--font-size-md);
  --heading-font-color: var(--grey-800);
  --card-background: var(--white-850-a);
  --footer-background: #f2f2f2;
  --text-muted: var(--grey-700);
  --link-color: var(--oil-matisse);
  --link-color-alt: var(--purple);
  --footer-color: var(--grey-800);
  --theme-toogle-icon-rotation: 180deg;
  --sans-font-family:
    "Fira Sans",
    sans-serif;
  --serif-font-family:
    constantia,
    "Lucida Bright",
    lucidabright,
    "Lucida Serif",
    lucida,
    "DejaVu Serif",
    "Bitstream Vera Serif",
    "Liberation Serif",
    georgia,
    serif;
  --mono-font-family:
    "Source Code Pro",
    menlo,
    monaco,
    consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-radius-sm: 0.25rem;
  --border-radius-default: 32px;
  --border-radius-circle: 50%;
  --space-sm-8n: -0.5rem;
  --space-sm-4n: -0.25rem;
  --space-sm-2n: -0.125rem;
  --space-0: 0;
  --space: 0.025rem;
  --space-sm-1: 0.06rem;
  --space-sm-2: 0.125rem;
  --space-sm-4: 0.25rem;
  --space-sm-6: 0.375rem;
  --space-sm-8: 0.5rem;
  --space-sm-10: 0.625rem;
  --space-sm-12: 0.75rem;
  --space-sm-14: 0.875rem;
  --space-lg-1n: -1rem;
  --space-lg-1: 1rem;
  --space-lg-1h: 1.5rem;
  --space-lg-2: 2rem;
  --space-lg-3: 3rem;
  --space-lg-4: 4rem;
  --space-lg-5: 5rem;
  --transition-default: all 0.2s ease;
  --line-length: 57ch;
  --w-breakpoint-xs: 36rem;
  --w-breakpoint-sm: 48rem;
  --w-breakpoint-md: 60rem;
}

.img-restricted, .img-full, .img-accent, .img-post, .img-responsive {
  height: auto;
  object-fit: cover;
  object-position: center;
}

.grid {
  display: grid;
  margin: var(--space-lg-3) var(--space-0);
  grid-template-columns: minmax(var(--space-lg-1h), 1fr) minmax(auto, var(--w-breakpoint-xs)) minmax(var(--space-lg-1h), 1fr);
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .grid {
    margin: var(--space-lg-3) var(--space-0) var(--space-lg-5);
    grid-template-columns: minmax(var(--space-lg-1h), 1fr) minmax(auto, var(--w-breakpoint-sm)) minmax(var(--space-lg-1h), 1fr);
  }
}
@media all and (min-width: 64em) {
  .grid {
    grid-template-columns: minmax(var(--space-lg-1h), 1fr) minmax(auto, var(--w-breakpoint-md)) minmax(var(--space-lg-1h), 1fr);
  }
}

.grid-column-center, .tmpl-post article > *:not(figure):not(.hero), .grid > *:not(figure):not(.hero):not(.categories-list-container), p {
  grid-column: 2/auto;
}

.grid-column-full, .categories-list-container, .hero {
  grid-column: 1/4;
}

.underline-dashed, .post__prev--link,
.post__next--link, .post__content a:not(.direct-link), .footer__link {
  transition: var(--transition-default);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: var(--space-sm-1);
  text-underline-offset: var(--space-sm-2);
}
.underline-dashed:hover, .post__prev--link:hover,
.post__next--link:hover, .post__content a:hover:not(.direct-link), .footer__link:hover {
  text-decoration-style: solid;
}

* {
  box-sizing: border-box;
  margin: var(--space-0);
  padding: var(--space-0);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--oil-matisse-light);
  color: var(--body-font-color);
}

body {
  width: 100vw;
  background-color: var(--body-background);
  color: var(--body-font-color);
  font-family: var(--sans-font-family);
  font-size: var(--body-font-size);
  line-height: 1.7;
  overflow-x: hidden;
}

p {
  word-break: break-word;
  margin-bottom: var(--space-lg-1);
}
p:last-child {
  margin-bottom: var(--space-0);
}

ul {
  list-style-type: none;
}

hr {
  margin: var(--space-lg-2) var(--space-0);
}

article {
  display: grid;
  margin: var(--space-lg-3) var(--space-0);
  grid-template-columns: minmax(var(--space-lg-1), 1fr) minmax(auto, var(--line-length)) minmax(var(--space-lg-1), 1fr);
  overflow: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

a {
  color: var(--body-font-color);
}

button {
  border: none;
  background: transparent;
}
button:hover {
  cursor: pointer;
}

pre,
code {
  font-family: var(--mono-font-family);
  line-height: 1.5;
}

pre {
  margin: var(--space) var(--space-0);
  padding: var(--space-lg-1);
  background: var(--body-background);
  font-size: var(--font-size-sm);
  line-height: 1.375;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  direction: ltr;
  word-break: normal;
  tab-size: 2;
  hyphens: none;
}

pre[class*=language-] {
  display: block;
  max-width: calc(100vw - var(--space-lg-3));
  margin: var(--space-lg-1) var(--space-0);
  padding: var(--space-lg-1);
  background-color: var(--body-font-color);
}

.medium-zoom-image--opened {
  object-fit: contain;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: var(--space-lg-1) var(--space-0);
  font-family: var(--sans-font-family);
  font-weight: bold;
  word-break: break-word;
}
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
.h1:focus,
.h2:focus,
.h3:focus,
.h4:focus,
.h5:focus,
.h6:focus {
  outline: var(--border-width-medium) dashed var(--link-color-alt);
  outline-offset: var(--space-sm-4);
}

h1,
.h1 {
  margin-top: 0;
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-h1);
  font-size: clamp(3rem, 8.3vw - 2rem, 5.052rem);
  font-weight: 800;
  line-height: 1.1;
}
h1 > .direct-link,
.h1 > .direct-link {
  display: none;
}

h2,
.h2 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-h2);
  font-size: clamp(1.563rem, 8.3vw - 2rem, 2.441rem);
  font-weight: 800;
  line-height: 1.2;
}

h3,
.h3 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-2xl);
  font-size: clamp(1.25rem, 8.3vw - 2rem, 1.953rem);
  font-weight: 800;
  line-height: 1.3;
}

h4,
.h4 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.4;
}

h5,
.h5 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.5;
}

h6,
.h6 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-size: var(--font-size-base);
  font-weight: 800;
  line-height: 1.6;
}

.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.skip-link {
  position: absolute;
  top: var(--space-lg-1h);
  left: var(--space-lg-1h);
  z-index: 99;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-row {
  flex-direction: row;
}

.direct-link {
  position: relative;
  text-decoration: none;
}
.direct-link::after {
  display: inline-block;
  position: relative;
  top: var(--space-sm-2);
  width: var(--space-lg-1h);
  height: var(--space-lg-1h);
  margin-left: var(--space-sm-4);
  background-image: url("/assets/images/anchor.svg");
  background-size: var(--space-lg-1h) var(--space-lg-1h);
  content: " ";
  filter: brightness(150%);
}
.direct-link:hover {
  cursor: pointer;
}
.direct-link:hover::after {
  filter: brightness(0%);
}

.dark-theme {
  --body-background: #222;
  --body-font-color: var(--white);
  --body-font-color-alt: var(--black);
  --heading-font-color: var(--grey-100);
  --card-background: var(--black);
  --footer-background: var(--black);
  --text-muted: var(--grey-200);
  --link-color: var(--yellow);
  --link-color-alt: var(--skyblue);
  --footer-color: var(--grey-200);
  --theme-toogle-icon-rotation: none;
}
.dark-theme pre[class*=language-] {
  margin-top: var(--space-lg-2);
  border: var(--border-width-thin) solid var(--white);
  background-color: var(--body-background);
}
.dark-theme .post-card:hover {
  box-shadow: 0 0 1rem var(--white-400-a);
}
.dark-theme .direct-link:hover::after {
  filter: brightness(500%);
}
.dark-theme.gradient-home {
  background-color: #222;
}

/*! purgecss ignore */
.no-webp .dark-theme.gradient-home {
  background-color: #222;
}

.menu__items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--space-lg-1h);
  padding: var(--space-0) var(--space-lg-1h);
  list-style: none;
}
.menu__items > * + * {
  margin-left: var(--space-sm-12);
}
@media all and (min-width: 60em) {
  .menu__items > * + * {
    margin-left: var(--space-lg-2);
  }
}
@media all and (min-width: 36em) {
  .menu__items {
    margin-bottom: var(--space-0);
  }
}

.menu__item {
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--space-sm-1);
}

.menu__item--special {
  display: flex;
}

.menu__link {
  position: relative;
  transition: var(--transition-default);
  color: var(--body-font-color);
  text-decoration: none;
}
.menu__link::after {
  position: absolute;
  bottom: 40%;
  left: var(--space-sm-2n);
  width: var(--space-0);
  height: var(--space-sm-2);
  transition: var(--transition-default);
  background: var(--body-font-color);
  content: "";
  z-index: -1;
}
.menu__link:hover::after {
  width: calc(100% + var(--space-sm-4));
}

.menu__item--active a {
  position: relative;
}
.menu__item--active a::after {
  position: absolute;
  bottom: 42%;
  left: var(--space-sm-2n);
  width: calc(100% + var(--space-sm-4));
  height: var(--space-sm-2);
  transition: var(--transition-default);
  background: var(--body-font-color);
  content: "";
  z-index: -1;
}

.toggle__theme--wrap {
  display: flex;
  position: absolute;
  top: var(--space-lg-2);
  right: var(--space-sm-8);
  align-items: center;
}
@media all and (min-width: 36em) {
  .toggle__theme--wrap {
    position: initial;
    margin-top: var(--space-sm-4);
  }
}
.toggle__theme--wrap:hover .toggle__theme--svg {
  fill: var(--grey-500);
}

.toggle__theme--btn:hover {
  cursor: pointer;
}

.toggle__theme--svg {
  transition: var(--transition-default);
  transition: rotate 500ms ease-in;
  rotate: var(--theme-toogle-icon-rotation);
  fill: var(--body-font-color);
}

#goto_app_button_mobile {
  display: block;
}
@media all and (min-width: 36em) {
  #goto_app_button_mobile {
    display: none;
  }
}

#goto_app_button {
  display: none;
}
@media all and (min-width: 48em) {
  #goto_app_button {
    display: block;
  }
}

.feature-section-container {
  display: flex;
  align-items: center;
  margin: var(--space-lg-3) var(--space-0) var(--space-lg-5);
  gap: 32px;
}
@media (max-width: 450px) {
  .feature-section-container {
    flex-direction: column;
    gap: 0;
    margin: var(--space-sm-1) var(--space-0) var(--space-lg-2);
    padding-bottom: 24px;
  }
}

.feature-section-image {
  width: 100%;
}
@media (max-width: 450px) {
  .feature-section-image {
    padding-right: 0;
  }
}

.feature-section-text-link {
  color: var(--oil-matisse);
  font-weight: 500;
  letter-spacing: var(--space-sm-1);
  text-decoration: none;
}
.feature-section-text-link:hover {
  color: var(--oil-matisse-light);
}
.feature-section-text-link:visited {
  color: var(--oil-matisse);
}

.feature-section-text-container {
  width: 100%;
}
.feature-section-text-container h3 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-weight: 800;
}

.pager {
  text-align: center;
}

.pager__numbers > * + *,
.pager__items > * + * {
  margin-left: var(--space-sm-6);
}

.pager__numbers {
  display: inline-block;
  margin: var(--space-0) var(--space-sm-6) var(--space-0) var(--space-sm-12);
}

.pager__item {
  display: inline-block;
  margin-bottom: var(--space-sm-6);
  list-style-type: none;
  transition: var(--transition-default);
  font-size: var(--font-size-base);
}

.pager__link {
  display: flex;
  border: var(--border-width-thin) solid var(--body-font-color);
  border-radius: var(--border-radius-default);
  color: var(--body-font-color);
  text-decoration: none;
}
.pager__link:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

.pager__content {
  display: inline-block;
  min-width: 1.85rem;
  padding: var(--space-sm-2) var(--space-sm-10) var(--space-0);
  color: var(--body-font-color);
}

.pager__current {
  border: var(--border-width-thin) solid var(--heading-font-color);
  border-radius: var(--border-radius-default);
  background: var(--heading-font-color);
}
.pager__current .pager__content {
  color: var(--body-font-color-alt);
}

.btn {
  padding: var(--space-sm-12) var(--space-sm-12);
  transition: var(--transition-default);
  border: var(--border-width-medium) solid var(--oil-matisse);
  border-radius: var(--border-radius-default);
  background-color: var(--oil-matisse);
  color: #fff;
  font-size: 16px;
  letter-spacing: var(--space);
  text-decoration: none;
}
.btn:hover {
  cursor: pointer;
}

.btn_outlined {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-sm-8) var(--space-sm-12);
  transition: var(--transition-default);
  border: var(--border-width-medium) solid var(--grey-400);
  border-radius: var(--border-radius-default);
  color: var(--body-font-color);
  letter-spacing: var(--space);
  text-decoration: none;
}
.btn_outlined:hover {
  border: var(--border-width-medium) solid var(--oil-matisse);
  background-color: var(--body-font-color-alt);
  color: var(--body-font-color);
  cursor: pointer;
}

.btn-lg {
  padding: var(--space-sm-12) var(--space-lg-5);
}

.btn-special {
  display: block;
  padding: 15px 25px;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-decoration: none;
  cursor: pointer;
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
.hero {
  position: relative;
  padding: var(--space-0) var(--space-lg-1h);
}
.hero picture {
  position: absolute;
  z-index: -1;
}
.hero h1 {
  max-width: var(--w-breakpoint-md);
  margin: var(--space-lg-4) auto var(--space-lg-2);
  margin: clamp(0rem, 33.3vw - 16rem, 8rem) auto 1rem;
  margin-top: 0;
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-weight: 800;
  line-height: 1.3;
}
.hero .lead {
  max-width: var(--w-breakpoint-md);
  margin: 0 auto clamp(2rem, 33.3vw - 16rem, 3rem);
  font-weight: 300;
  z-index: 2;
}

.hero-button-container {
  display: flex;
  flex-direction: column;
  max-width: var(--w-breakpoint-md);
  margin: 0 auto clamp(2rem, 33.3vw - 16rem, 4rem);
  gap: 12px;
}

.hero-button-store-icon {
  display: block;
}
@media (max-width: 450px) {
  .hero-button-store-icon {
    display: none;
  }
}

.hero-button-store {
  display: none;
  width: 100%;
  text-align: center;
}
@media (max-width: 450px) {
  .hero-button-store {
    display: block;
  }
}

.hero-button {
  display: block;
  width: 200px;
  text-align: center;
}
@media (max-width: 450px) {
  .hero-button {
    display: none;
  }
}

.hero-app-stores-container {
  display: flex;
  max-width: var(--w-breakpoint-md);
  margin: 0 auto clamp(0rem, 33.3vw - 16rem, 4rem);
}

.hero-app-store {
  display: block;
  margin-right: 12px;
}

.hero-app-store .icon {
  position: static;
}

.hero-logo-animation {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 24% 24% 24% 24%/24% 24% 24% 24%;
  overflow: hidden;
  z-index: -1;
}

.hero-logo-animation-logo {
  width: 120px;
  height: 120px;
  background-image: url("/assets/images/logo_trans@120.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

#logo-animation rect {
  fill: transparent;
}

.hero-logo-animation-container {
  position: relative;
  max-width: var(--w-breakpoint-md);
  margin: 0 auto 1rem;
  margin-bottom: clamp(2rem, 33.3vw - 16rem, 3rem);
}
@media (max-width: 450px) {
  .hero-logo-animation-container {
    display: none;
  }
}

.hero-logo-animation svg {
  position: static;
  z-index: auto;
}

.hero-flowers {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 800px;
  background-image: url("/assets/images/flowers.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

.call-to-action-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.call-to-action-text-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: var(--space-lg-3) var(--space-0) var(--space-lg-5);
  margin-bottom: 0;
  border-bottom: 1px solid #e3e3e3;
}

.call-to-action-image {
  display: flex;
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}
@media (max-width: 450px) {
  .call-to-action-image {
    height: auto;
  }
}

.call-to-action-image img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}
@media (max-width: 450px) {
  .call-to-action-image img {
    height: auto;
  }
}

.call-to-action-content-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  color: #fff;
  text-align: center;
  z-index: 50;
}

.call-to-action-button {
  background-color: #fff;
  color: #000;
}

.call-to-action-button-store {
  display: none;
  width: 100%;
  margin-bottom: 12px;
  text-align: center;
}
@media (max-width: 450px) {
  .call-to-action-button-store {
    display: block;
  }
}

.call-to-action-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 24px;
}

.call-to-action-content-container h2 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-weight: 800;
}

.call-to-action-content-container h2,
p {
  max-width: 600px;
}

.call-to-action-noise {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/assets/images/noise.png");
  background-repeat: repeat;
  background-size: 100px;
  opacity: 0.2;
  z-index: 1;
  mix-blend-mode: overlay;
  inset: 0;
}

.call-to-action-grad {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(84.29% 82.05% at 50% 50%, #ff4b01 0%, #ff7114 53%, #ff3400 97%);
  z-index: 0;
}

.img-responsive {
  width: 100%;
  aspect-ratio: 16/9;
}
.img-post {
  width: 90%;
  margin: 0 5%;
  aspect-ratio: 16/9;
}
.img-accent {
  width: 90vw;
  max-height: 70vh;
  margin-bottom: clamp(2rem, 16.7vw - 6rem, 4rem);
  margin-left: 10vw;
  aspect-ratio: 3/1;
  box-shadow: -1.5rem 1.5rem var(--banner-border-color);
}
.img-full {
  width: 100vw;
  max-height: 70vh;
  margin-bottom: clamp(2rem, 16.7vw - 6rem, 4rem);
  aspect-ratio: 2/1;
}
.img-restricted {
  display: flex;
  align-self: center;
  width: var(--w-breakpoint-md);
  max-height: 70vh;
  margin: var(--space-0) auto clamp(2rem, 16.7vw - 6rem, 4rem);
  aspect-ratio: 2/1;
}

figcaption {
  margin: 0 5%;
  font-size: var(--font-size-sm);
}

.postlist {
  display: grid;
  margin: var(--space-lg-2) var(--space-0);
  padding: var(--space-0);
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  grid-column: 2/auto;
  grid-auto-rows: 1fr;
  grid-column-gap: var(--space-lg-1h);
  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  grid-row-gap: 1.7rem;
  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
}
@media all and (min-width: 36em) {
  .postlist {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 64em) {
  .postlist {
    grid-template-columns: repeat(3, 1fr);
  }
}

.postlist__item {
  max-width: var(--line-length);
  transition: var(--transition-default);
  border: 1px solid var(--grey-300);
  border-radius: var(--border-radius-default);
  background-color: var(--card-background);
  overflow: hidden;
}
.postlist__item:hover {
  cursor: pointer;
  box-shadow: 0 10px 15px -3px var(--black-100-a), 0 -3px 6px -2px var(--black-50-a);
}

.postlist__item-picture {
  max-width: var(--line-length);
  transition: var(--transition-default);
  border: 1px solid var(--grey-300);
  border-radius: var(--border-radius-default);
  background-color: var(--card-background);
  overflow: hidden;
}

.category-circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--body-font-color);
  text-align: center;
  text-decoration: none;
}
.category-circle-container:visited {
  color: var(--body-font-color);
}

.category-circle-image {
  width: 80px;
  height: 80px;
  border: 2px var(--oil-matisse) solid;
  border-radius: 100%;
  overflow: hidden;
}

.category-circle-image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-circle-title {
  margin-bottom: 0;
  font-weight: 400;
  white-space: nowrap;
}

.categories-list-container {
  position: relative;
  margin-bottom: var(--space-lg-5);
  padding: 24px 0;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}

.categories-list-scroll {
  display: flex;
  align-items: start;
  justify-content: start;
  width: 100%;
  padding: 0 120px;
  overflow-x: auto;
  gap: 42px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (max-width: 450px) {
  .categories-list-scroll {
    padding: 0 24px;
  }
}

.categories-list-icon {
  display: flex;
  position: absolute;
  top: 0;
  align-items: center;
  width: 24px;
  height: 100%;
  background-color: var(--body-background);
  cursor: pointer;
  justify-items: center;
}
@media (max-width: 450px) {
  .categories-list-icon {
    display: none;
  }
}

.categories-list-icon-right {
  right: 0;
}

#categories-list-left-arrow {
  display: none;
}

.categories-list-icon-left {
  left: 0;
}

.categories-list-scroll::-webkit-scrollbar {
  display: none;
}

.features-list {
  display: grid;
  margin: var(--space-lg-2) var(--space-0);
  padding: var(--space-0);
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  grid-column: 2/auto;
  grid-auto-rows: 1fr;
  grid-column-gap: var(--space-lg-1h);
  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  grid-row-gap: 1.7rem;
  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
}
@media all and (min-width: 36em) {
  .features-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media all and (min-width: 64em) {
  .features-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.features-list__item {
  max-width: var(--line-length);
  transition: var(--transition-default);
  border: 1px solid var(--grey-300);
  border-radius: var(--border-radius-default);
  background-color: var(--card-background);
  overflow: hidden;
}
.features-list__item:hover {
  box-shadow: 0 10px 15px -3px var(--black-100-a), 0 -3px 6px -2px var(--black-50-a);
}

.features-list__item-picture {
  max-width: var(--line-length);
  transition: var(--transition-default);
  border: 1px solid var(--grey-300);
  border-radius: var(--border-radius-default);
  background-color: var(--card-background);
  overflow: hidden;
}

.feature-card {
  position: relative;
}
.feature-card:hover .feature-card__link,
.feature-card:hover .feature-card__link:visited {
  color: var(--link-color);
  text-decoration: none;
}

.feature-card__link,
.feature-card__link:visited {
  color: var(--heading-font-color);
  text-decoration: none;
}

.feature-card__link::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}
.feature-card__link:focus-visible {
  outline: none;
}
.feature-card__link:focus-visible::after {
  border: var(--border-width-medium) dashed var(--link-color-alt);
  border-radius: var(--border-radius-default);
}

.feature-card__image-container {
  display: flex;
  height: 10rem;
  filter: grayscale(1) brightness(1);
}
.feature-card__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card__content {
  padding: var(--space-lg-1h);
}
.feature-card__content p:not(.feature-card__title) {
  font-size: var(--font-size-base);
}

.feature-card__tags {
  margin-bottom: var(--space-lg-1);
}

.feature-card__title {
  margin: var(--space-sm-8) var(--space-0);
}

.feature-card__date-time {
  padding-top: var(--space-lg-1);
  border-top: var(--border-width-thin) solid var(--grey-200);
}

.post-card {
  position: relative;
}
.post-card:hover .post-card__link,
.post-card:hover .post-card__link:visited {
  color: var(--link-color);
  text-decoration: none;
}

.post-card__link,
.post-card__link:visited {
  color: var(--heading-font-color);
  text-decoration: none;
}

.post-card__link::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}
.post-card__link:focus-visible {
  outline: none;
}
.post-card__link:focus-visible::after {
  border: var(--border-width-medium) dashed var(--link-color-alt);
  border-radius: var(--border-radius-default);
}

.post-card__image-container {
  display: flex;
  height: 10rem;
}
.post-card__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__content {
  padding: var(--space-lg-1h);
}
.post-card__content p:not(.post-card__title) {
  font-size: var(--font-size-base);
}

.post-card__tags {
  margin-bottom: var(--space-lg-1);
}

.post-card__title {
  margin: var(--space-sm-8) var(--space-0);
}

.post-card__date-time {
  padding-top: var(--space-lg-1);
  border-top: var(--border-width-thin) solid var(--grey-200);
}

.post-card-picture {
  position: relative;
}
.post-card-picture:hover .post-card-picture__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-card-picture:hover .post-card-picture__image-container {
  display: none;
}

.post-card-picture__link,
.post-card-picture__link:visited {
  color: var(--heading-font-color);
  text-decoration: none;
}

.post-card-picture__link::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}
.post-card-picture__link:focus-visible {
  outline: none;
}
.post-card-picture__link:focus-visible::after {
  border: var(--border-width-medium) dashed var(--link-color-alt);
  border-radius: var(--border-radius-default);
}

.post-card-picture__image-container {
  display: flex;
  height: 100%;
}
.post-card-picture__image-container img {
  width: 100%;
  filter: none;
  height: 100%;
  object-fit: cover;
}

.post-card-picture__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-picture__content {
  display: none;
  height: 100%;
  padding: var(--space-lg-1h);
}
.post-card-picture__content p:not(.post-card-picture__title) {
  font-size: var(--font-size-base);
}

.post-card-picture__tags {
  margin-bottom: var(--space-lg-1);
}

.post-card-picture__title {
  margin: var(--space-sm-8) var(--space-0);
}

.post-card-picture__date-time {
  padding-top: var(--space-lg-1);
  border-top: var(--border-width-thin) solid var(--grey-200);
}

.tags {
  grid-template-rows: min-content;
}

.tag__items {
  align-content: flex-start;
  gap: var(--space-sm-6);
}

.tag__link,
.post-card__tag {
  display: inline-block;
  padding: var(--space-sm-1) var(--space-sm-8);
  transition: var(--transition-default);
  border: var(--border-width-thin) solid var(--body-font-color);
  border-radius: var(--border-radius-default);
  color: var(--body-font-color);
  font-size: var(--font-size-sm);
  text-decoration: none;
  vertical-align: text-top;
}
.tag__link:visited,
.post-card__tag:visited {
  color: var(--body-font-color);
}
.tag__link:hover,
.post-card__tag:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

.post-card__tag {
  font-size: var(--font-size-xs);
}

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media all and (min-width: 60em) {
  header {
    flex-direction: row;
  }
}

.home {
  display: block;
  width: 50px;
  height: 50px;
  margin: var(--space-lg-1h);
  padding: var(--space-sm-2) var(--space-sm-8) var(--space-sm-4) var(--space-sm-6);
  background-image: url("/assets/images/favicon/icon-144x144.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.home:visited {
  color: inherit;
}
.home:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

.home-container {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.home-logotype {
  color: var(--body-font-color);
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
}

.svg-icon-rotate {
  rotate: 180deg;
}

.footer {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 0;
  color: #fff;
  font-size: var(--font-size-sm);
}

.footer a {
  color: #fff;
}

.footer__top {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: 50;
  grid-column: 2/auto;
}
@media all and (min-width: 48em) {
  .footer__top {
    flex-direction: row;
  }
}

.footer__top-left,
.footer__top-right {
  flex: 1 100%;
}

.footer__top-left {
  /* if screen > 600px footer-top-right appears alongside footer-top-left getting 1/3rd of space */
}
@media all and (min-width: 48em) {
  .footer__top-left {
    flex: 1 50%;
    padding: var(--space-lg-1) var(--space-lg-1) var(--space-lg-1) var(--space-0);
  }
}

@media all and (min-width: 36em) {
  .footer__top-right {
    display: flex;
  }
}
@media all and (min-width: 48em) {
  .footer__top-right {
    display: flex;
    flex: 1 50%;
    padding: var(--space-lg-1) var(--space-0) var(--space-lg-1) var(--space-lg-1);
  }
}

.footer__logo {
  display: inline-block;
  margin: var(--space-lg-1) var(--space-0);
  color: var(--footer-color);
  font-size: var(--font-size-xl);
}
.footer__logo:hover {
  border: var(--border-width-medium) solid var(--link-color);
  color: var(--link-color);
}

.footer__quick-links,
.footer__contact,
.footer__follow {
  margin-bottom: var(--space-lg-1h);
}

@media all and (min-width: 36em) {
  .footer__quick-links-wrapper {
    flex: 1 40%;
  }
}

.footer__quick-link-item {
  display: flex;
}

@media all and (min-width: 36em) {
  .footer__contact-follow-wrapper {
    flex: 1 60%;
  }
}

.footer__copyright {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: var(--space-lg-1) var(--space-0);
  border-top: var(--border-width-thin) solid #fff;
  text-align: center;
  z-index: 50;
}

.footer__link {
  padding: var(--space-sm-6) var(--space-sm-6) var(--space-sm-6) var(--space-sm-2);
}
@media all and (min-width: 60em) {
  .footer__link {
    padding: var(--space-sm-2);
  }
}

.footer__social-items {
  display: flex;
  flex-wrap: wrap;
}

.footer-content {
  margin: 0;
  padding: var(--space-lg-3) var(--space-0);
}

.footer__social-link {
  margin-right: var(--space-sm-8);
  padding: var(--space-sm-2) var(--space-sm-6) var(--space-0) var(--space-sm-6);
  transition: var(--transition-default);
  border: var(--border-width-medium) solid var(--text-muted);
  border-radius: var(--border-radius-circle);
  font-size: var(--font-size-xl);
}
.footer__social-link svg {
  transition: var(--transition-default);
  fill: var(--text-muted);
  color: var(--text-muted);
  stroke: var(--text-muted);
}
.footer__social-link:hover {
  border-color: var(--link-color);
}
.footer__social-link:hover svg {
  fill: var(--link-color);
  color: var(--link-color);
  stroke: var(--link-color);
}

.footer-noise {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/assets/images/noise.png");
  background-repeat: repeat;
  background-size: 100px;
  opacity: 0.2;
  z-index: 1;
  mix-blend-mode: overlay;
  inset: 0;
}

.footer-grad {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(64.29% 48.05% at 50% 60%, #ff4b01 0%, #ff7114 71%, #ff3400 117%);
  z-index: 0;
}

.tmpl-home {
  min-height: calc(100vh - 92px - 6rem - 55px);
}
.tmpl-home > .categories-list-container .hero {
  margin-bottom: var(--space-lg-3);
}
.tmpl-home p {
  max-width: var(--line-length);
}
.tmpl-home h3 {
  width: auto;
}

.page-about {
  min-height: auto;
}

.gradient-home {
  background-color: var(--body-background);
}

/*! purgecss ignore */
.no-webp .gradient-home {
  background-color: #f5f5f5;
}

.post__title {
  margin: var(--space-lg-1) var(--space-0);
}

.post__header {
  flex-direction: column;
}
.post__header h2 {
  margin-top: var(--space-0);
  font-weight: 300;
}
.post__header h1 {
  font-family: "Bricolage Grotesque", "Fira Sans", sans-serif;
  font-weight: 800;
}

.post__image {
  width: 100%;
  max-height: 600px;
  margin: var(--space-lg-3) var(--space-0) var(--space-lg-5);
  border-radius: 5px;
  background-color: antiquewhite;
}

.post__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-video {
  width: 90%;
  height: auto;
  margin: 0 5%;
  grid-column: 2/auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 16/9;
}

.post__content {
  max-width: var(--line-length);
}
.post__content > p:first-child::first-letter {
  margin-right: var(--space-sm-6);
  padding: var(--space-sm-2);
  float: left;
  font-size: 300%;
  font-weight: bold;
  line-height: 1;
}
.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5,
.post__content h6 {
  display: inline-block;
}
.post__content h2:hover + .direct-link,
.post__content h3:hover + .direct-link,
.post__content h4:hover + .direct-link,
.post__content h5:hover + .direct-link,
.post__content h6:hover + .direct-link {
  filter: brightness(0%);
}
.post__content > p {
  margin-bottom: var(--space-lg-1);
}
.post__content > p + *:not(p)*:not(h2, h3, h4, h5, h6) {
  margin-top: var(--space-lg-2);
}
.post__content > *:not(p):not(.direct-link) + p {
  margin-top: var(--space-lg-2);
}
.post__content > p:last-child {
  margin-bottom: var(--space-0);
}
.post__footer {
  content-visibility: auto;
  contain-intrinsic-size: 150px;
  padding-bottom: var(--space-lg-1);
}

.post__next-prev {
  display: flex;
  flex-direction: column;
}
@media all and (min-width: 60em) {
  .post__next-prev {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media all and (min-width: 60em) {
  .post__next,
  .post__prev {
    width: 50%;
  }
}

@media all and (min-width: 60em) {
  .post__prev {
    text-align: right;
  }
}

.post__prev--label,
.post__next--label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--space-sm-1);
  text-transform: uppercase;
}
.post__prev--label::after,
.post__next--label::after {
  margin-left: var(--space-sm-4n);
  content: ":";
}
@media all and (min-width: 60em) {
  .post__prev--label::after,
  .post__next--label::after {
    content: "";
  }
}

@media all and (min-width: 60em) {
  .post__next--label {
    margin-left: -0.5rem;
  }
}

@media all and (min-width: 60em) {
  .post__prev--label {
    margin-right: var(--space-sm-8n);
  }
}

.post__prev--icon,
.post__next--icon {
  display: none;
}
@media all and (min-width: 60em) {
  .post__prev--icon,
  .post__next--icon {
    display: inline;
    position: relative;
    top: var(--space-sm-8);
  }
}

.post__prev--icon {
  left: var(--space-sm-4n);
}

.post__next--icon {
  right: var(--space-sm-4n);
}

@media all and (min-width: 60em) {
  .post__prev--link,
  .post__next--link {
    display: block;
  }
}

@media (max-width: 1200px) {
  .post-thumbnail {
    display: none;
  }
}

.news ul {
  list-style-type: disc;
}

.not-found h2 {
  margin-top: var(--space-lg-2);
}
.not-found h2:first-of-type {
  margin-top: var(--space-0);
}
.not-found .direct-link {
  display: none;
}

.mb-0 {
  margin-bottom: var(--space-0);
}

.mb-0-5 {
  margin-bottom: var(--space);
}

.mt-1 {
  margin-top: var(--space-lg-1);
}

.mb-1 {
  margin-bottom: var(--space-lg-1);
}

.ml-1h {
  margin-left: var(--space-lg-1h);
}

.mr-1 {
  margin-right: var(--space-lg-1);
}

.mb-2 {
  margin-bottom: var(--space-lg-2);
}

@media all and (min-width: 48em) {
  .mb-lg-3 {
    margin-bottom: var(--space-lg-3);
  }
}

@media all and (min-width: 60em) {
  .ml-md-auto {
    margin-left: auto;
  }
}

@media all and (min-width: 48em) {
  .columns-2 {
    max-width: none;
    columns: 2;
    column-gap: var(--space-lg-2);
    orphans: 3;
  }
}

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.text-black {
  color: var(--body-font-color);
}

.text-muted {
  color: var(--text-muted);
}

.small-caps {
  font-variant-caps: small-caps;
}

.font-bold {
  font-weight: bold;
}

.font-xs {
  font-size: var(--font-size-xs);
}

.font-sm {
  font-size: var(--font-size-sm);
}

.display-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.display-none {
  display: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
@media (prefers-reduced-data: reduce) {
  img,
  video {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-background: #222;
    --body-font-color: var(--white);
    --body-font-color-alt: var(--black);
    --heading-font-color: var(--grey-100);
    --card-background: var(--black);
    --footer-background: var(--black);
    --text-muted: var(--grey-200);
    --link-color: var(--yellow);
    --link-color-alt: var(--skyblue);
    --footer-color: var(--grey-200);
    --theme-toogle-icon-rotation: none;
  }
  pre[class*=language-] {
    margin-top: var(--space-lg-2);
    border: var(--border-width-thin) solid var(--white);
    background-color: var(--body-background);
  }
  .post-card:hover {
    box-shadow: 0 0 1rem var(--white-400-a);
  }
  .direct-link:hover::after {
    filter: brightness(500%);
  }
  .light-theme {
    --body-background: #f5f5f5;
    --body-font-color: var(--grey-900);
    --body-font-color-alt: var(--white);
    --body-font-size: var(--font-size-md);
    --heading-font-color: var(--grey-800);
    --card-background: var(--white-850-a);
    --footer-background: var(--grey-200);
    --text-muted: var(--grey-700);
    --link-color: var(--blue);
    --link-color-alt: var(--purple);
    --footer-color: var(--grey-800);
    --theme-toogle-icon-rotation: 180deg;
  }
  .light-theme pre[class*=language-] {
    margin-top: var(--space-lg-1);
    border: var(--border-width-thin) solid var(--black);
    background-color: var(--body-font-color);
  }
  .light-theme .post-card:hover {
    box-shadow: 0 10px 15px -3px var(--black-100-a), 0 -3px 6px -2px var(--black-50-a);
  }
  .light-theme .direct-link:hover::after {
    filter: brightness(0%);
  }
  .gradient-home.light-theme {
    background-color: var(--body-background);
  }
  /*! purgecss ignore */
  .no-webp .gradient-home.light-theme {
    background-color: var(--body-background);
  }
}
/* sourced from https://transition.style */
@keyframes circle-in-top-right {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(150% at top right);
  }
}
/* view transition will cross-fade in user prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* old page can just sit there */
  ::view-transition-old(root) {
    animation: none;
  }
  /* new page can do fancy stuff! */
  ::view-transition-new(root) {
    animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) circle-in-top-right forwards;
  }
}

/*# sourceMappingURL=main.css.map */