:root {
  --primary-color: #e2d9e1;
  --button-bg: #918ea520;
  --secondary-color: #5a5a5a;
  --streamer-bg: #0b0a14;
  --accent-color: #57fff2;
  --accent-color-40: #8afff640;
  --accent-color-20: #8afff620;
  --accent-color-10: #8afff610;
  --danger: #ff4d4d;
  --complimentary-color: #fff257;
  --card-color: rgba(50, 90, 150, 0.1);
  --font-color: rgb(230, 230, 230);
  --bright-font-color: rgb(255, 255, 255);
  --secondary-font-color: #737373;
  --tertiary-font-color: #717171;
  --border-color: rgba(160, 170, 180, 1);
  --border-secondary-color: #717171;
  --solid-button: rgba(87, 255, 242, 0.05);
  /* --bg-color: #141223; */
  --bg-color: #0b0a14;
  --bg-gradient: linear-gradient(
      0deg,
      rgba(154, 86, 151, 0.09),
      rgba(154, 86, 151, 0.01)
    ),
    linear-gradient(
      214.47deg,
      rgba(29, 107, 130, 0.09) -13.09%,
      rgba(4, 134, 152, 0.18) -10.93%,
      rgba(120, 140, 200, 0.1) 14.47%,
      rgba(27, 201, 239, 0.135) 73.4%
    );
  --secondary-bg-color: #202020;
  --tertiary-bg-color: #0b0a1440;
  --lighter-bg-color: #353535;
  --button-background: #404040;
  --skeleton-bg: #15202b;
  --skeleton-accent: #10171e;
  --disabled: rgb(100, 100, 100);
  --heading-color: #818cab;
  --bg-transparency: rgba(2.5, 7, 15, 0.9);
  --accent-gradient: linear-gradient(90deg, #1d4ed8, cyan);
  --svg-filter: invert(83%) sepia(4%) saturate(0%) hue-rotate(68deg)
    brightness(97%) contrast(90%);
  --svg-filter-hover: invert(95%) sepia(55%) saturate(2283%) hue-rotate(158deg)
    brightness(106%) contrast(105%);
}

[data-theme='light'] {
  --primary-color: rgb(30, 30, 30);
  --secondary-color: rgb(80, 80, 80);
  --accent-color: #8afff6;
  --font-color: #404040;
  --secondary-font-color: #737373;
  --bg-color: #e5e5e5;
  --secondary-bg-color: #fafafa;
  --tertiary-bg-color: rgb(245, 245, 245);
  --button-background: #e5e5e5;
  --disabled: rgb(200, 200, 200);
  --heading-color: #292922;
  --svg-filter: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

button:hover {
  filter: brightness(0.8);
}

@keyframes jittery {
  5%,
  50% {
    transform: scale(1);
  }

  10% {
    transform: scale(0.9);
  }

  15% {
    transform: scale(1.05);
  }

  20% {
    transform: scale(1.05) rotate(-5deg);
  }

  25% {
    transform: scale(1.05) rotate(5deg);
  }

  30% {
    transform: scale(1.05) rotate(-3deg);
  }

  35% {
    transform: scale(1.05) rotate(2deg);
  }

  40% {
    transform: scale(1.05) rotate(0);
  }
}

@keyframes pulse-accent {
  0% {
    box-shadow: 0 0 5px 2px var(--accent-color-10);
  }

  50% {
    box-shadow: 0 0 15px 10px var(--accent-color-20);
  }

  100% {
    box-shadow: 0 0 5px 2px var(--accent-color-10);
  }
}

@keyframes pulse-vibrant {
  0% {
    box-shadow: 0 0 5px 2px var(--accent-color-10);
  }

  50% {
    box-shadow: 0 0 15px 10px var(--accent-color-40);
  }

  100% {
    box-shadow: 0 0 5px 2px var(--accent-color-10);
  }
}

@keyframes pulse-anxious {
  0% {
    color: rgba(255, 120, 100, 0.8);
  }

  50% {
    color: rgba(255, 120, 100, 1);
    filter: brightness(1.05);
  }

  100% {
    color: rgba(255, 120, 100, 0.8);
  }
}

@keyframes pulse-border-anxious {
  0% {
    border: 1px solid rgba(255, 120, 100, 0.8);
  }

  50% {
    border: 1px solid rgba(255, 120, 100, 1);
    filter: brightness(1.05);
  }

  100% {
    border: 1px solid rgba(255, 120, 100, 0.8);
  }
}

.gradient-text {
  background: -webkit-linear-gradient(#76fff4, #36fcff);
  padding-bottom: 10px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cancel {
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.25);
}

.continue {
  color: var(--primary-color);
  background: rgba(0, 0, 0, 0.5);
}

h3 {
  font-family: Poppins;
  font-weight: 600;
  font-size: 20px;
}

.price {
  font-size: 50px;
  padding: 20px;
  font-weight: 300;
  line-height: 50px;
  background: -webkit-linear-gradient(#76fff4, #36fcff);
  padding-bottom: 10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.25s ease-in-out;
  font-family: Poppins, sans-serif;
}

.item:hover {
  transform: scale(1.0125);
}
.jittery {
  animation: jittery 4s infinite;
}
.jittery:hover {
  animation: none;
}
.device-card {
  /* border: 1.5px solid var(--accent-color); */
  /* background-color: var(--card-color); */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  overflow: auto;
  border: 1px solid var(--accent-color-40);
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  font-family: Inter;
  text-align: left;
  position: relative;
  transition: 0.25s;
  justify-content: space-between;
  border: 2px solid rgba(0, 50, 75, 0.25);
}

.device-card:hover {
  border: 2px solid var(--accent-color-40);
  /* transform: scale(1.025); */
}

.border-button {
  text-decoration: none;
  border-radius: 20px;
  text-transform: capitalize;
  padding: 0.5rem 1.25rem;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  font-style: normal;
  font-weight: 500;
  color: var(--font-color);
  border: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
}

.border-button:hover {
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.main-text {
  font-family: Poppins;
  font-size: 1.2em;
}

.sub-text {
  margin-left: 30px;
  font-weight: 300;
  font-size: 0.9em;
  color: var(--accent-color);
}

.page-wrapper {
  position: relative;
  font-family: 'Poppins';
  color: var(--font-color);
  width: 100%;
  overflow: auto;
  padding: 80px 5% 80px 5%;
  display: flex;
  flex-direction: column;
}

body {
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-family: Poppins, Inter, sans-serif;
  background-color: #000;
  border-radius: 0px;
}

::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  background: var(--bg-color);
  /* 0px hides the scrollbar */
}

::-webkit-scrollbar-track {
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-font-color);
  height: 50px;
  border-radius: 10px;
  transition: 0.1s;
}

::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.97);
}

.topForm {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10%;
}

.doubleForm {
  grid-template-columns: auto auto;
}

.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  box-sizing: border-box;
}

