/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable.woff2") format("woff2");
  font-display: fallback;
}

/* This is too heavy 
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable-Italic.woff2") format("woff2");
  font-display: fallback;
} */

@font-face {
  font-family: "RobotoMonoModif";
  src: url("./RobotoMonoModif-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  font-display: fallback;
}

@font-face {
  font-family: "RobotoMonoModif";
  src: url("./RobotoMonoModif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-display: fallback;
}

:root {
  --monospace: "RobotoMonoModif", monospace;
  --sans: "InterVariable", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
  

  --color-red: hsla(353, 100%, 64%, 1);
  --color-green: hsla(142, 67%, 40%, 1);
  --color-blue: hsla(216, 100%, 70%, 1);
  --color-purple: hsla(252, 100%, 74%, 1);
  --color-light-purple: hsl(259, 100%, 90%);
  --color-soft-purple: hsl(259, 100%, 80%);

  --color-foreground-5: hsla(0, 0%, 100%, 0.05);
  --color-foreground-10: hsla(0, 0%, 100%, 0.1);
  --color-foreground-13: hsla(0, 0%, 100%, 0.13);
  --color-foreground-15: hsla(0, 0%, 100%, 0.15);
  --color-foreground-20: hsla(0, 0%, 100%, 0.2);
  --color-foreground-30: hsla(0, 0%, 100%, 0.3);
  --color-foreground-40: hsla(0, 0%, 100%, 0.4);
  --color-foreground-50: hsla(0, 0%, 100%, 0.5);
  --color-foreground-60: hsla(0, 0%, 100%, 0.6);
  --color-foreground-70: hsla(0, 0%, 100%, 0.7);
  --color-foreground-80: hsla(0, 0%, 100%, 0.8);
  --color-foreground-85: hsla(0, 0%, 100%, 0.85);
  --color-foreground-90: hsla(0, 0%, 100%, 0.9);
  --color-foreground-100: hsla(0, 0%, 100%, 1);

  --color-background-5: hsla(0, 0%, 0%, 0.05);
  --color-background-10: hsla(0, 0%, 0%, 0.1);
  --color-background-13: hsla(0, 0%, 0%, 0.13);
  --color-background-15: hsla(0, 0%, 0%, 0.15);
  --color-background-20: hsla(0, 0%, 0%, 0.2);
  --color-background-30: hsla(0, 0%, 0%, 0.3);
  --color-background-40: hsla(0, 0%, 0%, 0.4);
  --color-background-50: hsla(0, 0%, 0%, 0.5);
  --color-background-60: hsla(0, 0%, 0%, 0.6);
  --color-background-70: hsla(0, 0%, 0%, 0.7);
  --color-background-80: hsla(0, 0%, 0%, 0.8);
  --color-background-85: hsla(0, 0%, 0%, 0.85);
  --color-background-90: hsla(0, 0%, 0%, 0.9);
  --color-background-100: hsla(0, 0%, 0%, 1);

  --link-color: hsl(183, 100%, 73%, 0.8);
  --link-color-hover: hsl(183, 100%, 73%);
  --link-underline-color: hsla(183, 100%, 73%, 0.4);
  --link-underline-color-hover: hsla(183, 100%, 73%, 1);
  --transition-link: color 0.3s ease-out, text-decoration-color 0.3s ease-out;

  --default-purple: hsla(252, 100%, 77%, 1);
  --hovered-purple: hsla(252, 100%, 82%, 1);

  --icon-quote-40: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3e%3cpath fill='%23A18AFF' d='M1 6h16v16c0 7-5 12-12 12v-4c4.24-1.13 5-4.5 5-8H1V6Zm22 16h9c0 3.5-.76 6.87-5 8v4c7 0 12-5 12-12V6H23v16Z'/%3e%3c/svg%3e");
  --icon-triangle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M12 8L4 13L4 3L12 8Z' stroke='currentColor'%3E%3C/path%3E%3C/svg%3E");
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--icon);
  -webkit-mask-image: var(--icon);
  background-color: currentColor;
  user-select: none;
  pointer-events: none;
}

.icon-chevron-left-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%239D8FD6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3e%3c/svg%3e");
}

