@font-face {
  font-family: "Cascadia Mono";
  font-display: swap;
  src: url("/static/fonts/CascadiaMono.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend";
  font-display: swap;
  font-weight: 400;
  src: url("/static/fonts/Lexend.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend";
  font-display: swap;
  font-weight: 700;
  src: url("/static/fonts/Lexend-700.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-display: swap;
  src: url("/static/fonts/Outfit.woff") format("woff");
}
:root {
  --font-family-normal: "Outfit", sans-serif;
  --font-family-title: "Lexend", sans-serif;

  --color-underwater-blue: #292d3e;
  --color-faff-pink: #ffaff3;

  --color-code-blue: #9ce7ff;
  --color-code-green: #c8ffa7;
  --color-code-grey: #d4d4d4;
  --color-code-dark-grey: #848484;
  --color-code-yellow: #fdffab;
  --color-code-pink: var(--color-faff-pink);
  --color-code-red: #ff6262;
  --color-code-orange: #ffd596;
  --color-code-light-pink: #ffddfa;

  /*size scale*/
}

html {
  /* background-color: var(--color-underwater-blue); */
  background-color: var(--gray-9);
  font-family: var(--font-family-normal);

  color: white;
}
body {
  margin: 0;
}

a {
  color: white;
}

.code-warning,
.hl-keyword,
.code-keyword {
  color: var(--color-code-orange);
}

.code-success {
  color: var(--color-code-green);
}

.hl-deletion,
.code-error {
  color: var(--color-code-red);
}

.hl-operator,
.code-operator {
  color: var(--color-code-pink);
}

.hl-module,
.hl-variant,
.code-type,
.code-module {
  color: var(--color-code-light-pink);
}

.hl-string,
.hl-addition,
.code-string {
  color: var(--color-code-green);
}

.hl-number,
.code-number {
  color: var(--color-code-yellow);
}

.hl-function,
.hl-fn,
.code-decoration,
.code-fn {
  color: var(--color-code-blue);
}

.hl-comment,
.code-comment {
  color: var(--color-code-grey);
  opacity: 0.6;
}

.code-prompt {
  color: var(--color-code-dark-grey);
}

/*Main page*/

.post-list-page {
  h2 {
    font-size: var(--font-size-fluid-2);
  }
  display: flex;
  justify-content: center;
  padding-inline: var(--size-4);
}

.post-list {
  list-style: none;
  padding: 0;
  margin: var(--size-4) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--size-4);
}

.post-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: var(--size-4);
  background-color: var(--gray-8);
  border: var(--blue-2) var(--border-size-4) solid;
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.post-list li:nth-child(3n + 1) .post-card {
  border-radius: var(--radius-drawn-1);
  border-color: var(--blue-1);
}

.post-list li:nth-child(3n + 2) .post-card {
  border-radius: var(--radius-drawn-2);
  border-color: var(--blue-3);
}

.post-list li:nth-child(3n + 3) .post-card {
  border-radius: var(--radius-drawn-3);
}

.post-card:hover {
  transform: translateY(var(--size-00));
  background-color: var(--gray-7);
}

.post-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-title {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-7);
  font-family: var(--font-family-title);
}

.post-description {
  font-size: var(--font-size-1);
  color: var(--color-code-grey);
}

.post-date {
  font-size: var(--font-size-1);
  color: var(--color-code-grey);
  margin-top: auto;
  padding-top: var(--size-4);
}

/*Post pages*/
.post-page {
  padding-inline: var(--size-4);
}