/* text */
.gradientWhiteTitleText {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 26px;
  background: -webkit-linear-gradient(#fff, #a0a0a0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

button {
  font-family: Poppins;
  cursor: pointer;
}

.content {
  padding-left: calc(15% + 25px);
  padding-top: calc(50px);
  display: flex;
  flex-direction: column;
}

.title {
  padding-left: calc(15% + 25px);
  padding-top: calc(5% + 90px);
  display: flex;
  flex-direction: column;
  width: calc(80% - 25px);
}

.blueText {
  color: #57fff2;
}

.whiteText {
  color: white;
}

.grayText {
  color: #616161;
}

.upperCaseText {
  text-transform: uppercase;
}

.blueBG {
  background-color: #57fff2;
}

.lightBlueBG {
  background-color: #c4fffb;
}

.grayBG {
  background-color: #616161;
}

.smallText {
  font-size: 0.6em;
}

.bigText {
  font-size: 1.2em;
}

.boldText {
  font-weight: 700;
}

.hundredSizedBox {
  height: 100px;
  width: 100%;
}

.clickable {
  cursor: pointer;
  transition-duration: 0.1s;
}

.clickable:hover {
  filter: brightness(0.75);
}

.centeredText {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popupContainer {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.white-icon {
  filter: invert(100%);
}

.white-icon:hover {
  filter: invert(50%);
}

.blue-filter {
  shape-rendering: crispEdges;
  filter: invert(78%) sepia(99%) saturate(286%) hue-rotate(102deg)
    brightness(101%) contrast(102%);
  transition-duration: 0.1s;
}

.blue-icon {
  shape-rendering: crispEdges;
  filter: invert(78%) sepia(99%) saturate(286%) hue-rotate(102deg)
    brightness(101%) contrast(102%);
  transition-duration: 0.1s;
  cursor: pointer;
  max-height: 30px;
}

.blue-icon:hover,
.blue-filter:hover {
  filter: invert(78%) sepia(99%) saturate(286%) hue-rotate(102deg)
    brightness(50%) contrast(102%) !important;
}

.gray-icon {
  shape-rendering: crispEdges;
  filter: invert(96%) sepia(2%) saturate(907%) hue-rotate(186deg)
    brightness(100%) contrast(72%) !important;
  transition-duration: 0.1s;
  cursor: pointer;
  max-height: 30px;
}

.gray-icon:hover {
  filter: invert(96%) sepia(2%) saturate(907%) hue-rotate(186deg)
    brightness(65%) contrast(72%) !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.subtitle {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 45px;
  /* identical to box height */

  letter-spacing: 0.01em;

  /* Subheader */

  color: #ffffff;
  margin-bottom: 0px;
}

.subtext {
  font-family: 'Poppins', sans-serif;
  font-style: light;
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.04em;
}

.danger:hover {
  color: var(--danger) !important;
}

.glow {
  font-size: 70px;
  color: #ffffff;
  text-align: center;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000,
      0 0 40px #000000, 0 0 50px var(--accent-color-40),
      0 0 60px var(--accent-color-20), 0 0 70px var(--accent-color-10);
  }

  to {
    text-shadow: 0 0 20px #eeeeee, 0 0 30px var(--accent-color),
      0 0 40px var(--accent-color), 0 0 50px var(--accent-color),
      0 0 60px var(--accent-color-40), 0 0 70px var(--accent-color-20),
      0 0 80px var(--accent-color-10);
  }
}

.buttons {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.buttons > select,
.buttons > .border-button,
.buttons > input {
  width: 100% !important;
}

.buttons > select,
.buttons > input {
  border: 1px solid var(--border-secondary-color) !important;
  background-color: transparent;
  color: var(--font-secondary-color);
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  /* no autofill */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
}

.buttons > select:focus,
.buttons > input:focus {
  background: var(--bg-color);
  outline: none;
}

.buttons > label {
  margin-bottom: -1rem;
  margin-top: 0.5rem;
}
.accent-bold {
  font-weight: 700;
  color: var(--accent-color);
}

.error {
  color: red;
}

.card-h1 {
  font-weight: 700;
  font-family: Poppins;
  margin: 10px;
}

.card-p {
  margin: 0;
}

.card-p {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  padding: 0px 20px;
}

.app-wrapper.svelte-1f2l1f3{height:100%;width:100%;background:var(--bg-color);overflow-x:hidden;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;color:white}.roundedCorners.svelte-1f2l1f3{border-radius:10px}
footer.svelte-l2kv2q.svelte-l2kv2q{background-color:black;z-index:1;position:relative;width:100%;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.footer-bg.svelte-l2kv2q.svelte-l2kv2q{background:linear-gradient(
        0deg,
        rgba(154, 86, 151, 0.12),
        rgba(154, 86, 151, 0.12)
      ),
      linear-gradient(
        214.47deg,
        rgba(29, 107, 130, 0.09) -13.09%,
        rgba(4, 134, 152, 0.18) -10.93%,
        rgba(0, 0, 0, 0) 14.47%,
        rgba(27, 201, 239, 0.135) 73.4%
      );filter:blur(75px);border-radius:50px;transform:rotate(-180deg);z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%}a.svelte-l2kv2q.svelte-l2kv2q{color:white;text-decoration:underline;font-size:0.9em;font-weight:200;margin:0 10px;transition:0.2s}a.svelte-l2kv2q img.svelte-l2kv2q{width:30px;height:30px;margin:0 10px}a.svelte-l2kv2q.svelte-l2kv2q:hover{filter:brightness(0.7)}
.flex-row.svelte-1lnpmhr{gap:10px;width:50px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}a.svelte-1lnpmhr{display:flex;align-items:center;justify-content:center;height:20px}img.svelte-1lnpmhr{height:100%;width:100%;object-fit:contain;filter:var(--svg-filter);opacity:0.5;transition:0.3s}img.svelte-1lnpmhr:hover{opacity:1}
nav.svelte-sfdrov.svelte-sfdrov{z-index:1;padding:20px;padding-left:calc(20px + 1.25%);padding-right:calc(20px + 1.25%);width:100%;user-select:none}.flex-row.svelte-sfdrov.svelte-sfdrov{gap:10%}a.svelte-sfdrov.svelte-sfdrov{color:white;text-decoration:none;font-weight:200;justify-content:center;display:flex;align-items:center}a.svelte-sfdrov img.svelte-sfdrov{max-width:300px}img.svelte-sfdrov.svelte-sfdrov{height:40px}.flex-row.svelte-sfdrov.svelte-sfdrov{align-items:center;width:100%}.full.svelte-sfdrov.svelte-sfdrov{justify-content:space-between}.solid.svelte-sfdrov.svelte-sfdrov{background-color:var(--bg-color);border-bottom:2px solid var(--secondary-bg-color)}.nav-wrapper.svelte-sfdrov.svelte-sfdrov{width:100%;padding:20px;position:relative;border-bottom:2px solid transparent}.links.svelte-sfdrov.svelte-sfdrov{margin-top:20px;align-items:flex-start}.row.svelte-sfdrov.svelte-sfdrov,.social-row.svelte-sfdrov.svelte-sfdrov{padding:10px 20px 10px 20px;margin:5px 0px 5px 0px}.row.svelte-sfdrov.svelte-sfdrov:hover{filter:brightness(0.6)}.top.svelte-sfdrov.svelte-sfdrov{width:100%;justify-content:space-between}svg.svelte-sfdrov.svelte-sfdrov{height:30px}button.svelte-sfdrov.svelte-sfdrov{background:none;outline:none;border:none;cursor:pointer}.slide-content.svelte-sfdrov.svelte-sfdrov{max-height:calc(100vh - 70px);overflow:auto}.protected.svelte-sfdrov.svelte-sfdrov{position:absolute;left:0;top:0;height:70px;width:100%;background:#000;filter:blur(30px);opacity:0.5;border-radius:0px;z-index:-1}.menu-icon.svelte-sfdrov.svelte-sfdrov{height:20px}.login.svelte-sfdrov.svelte-sfdrov{display:flex;flex-direction:row;gap:20px;height:35px}.solid-button.svelte-sfdrov.svelte-sfdrov{height:35px}@media only screen and (max-width: 1000px){.flex-row.svelte-sfdrov.svelte-sfdrov{gap:5%}a.svelte-sfdrov.svelte-sfdrov{font-size:0.8rem}}
img.svelte-5i2686{width:800px;max-width:80%}section.svelte-5i2686{justify-content:center;align-items:center;padding-top:10%}a.svelte-5i2686{margin:auto;margin-top:40px;font-size:1.2em}
section.svelte-8p57lq{display:flex;flex-direction:column;position:relative;padding:0;overflow:visible;justify-content:center}.scene.svelte-8p57lq{width:100%;height:900px}@media(max-width: 1400px){.scene.svelte-8p57lq{height:800px}}@media(max-width: 1200px){.scene.svelte-8p57lq{height:700px}}@media(max-width: 1000px){.scene.svelte-8p57lq{height:600px}}@media(max-width: 800px){.scene.svelte-8p57lq{height:500px}}@media(max-width: 600px){.scene.svelte-8p57lq{height:400px}}@media(max-width: 500px){.scene.svelte-8p57lq{height:300px}}@media(max-width: 425px){.scene.svelte-8p57lq{height:275px}}@media(max-width: 300px){.scene.svelte-8p57lq{height:200px}}h1.svelte-8p57lq{margin:auto;font-weight:300;font-size:2rem}p.svelte-8p57lq{max-width:500px;margin:auto;margin-bottom:20px;font-weight:300;text-align:center}.interactive-info.svelte-8p57lq{padding:5%;text-align:center}
a.svelte-yna3ym{width:40%;max-height:400px;cursor:pointer;transition:0.1s}img.svelte-yna3ym{width:100%;max-height:400px;object-fit:contain}section.svelte-yna3ym{justify-content:center;align-items:center}.flex-row.svelte-yna3ym{justify-content:center;align-items:center;margin-top:50px;flex-wrap:wrap;gap:calc(20px + 5%)}a.svelte-yna3ym:hover{transform:scale(1.02)}p.svelte-yna3ym{max-width:70%;text-align:center;margin-top:0}@media(max-width: 750px){a.svelte-yna3ym{width:100%}}h2.svelte-yna3ym{text-align:center}
section.svelte-u7y6zo{flex-wrap:wrap;gap:4em;justify-content:space-around;align-items:center}img.svelte-u7y6zo{object-fit:contain;min-width:300px;max-height:300px}.text-block.svelte-u7y6zo{width:40%}@media(min-width: 1600px){img.svelte-u7y6zo{max-height:500px}}@media(max-width: 815px){img.svelte-u7y6zo{width:100%}.text-block.svelte-u7y6zo{width:100%}.flex-row.svelte-u7y6zo{flex-wrap:wrap-reverse}}a.svelte-u7y6zo{margin-top:20px}
section.svelte-1t9vf42{position:relative;flex-wrap:wrap-reverse;flex-direction:row-reverse;gap:4em;justify-content:space-around;align-items:center}img.svelte-1t9vf42{object-fit:contain;min-width:300px;max-height:300px}.text-block.svelte-1t9vf42{width:40%}@media(min-width: 1600px){img.svelte-1t9vf42{max-height:500px}}@media(max-width: 815px){img.svelte-1t9vf42{width:100%}.text-block.svelte-1t9vf42{width:100%}}a.svelte-1t9vf42{margin-top:20px}
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=line-numbers+toolbar+copy-to-clipboard+treeview */
code[class*='language-'],
pre[class*='language-'] {
  color: #f8f8f2;
  background: 0 0;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #272822;
}

:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: #8292a2;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: 0.7;
}

.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: #a6e22e;
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.important,
.token.regex {
  color: #fd971f;
}

.token.bold,
.token.important {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

pre[class*='language-'].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*='language-'].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

div.code-toolbar {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  z-index: 10;
  top: 0.3em;
  right: 0.2em;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar > .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar > .toolbar-item > a {
  cursor: pointer;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  color: #bbb;
  font-size: 0.8em;
  padding: 0 0.5em;
  background: #f5f2f0;
  background: rgba(224, 224, 224, 0.2);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
  color: inherit;
  text-decoration: none;
}

.token.treeview-part .entry-line {
  position: relative;
  text-indent: -99em;
  display: inline-block;
  vertical-align: top;
  width: 1.2em;
}

.token.treeview-part .entry-line:before,
.token.treeview-part .line-h:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}

.token.treeview-part .line-h:before,
.token.treeview-part .line-v:before {
  border-left: 1px solid #ccc;
}

.token.treeview-part .line-v-last:before {
  height: 50%;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.token.treeview-part .line-h:after {
  height: 50%;
  border-bottom: 1px solid #ccc;
}

.token.treeview-part .entry-name {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.token.treeview-part .entry-name.dotfile {
  opacity: 0.5;
}

@font-face {
  font-family: PrismTreeview;
  src: url(data:application/font-woff;base64,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)
    format('woff');
}

.token.treeview-part .entry-name:before {
  content: '\ea01';
  font-family: PrismTreeview;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 2.5ex;
  display: inline-block;
}

.token.treeview-part .entry-name.dir:before {
  content: '\ea02';
}

.token.treeview-part .entry-name.ext-bmp:before,
.token.treeview-part .entry-name.ext-eps:before,
.token.treeview-part .entry-name.ext-gif:before,
.token.treeview-part .entry-name.ext-jpe:before,
.token.treeview-part .entry-name.ext-jpeg:before,
.token.treeview-part .entry-name.ext-jpg:before,
.token.treeview-part .entry-name.ext-png:before,
.token.treeview-part .entry-name.ext-svg:before,
.token.treeview-part .entry-name.ext-tiff:before {
  content: '\ea03';
}

.token.treeview-part .entry-name.ext-cfg:before,
.token.treeview-part .entry-name.ext-conf:before,
.token.treeview-part .entry-name.ext-config:before,
.token.treeview-part .entry-name.ext-csv:before,
.token.treeview-part .entry-name.ext-ini:before,
.token.treeview-part .entry-name.ext-log:before,
.token.treeview-part .entry-name.ext-md:before,
.token.treeview-part .entry-name.ext-nfo:before,
.token.treeview-part .entry-name.ext-txt:before {
  content: '\ea06';
}

.token.treeview-part .entry-name.ext-asp:before,
.token.treeview-part .entry-name.ext-aspx:before,
.token.treeview-part .entry-name.ext-c:before,
.token.treeview-part .entry-name.ext-cc:before,
.token.treeview-part .entry-name.ext-cpp:before,
.token.treeview-part .entry-name.ext-cs:before,
.token.treeview-part .entry-name.ext-css:before,
.token.treeview-part .entry-name.ext-h:before,
.token.treeview-part .entry-name.ext-hh:before,
.token.treeview-part .entry-name.ext-htm:before,
.token.treeview-part .entry-name.ext-html:before,
.token.treeview-part .entry-name.ext-jav:before,
.token.treeview-part .entry-name.ext-java:before,
.token.treeview-part .entry-name.ext-js:before,
.token.treeview-part .entry-name.ext-php:before,
.token.treeview-part .entry-name.ext-rb:before,
.token.treeview-part .entry-name.ext-xml:before {
  content: '\ea07';
}

.token.treeview-part .entry-name.ext-7z:before,
.token.treeview-part .entry-name.ext-bz2:before,
.token.treeview-part .entry-name.ext-bz:before,
.token.treeview-part .entry-name.ext-gz:before,
.token.treeview-part .entry-name.ext-rar:before,
.token.treeview-part .entry-name.ext-tar:before,
.token.treeview-part .entry-name.ext-tgz:before,
.token.treeview-part .entry-name.ext-zip:before {
  content: '\ea08';
}

.token.treeview-part .entry-name.ext-aac:before,
.token.treeview-part .entry-name.ext-au:before,
.token.treeview-part .entry-name.ext-cda:before,
.token.treeview-part .entry-name.ext-flac:before,
.token.treeview-part .entry-name.ext-mp3:before,
.token.treeview-part .entry-name.ext-oga:before,
.token.treeview-part .entry-name.ext-ogg:before,
.token.treeview-part .entry-name.ext-wav:before,
.token.treeview-part .entry-name.ext-wma:before {
  content: '\ea04';
}

.token.treeview-part .entry-name.ext-avi:before,
.token.treeview-part .entry-name.ext-flv:before,
.token.treeview-part .entry-name.ext-mkv:before,
.token.treeview-part .entry-name.ext-mov:before,
.token.treeview-part .entry-name.ext-mp4:before,
.token.treeview-part .entry-name.ext-mpeg:before,
.token.treeview-part .entry-name.ext-mpg:before,
.token.treeview-part .entry-name.ext-ogv:before,
.token.treeview-part .entry-name.ext-webm:before {
  content: '\ea05';
}

.token.treeview-part .entry-name.ext-pdf:before {
  content: '\ea09';
}

.token.treeview-part .entry-name.ext-xls:before,
.token.treeview-part .entry-name.ext-xlsx:before {
  content: '\ea0a';
}

.token.treeview-part .entry-name.ext-doc:before,
.token.treeview-part .entry-name.ext-docm:before,
.token.treeview-part .entry-name.ext-docx:before {
  content: '\ea0c';
}

.token.treeview-part .entry-name.ext-pps:before,
.token.treeview-part .entry-name.ext-ppt:before,
.token.treeview-part .entry-name.ext-pptx:before {
  content: '\ea0b';
}

section.svelte-qfpr3a{max-width:100%;display:flex;align-items:center;position:relative}.flex-column.svelte-qfpr3a{gap:20px;max-width:100%}.flex-row.svelte-qfpr3a{gap:20px}.code-container.svelte-qfpr3a{background-color:var(--bg-color);border-radius:10px;max-width:100%;overflow:auto}pre.svelte-qfpr3a{background-color:var(--bg-color);padding:0}.copy-to-clipboard-button{padding:5px !important}
section.svelte-1htaf13{position:relative;display:flex;justify-content:center;align-items:center}.flex-column.svelte-1htaf13{gap:20px;width:40%}.flex-row.svelte-1htaf13{flex-wrap:wrap;gap:20px}.focus-image.svelte-1htaf13{margin:auto;width:40%;object-fit:contain}@media(max-width: 800px){.flex-column.svelte-1htaf13{width:100%}.focus-image.svelte-1htaf13{width:100%}}
section.svelte-a4cvls{position:relative;display:flex;align-items:center}.flex-column.svelte-a4cvls{gap:20px}.flex-row.svelte-a4cvls{gap:20px}.inline-a.svelte-a4cvls{color:var(--accent-color);text-decoration:underline}
.blob-one.svelte-1se571o{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;filter:blur(10px);opacity:0.125;overflow:visible}main.svelte-1se571o{position:relative;z-index:1;max-width:1200px}
section {
  max-width: 100%;
  padding: calc(5%);
  padding-top: 5em;
  padding-bottom: 5em;
}

/* 800px reduce section padding */
@media screen and (max-width: 815px) {
  section {
    padding-left: calc(5% + 15px);
    padding-right: calc(5% + 15px);
  }
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(
      0deg,
      rgba(154, 86, 151, 0.12),
      rgba(154, 86, 151, 0.12)
    ),
    linear-gradient(
      214.47deg,
      rgba(29, 107, 130, 0.09) -13.09%,
      rgba(4, 134, 152, 0.18) -10.93%,
      rgba(0, 0, 0, 0) 14.47%,
      rgba(27, 201, 239, 0.135) 73.4%
    );
  filter: blur(75px);
  transform: rotate(-180deg);
}

p {
  font-size: 0.9em;
}

main {
  z-index: 1;
  font-family: Poppins;
  padding-bottom: 40px;
  box-sizing: border-box;
  max-width: 100%;
}

h2 {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.5em;
  margin-bottom: 10px;
  /* identical to box height, or 166% */

  display: flex;
  align-items: center;
  color: #ffffff;
}

p {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
}

img {
  max-width: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.solid-button {
  background: rgba(29, 107, 130, 0.2);
  border: 1px solid rgba(87, 255, 242, 0.3);
  border-radius: 50px;
  color: white;
  padding: 0.5em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
}

/* above 1080px increase font size */
@media screen and (min-width: 1080px) {
  p {
    font-size: 1em;
  }

  h2 {
    font-size: 2em;
  }
}

/* above 1440px increase font size */
@media screen and (min-width: 1440px) {
  p {
    font-size: 1.2em;
  }

  h2 {
    font-size: 2.2em;
  }
}

a {
  text-decoration: none;
}