.icon-chevron-right-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%239D8FD6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e");
}
.icon-di-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cpath fill='%23C2B2FF' d='M18.64 3.88a17.92 17.92 0 0 0-4.54-1.43c-.2.35-.43.83-.58 1.2-1.7-.25-3.37-.25-5.03 0-.16-.37-.4-.85-.6-1.2-1.59.27-3.11.76-4.53 1.43A19.04 19.04 0 0 0 .09 16.63a18.15 18.15 0 0 0 5.57 2.85c.45-.62.85-1.27 1.2-1.97-.66-.25-1.3-.55-1.89-.91l.47-.36a12.83 12.83 0 0 0 11.12 0l.47.36c-.6.36-1.23.67-1.89.92.35.69.75 1.34 1.2 1.96a18.11 18.11 0 0 0 5.57-2.85c.45-4.84-.78-9.04-3.27-12.75ZM7.34 14.06c-1.08 0-1.97-1.02-1.97-2.25 0-1.24.87-2.25 1.98-2.25 1.1 0 2 1.01 1.97 2.25 0 1.23-.87 2.25-1.97 2.25Zm7.31 0c-1.08 0-1.97-1.02-1.97-2.25 0-1.24.87-2.25 1.97-2.25 1.11 0 2 1.01 1.98 2.25 0 1.23-.87 2.25-1.98 2.25Z'/%3e%3c/svg%3e");
}
.icon-gh-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='%23C2B2FF' d='M12 0a12 12 0 0 1 3.82 23.39c-.6.11-.82-.26-.82-.57l.02-3.3c0-1.13-.38-1.85-.81-2.22 2.66-.3 5.47-1.33 5.47-5.93a4.6 4.6 0 0 0-1.23-3.22c.12-.3.54-1.54-.12-3.19 0 0-1-.33-3.3 1.24a11.14 11.14 0 0 0-6 0c-2.3-1.55-3.3-1.24-3.3-1.24a4.31 4.31 0 0 0-.12 3.18 4.67 4.67 0 0 0-1.23 3.23c0 4.59 2.79 5.63 5.46 5.93-.35.3-.66.82-.77 1.6-.69.32-2.41.83-3.49-.99-.22-.36-.9-1.25-1.85-1.23-1 .02-.4.57.02.8.51.28 1.1 1.34 1.23 1.69.24.67 1.02 1.96 4.04 1.41l.01 2.24c0 .31-.22.67-.82.57A12 12 0 0 1 12 0Z'/%3e%3c/svg%3e");
}
.icon-in-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='%23C2B3FF' d='M1.28 8.16V23H6V8.16H1.28ZM3.6 6.13h.04c1.64 0 2.67-1.14 2.67-2.57A2.5 2.5 0 0 0 3.67 1C2.06 1 1 2.1 1 3.56a2.5 2.5 0 0 0 2.6 2.57ZM18.28 23H23v-8.51c0-4.56-2.33-6.68-5.43-6.68a4.66 4.66 0 0 0-4.25 2.45v-2.1H8.6C8.67 9.55 8.6 23 8.6 23h4.72v-8.29c0-.45.03-.89.16-1.2.34-.9 1.11-1.8 2.42-1.8 1.7 0 2.38 1.35 2.38 3.35V23Z'/%3e%3c/svg%3e");
}
.icon-x-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='%23C2B3FF' d='M14.5 10.32 22.32 1h-1.86l-6.79 8.09L8.25 1H2l8.2 12.23L2 23h1.85l7.17-8.54L16.75 23H23l-8.5-12.68Zm-2.54 3.02-.83-1.22-6.61-9.69h2.85l5.33 7.82.83 1.22 6.93 10.17h-2.84l-5.66-8.3Z'/%3e%3c/svg%3e");
}
.icon-insta-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cg fill='%23C2B2FF'%3e%3cpath d='M5.84 12a6.16 6.16 0 1 1 12.32 0 6.16 6.16 0 0 1-12.32 0ZM16 12a4 4 0 1 0-8 0 4 4 0 0 0 8 0Zm3.85-6.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z'/%3e%3cpath d='M4.14.63C4.9.33 5.78.13 7.06.07 8.34.01 8.75 0 12.01 0c3.26 0 3.67.01 4.94.07 1.28.06 2.16.26 2.92.56.79.3 1.46.72 2.12 1.39a5.92 5.92 0 0 1 1.39 2.12c.29.76.5 1.63.55 2.91C24 8.33 24 8.74 24 12c0 3.26-.01 3.67-.07 4.94a8.78 8.78 0 0 1-.55 2.92 5.94 5.94 0 0 1-1.39 2.13 5.89 5.89 0 0 1-2.13 1.38c-.76.3-1.63.5-2.91.56A84.5 84.5 0 0 1 12 24a84.5 84.5 0 0 1-4.94-.07 8.78 8.78 0 0 1-2.92-.56 5.89 5.89 0 0 1-2.12-1.39 5.89 5.89 0 0 1-1.4-2.12 8.9 8.9 0 0 1-.55-2.92A84.55 84.55 0 0 1 0 12c0-3.26.01-3.67.07-4.95a8.7 8.7 0 0 1 .56-2.91 5.7 5.7 0 0 1 1.39-2.12A5.89 5.89 0 0 1 4.14.62Zm12.71 1.6A83.1 83.1 0 0 0 12 2.16c-3.2 0-3.58.01-4.85.07-1.17.05-1.8.25-2.23.41-.56.22-.96.48-1.38.9-.42.42-.68.82-.9 1.38a6.61 6.61 0 0 0-.41 2.23A88.1 88.1 0 0 0 2.16 12c0 3.2.01 3.59.07 4.85.05 1.17.25 1.8.41 2.23.22.56.48.96.9 1.38.42.42.82.68 1.38.9.43.17 1.06.36 2.23.42 1.27.05 1.65.06 4.85.06 3.2 0 3.59 0 4.85-.06a6.61 6.61 0 0 0 2.23-.42c.56-.22.96-.48 1.38-.9.42-.42.68-.82.9-1.38.17-.42.36-1.06.42-2.23.05-1.26.06-1.64.06-4.85 0-3.2 0-3.58-.06-4.85a6.61 6.61 0 0 0-.42-2.23 3.74 3.74 0 0 0-.9-1.38 3.74 3.74 0 0 0-1.38-.9 6.61 6.61 0 0 0-2.23-.41Z'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-threads-24 {
  width: 24px;
  height: 24px;
  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='%23C2B2FF' d='m17.7 11.12-.32-.14c-.19-3.41-2.05-5.37-5.18-5.39h-.05c-1.87 0-3.43.8-4.39 2.26L9.5 9.03a3.05 3.05 0 0 1 2.7-1.32c1.02 0 1.8.3 2.3.9.37.42.62 1 .74 1.75-.92-.16-1.9-.2-2.96-.14-2.98.17-4.9 1.9-4.77 4.32a3.72 3.72 0 0 0 1.72 2.96 5.3 5.3 0 0 0 3.2.8 4.72 4.72 0 0 0 3.63-1.76 6.54 6.54 0 0 0 1.23-3.24c.75.44 1.3 1.03 1.6 1.74.52 1.2.55 3.19-1.07 4.8-1.41 1.41-3.11 2.02-5.68 2.04-2.85-.02-5.01-.93-6.41-2.72C4.4 17.5 3.72 15.1 3.7 12c.03-3.09.7-5.5 2.02-7.16 1.4-1.79 3.56-2.7 6.4-2.72 2.88.02 5.07.94 6.53 2.73a8.88 8.88 0 0 1 1.6 3.27l2.02-.54a10.92 10.92 0 0 0-2.02-4.08C18.38 1.2 15.65.02 12.13 0h-.01C8.61.02 5.92 1.2 4.1 3.51c-1.61 2.05-2.45 4.9-2.47 8.48V12c.02 3.59.86 6.44 2.47 8.49 1.81 2.3 4.51 3.49 8.02 3.51h.01c3.12-.02 5.32-.84 7.13-2.65a6.5 6.5 0 0 0 1.52-7.16 6.13 6.13 0 0 0-3.09-3.07Zm-5.4 5.07c-1.3.07-2.66-.51-2.72-1.77-.05-.93.66-1.97 2.8-2.09l.73-.02c.78 0 1.5.07 2.17.22-.25 3.09-1.7 3.59-2.97 3.66Z'/%3e%3c/svg%3e");
}
.icon-rewind-24{
  width: 24px;
  height: 24px;
  --icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='white' d='M12 2c5.51 0 10 4.49 10 10s-4.49 10-10 10S2 17.51 2 12a1 1 0 1 1 2 0c0 4.43 3.57 8 8 8s8-3.57 8-8A7.98 7.98 0 0 0 8.03 5.06l.77.76A.69.69 0 0 1 8.3 7H4.86A.86.86 0 0 1 4 6.14V2.69a.7.7 0 0 1 1.18-.49l1.4 1.4A9.95 9.95 0 0 1 12 2Zm-1.27 7.15a.8.8 0 0 1 .39.1l3.52 2.12c.48.29.48.98 0 1.26l-3.52 2.12a.74.74 0 0 1-1.12-.63V9.88c0-.42.35-.73.73-.73Z'/%3e%3c/svg%3e");
}


.social-btn{
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 0;
  background-color: hsla(252, 100%, 74%, 0.0);
  color: hsla(252, 100%, 85%, 1);
  border-radius: 4px;
  filter: none;
  transition: all 0.25s ease-out;
}
.social-btn:hover{
  background-color: hsla(252, 100%, 74%, 0.3);
  color: hsla(252, 100%, 100%, 1);
  filter: none;
}
.social-btn:active{
  background-color: hsla(252, 100%, 74%, 0.2);
  color: hsla(252, 100%, 85%, 1);
  filter: none;
}


.icon-triangle-right {
  --icon: var(--icon-triangle-right);
}
.icon-triangle-down {
  --icon: var(--icon-triangle-right);
  transform: translate(-50%, -50%) rotate(90deg);
}

.icon-quote-40{
  width: 40px;
  height: 40px;
  --icon: var(--icon-quote-40);
  color: var(--color-purple);
}

body {
  background-color: hsl(271, 92%, 5%);
  color: var(--color-foreground-80);
  font-family: var(--sans);
  font-feature-settings: "ss02" on;
  font-style: normal;
  font-weight: 400;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 1.0625rem; /* 17px */
  line-height: 150%;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  scrollbar-gutter: stable both-edges;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

::-moz-selection {
  background-color: hsl(264, 35%, 35%);
  color: #fff;
}
::selection {
  background-color: hsl(264, 35%, 35%);
  color: #fff;
}

/* ALL SECTION*/
section {
  position: relative;
  background-color: hsla(270, 40%, 5%, 0.6);
  box-shadow: 0 0 0 1px hsla(252, 100%, 77%, 0.2);
  padding: 1.75rem 2.125rem;
  /* 20px 34px - if you are changing the right hand side value (2.125rem), also change margin-left and margin-right in the pre tag */
  border-radius: 11px;
  margin: 5.625rem auto 1.8125rem;
  max-width: 1280px;
}
section.fit-content {
  max-width: calc(45rem + 2 * 2.125rem);
}

/* Typography */
h1 {
  font-size: 2.5rem; /* 40px */
  margin: 0 0 1.5rem;
  line-height: 111.11%;
  font-weight: 600;
}
h2 {
  font-size: 2rem; /* 32px */
  line-height: 120%;
  margin: 2.5rem 0 1.75rem;
  font-weight: 600;
}

h3 {
  font-size: 1.625rem; /* 26px */
  line-height: 120%;
  margin: 2.5rem 0 1.75rem;
  font-weight: 650;
}

h4 {
  font-size: 1.5rem; /* 24px */
  line-height: 120%;
  margin: 2.5rem 0 0.5rem;
  font-weight: 700;
}
h5 {
  font-size: 1.375rem; /* 22px */
  line-height: 120%;
  margin: 2.5rem 0 0.5rem;
  font-weight: 600;
}
h6 {
  font-size: 1.25rem; /* 20px */
  line-height: 120%;
  margin: 2.5rem 0 0.5rem;
  font-weight: 600;
}
/* for header we don't want margin bottom top be that big */
header{
  margin: 0 0 1.5rem;
}
header h1{
  margin: 0 0 0.5rem;
}
header div,
header p,
header {
  font-size: 1.125rem;
  max-width: 45rem;
  letter-spacing: 0.02ch;
}

/* if a header is a first child we don't need margin top */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child{
  margin-top: 0;
}

.large {
  font-size: 1.5rem; /* 24px */
}

.medium,
th{
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

b,
strong {
  font-weight: 700;
}

p {
  margin: 0 0 1.5rem 0; /* 24px */
}
section p:last-child,
article p:last-child{
  margin-bottom: 0;
}

blockquote {
  border-left: 4px solid hsla(252, 100%, 74%, 0.6);
  padding-left: 1.5rem;
  /* 24px */
  margin: 1.5rem 0 1.5rem;
}
blockquote p{
  line-height: 140%;
  margin: 0 0 1rem 0;
}

p,
td,
th {
  line-height: 150%;
}

kbd,
th,
td{
  font-size: 1rem;
}

pre {
  font-family: var(--monospace);
  font-size: 0.9375rem; /* 15px */
}

tt,
samp,
var,
code {
  font-family: var(--monospace);
  font-size: calc(1em - 2px);
  line-height: 1em;
}

del,
.red {
  color: var(--color-red);
}

.redacted{
  color: hsl(0, 0%, 5%);
  background-color: hsl(0, 0%, 5%);
  border: 1px solid var(--color-foreground-10);
}

ins,
.green {
  color: var(--color-green);
}

code,
kbd {
  border-radius: 3px;
  padding: 0 0.5ch 1px;
}

del,
ins {
  text-decoration: none;
}

a{
  text-underline-offset: 0.2em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-underline-color);
  color: var(--link-color);
  transition: var(--transition-link);
}

a:hover {
  color: var(--link-color-hover);
  filter: drop-shadow(0px 0px 0.9375rem hsla(183, 100%, 73%, 0.5));
  transition: none;
  text-decoration-color: var(--link-underline-color-hover);
  transition: var(--transition-link);
}
a:active {
  text-decoration-color: var(--link-underline-color);
  color: var(--link-color);
  transition: none;
}

a.muted,
a.muted:active {
  color: currentColor;
  text-decoration-color: var(--color-foreground-40);
}

a.muted:hover {
  text-decoration-color: var(--color-foreground-70);
}

dfn {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-foreground-50);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  cursor: help;
}

pre {
  background-color: hsla(271, 30%, 5%, 0.8);
  border: 1px solid hsla(252, 100%, 77%, 0.25);
  border-left: none;
  border-right: none;
  line-height: 1.3125rem;
  /* 21px */
  margin: 0 -2.125rem 1rem;
  /* 34px */
  padding: 1rem 2.0625rem;
  /* 16px 33px */
  overflow-x: auto;
  overflow-y: hidden;
}

/* lists */
ul {
  padding-left: 1.0625rem;
}

ul li {
  background: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23957AFF' fill-opacity='0.8'/%3E%3C/svg%3E%0A")
    no-repeat 0px 0.5rem;
  padding-inline-start: 1.375rem;
  list-style: none;
}

ol {
  margin-left: -0.25rem;
  /* -4px */
}

ol li {
  padding-inline-start: 0.1875rem;
  /* 3px */
}

ol li::marker {
  color: hsla(252, 100%, 74%, 0.9);
}

ul li,
ol li,
menu li {
  margin-bottom: 0.6255rem;/* 10px */
}

p + ul,
p + ol,
p + menu {
  /* markdown makes list outside p, so it is a compensation */
  margin-top: -0.75rem;
}

code {
  background-color: hsla(0, 100%, 100%, 0.1);
}
pre code{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border-radius: unset;
  padding: unset;
  background-color: unset;
}


kbd {
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  box-shadow: 0 1px 0 1px hsla(252, 13%, 40%, 1),
    inset 0 0 0 1px hsla(252, 13%, 40%, 1);
  background-color: var(--color-foreground-5);
  padding-top: 1px;
}

hr{
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-color: var(--color-foreground-20);
  margin: 2rem 0;
}

thead tr {
  background-color: var(--color-foreground-10);
}

s {
  text-decoration: line-through;
}

mark {
  color: hsla(0, 0%, 0%, 0.9);
  background-color: hsla(55, 100%, 50%, 0.7);
  border-radius: 2px;
}

table {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-foreground-20);
  border-radius: 2px;
  display: block;
  max-width: fit-content;
  overflow-x: auto;

  overflow-wrap: break-word;
  hyphens: auto;
}

th,
td {
  padding: 0.125rem 0.75rem;
  /* 2px 12px 4px */
  border-right: 1px solid var(--color-foreground-13);
  text-align: left;
  vertical-align: top;
}

td {
  border-top: 1px solid var(--color-foreground-13);
}

th:last-child,
td:last-child {
  border-right: none;
}

.blue {
  color: var(--color-blue);
}

.purple {
  color: var(--color-purple);
}
.soft-purple{
  color: var(--color-soft-purple);
}
.light-purple{
  color: var(--color-light-purple);
}

.black {
  font-weight: 900;
}

section>img,
section p>img{
  border-radius: 6px;
  margin: 0 auto 1rem;

}
section>img:last-child,
section p>img:last-child{
  margin-bottom: 0;
}

/* BACKGROUND STYLES */

.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  min-height: 100vh;
  min-height: 100dvh;
}

.bg1 {
  background: radial-gradient(
    150% 150% at 0% 0%,
    hsl(256, 82%, 8%) 0%,
    hsl(216deg 70% 6%) 100%
  );
}

.bg2 {
  background: radial-gradient(
    100% 60% at 50% 100%,
    rgba(28, 141, 166, 0.5) 0%,
    rgba(166, 28, 142, 0.1) 50%,
    rgba(166, 28, 142, 0) 100%
  );
}

.bg3 {
  background: radial-gradient(
    100% 125% at 100% 50%,
    rgba(28, 141, 166, 0.5) 0%,
    hsla(306, 49%, 50%, 0.05) 50%,
    hsla(306, 49%, 50%, 0) 100%
  );
}

.bg-noise {
  /* filter: grayscale(100%); */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px;
  opacity: 0.2;
}


.btn-brand {
  background-color: var(--default-purple);
  padding: 9px 12px;
  color:hsla(270, 69%, 5%, 1);
  text-decoration: none;
  border-radius: 4px;
  line-height: 100%;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  text-align: center;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.btn-brand:hover {
  background-color: var(--hovered-purple);
  color: hsla(270, 69%, 5%, 1);
  text-decoration: none;
  filter: none;
}

.btn-brand:active {
  background-color: var(--default-purple);
  text-decoration: none;
  color:hsla(270, 69%, 5%, 1);
}

@media screen and (max-width: 1080px) {
}

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 554px) {
  body {
    padding: 0 0.5rem;
  }

  h1{
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.875rem;
  }
  section {
    padding: 1.5rem 1.5rem;
    margin-bottom: 1rem;
  }
}