:root {
  --padding: 2rem;
  --border-radius: .5rem;
  --transition: .5s;
  --shadow-offset-x: 2px;
  --shadow-offset-y: 2px;
  --transition-delay: 0s;
  --color-text: rgba(255,255,255, .75);
  --color-action-up: #9eefff;
  --color-action-over: #ff9ec7;
  --color-action-up-dim: #01333d;
  --color-dynamic: rgba(255, 158, 199, .75);
  --background-desktop: url(/assets/img/bg-desktop.webp?v=40);
  --background-mobile:url(/assets/img/bg-mob.webp?v=40);
  --box-shadow: 0px 0px calc(var(--padding)*.75) rgba(10,10,10,1), inset 0px 0px calc(var(--padding)*.75) rgba(255,255,255,.1);
  --box-shadow-dynamic: 0px 0px calc(var(--padding)*.75) rgba(0,0,0,1), inset 0px 0px calc(var(--padding)*.1) var(--color-dynamic);
  --color-bg: rgba(30,30,30,1);
  --color-bg-half: rgba(30,30,30,.5);
  --color-scroll-grad-start: rgba(20,20,20,1);
  --color-scroll-grad-end: rgba(20,20,20,0);
  --phone-grad: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%);
  --font-headings: "Bebas Neue", sans-serif; }

@keyframes move-out-to-bottom {
  0% {
    transform: scale(1) translateY(0%);
    opacity: 1; }
  33% {
    transform: scale(0.9) translateY(0%);
    opacity: 1; }
  66% {
    transform: scale(0.9) translateY(-100%);
    opacity: 0; }
  100% {
    transform: scale(0.9) translateY(-100%);
    opacity: 0; } }
@keyframes move-in-from-top {
  0% {
    transform: scale(0.9) translateY(-100%);
    opacity: 0; }
  33% {
    transform: scale(0.9) translateY(-100%);
    opacity: 0; }
  66% {
    transform: scale(0.9) translateY(0%);
    opacity: 1; }
  100% {
    transform: scale(1) translateY(0%);
    opacity: 1; } }
@keyframes move-out-to-top {
  0% {
    transform: scale(1) translateY(0%);
    opacity: 1; }
  33% {
    transform: scale(0.9) translateY(0%);
    opacity: 1; }
  66% {
    transform: scale(0.9) translateY(100%);
    opacity: 0; }
  100% {
    transform: scale(0.9) translateY(100%);
    opacity: 0; } }
@keyframes move-in-from-bottom {
  0% {
    transform: scale(0.9) translateY(100%);
    opacity: 0; }
  33% {
    transform: scale(0.9) translateY(100%);
    opacity: 0; }
  66% {
    transform: scale(0.9) translateY(0%);
    opacity: 1; }
  100% {
    transform: scale(1) translateY(0%);
    opacity: 1; } }
@keyframes move-out-to-left {
  0% {
    transform: scale(1) translateX(0%);
    opacity: 1; }
  33% {
    transform: scale(0.9) translateX(0%);
    opacity: 1; }
  66% {
    transform: scale(0.9) translateX(-100%);
    opacity: 0; }
  100% {
    transform: scale(0.9) translateX(-100%);
    opacity: 0; } }
@keyframes move-in-from-left {
  0% {
    transform: scale(0.9) translateX(-100%);
    opacity: 0; }
  33% {
    transform: scale(0.9) translateX(-100%);
    opacity: 0; }
  66% {
    transform: scale(0.9) translateX(0%);
    opacity: 1; }
  100% {
    transform: scale(1) translateX(0%);
    opacity: 1; } }
@keyframes move-in-from-right {
  0% {
    transform: scale(0.9) translateX(100%);
    opacity: 0; }
  33% {
    transform: scale(0.9) translateX(100%);
    opacity: 0; }
  66% {
    transform: scale(0.9) translateX(0%);
    opacity: 1; }
  100% {
    transform: scale(1) translateX(0%);
    opacity: 1; } }
@keyframes move-out-to-right {
  0% {
    transform: scale(1) translateX(0%);
    opacity: 1; }
  33% {
    transform: scale(0.9) translateX(0%);
    opacity: 1; }
  66% {
    transform: scale(0.9) translateX(100%);
    opacity: 0; }
  100% {
    transform: scale(0.9) translateX(100%);
    opacity: 0; } }
@keyframes button-icon {
  0% {
    transform: translateX(0%);
    opacity: 1; }
  50% {
    transform: translateX(100%);
    opacity: 0; }
  51% {
    transform: translateX(-100%);
    opacity: 0; }
  100% {
    transform: translateX(0%);
    opacity: 1; } }
@keyframes button-icon-left {
  0% {
    transform: translateX(0%);
    opacity: 1; }
  50% {
    transform: translateX(-100%);
    opacity: 0; }
  51% {
    transform: translateX(100%);
    opacity: 0; }
  100% {
    transform: translateX(0%);
    opacity: 1; } }
@keyframes button-icon-up {
  0% {
    transform: translateY(0%);
    opacity: 1; }
  50% {
    transform: translateY(-100%);
    opacity: 0; }
  51% {
    transform: translateY(100%);
    opacity: 0; }
  100% {
    transform: translateY(0%);
    opacity: 1; } }
@keyframes button-icon-down {
  0% {
    transform: translateY(0%);
    opacity: 1; }
  50% {
    transform: translateY(100%);
    opacity: 0; }
  51% {
    transform: translateY(-100%);
    opacity: 0; }
  100% {
    transform: translateY(0%);
    opacity: 1; } }
@keyframes button-shadow {
  0% {
    box-shadow: 0px 0px 0rem var(--color-action-0); }
  40% {
    box-shadow: 0px 0px 1rem var(--color-action-75); }
  60% {
    box-shadow: 0px 0px 1rem var(--color-action-75); }
  100% {
    box-shadow: 0px 0px 0rem var(--color-action-0); } }
@keyframes fade_in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes bounce {
  0% {
    content: '[LOADING----]'; }
  10% {
    content: '[-LOADING---]'; }
  20% {
    content: '[--LOADING--]'; }
  30% {
    content: '[---LOADING-]'; }
  40% {
    content: '[----LOADING]'; }
  50% {
    content: '[G----LOADIN]'; }
  60% {
    content: '[NG----LOADI]'; }
  70% {
    content: '[ING----LOAD]'; }
  80% {
    content: '[DING----LOA]'; }
  90% {
    content: '[ADING----LO]'; }
  100% {
    content: '[OADING----L]'; } }
*[data-reveal="fade"] {
  transform-origin: var(--padding) var(--padding);
  opacity: 0;
  animation: fade_in 0.25s var(--transition-delay) ease-out forwards; }

* {
  box-sizing: border-box; }

a {
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-action-up-dim);
  transition: calc(var(--transition)*.5);
  padding-bottom: calc(var(--padding)*.1);
  cursor: url("/assets/img/pointer.png"), pointer; }
  a img, a picture:after {
    transition: calc(var(--transition)*.25); }
  a i {
    color: var(--color-action-up); }
  a:active {
    color: var(--color-action-over);
    border-bottom: 2px solid var(--color-action-over); }
    a:active .work-image img {
      transform: scale(1.05); }
    a:active .work-image:after {
      box-shadow: var(--box-shadow-dynamic); }
    a:active i {
      color: var(--color-action-over); }
  @media all and (min-width: 1000px) {
    a {
      transition: var(--transition); }
      a img, a picture:after {
        transition: var(--transition); }
      a:hover {
        color: var(--color-action-over);
        border-bottom: 2px solid var(--color-action-over); }
        a:hover .work-image img {
          transform: scale(1.05); }
        a:hover .work-image:after {
          box-shadow: var(--box-shadow-dynamic); } }

i.half {
  font-size: .5em;
  line-height: 1em;
  vertical-align: middle;
  margin-right: .12em; }

.button, button {
  cursor: url("/assets/img/pointer.png"), pointer;
  display: inline-block;
  color: var(--color-action-up);
  padding: calc(var(--padding)*.25) calc(var(--padding)*.5);
  border: 2px solid var(--color-action-up);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: 0s;
  line-height: 100%;
  font-size: 1rem;
  font-weight: 400;
  background-color: var(--color-bg);
  box-shadow: calc(var(--shadow-offset-x) * 1) calc(var(--shadow-offset-y) * 1) 0px var(--color-action-up), calc(var(--shadow-offset-x) * 2) calc(var(--shadow-offset-y) * 2) 0px var(--color-action-up), calc(var(--shadow-offset-x) * 3) calc(var(--shadow-offset-y) * 3) 0px var(--color-action-up); }
  .button i, button i {
    margin-right: 0px;
    transition: calc(var(--transition)*.25); }
    @media all and (min-width: 1000px) {
      .button i, button i {
        transition: var(--transition); } }
  .button:active, button:active {
    color: var(--color-bg);
    transition: calc(var(--transition)*.25);
    background-color: var(--color-action-over);
    border: 2px solid var(--color-action-over); }
    .button:active i, button:active i {
      color: var(--color-bg); }
  @media all and (min-width: 1000px) {
    .button:hover, button:hover {
      color: var(--color-bg);
      transition: var(--transition);
      background-color: var(--color-action-over);
      box-shadow: 0px 0px 0px var(--color-action-over), 0px 0px 0px var(--color-action-over), 0px 0px 0px var(--color-action-over);
      border: 2px solid var(--color-action-over); }
      .button:hover i, button:hover i {
        color: var(--color-bg); }
    .button[data-animate="left"]:hover i, button[data-animate="left"]:hover i {
      transform: translateX(-0.25em); }
    .button[data-animate="right"]:hover i, button[data-animate="right"]:hover i {
      transform: translateX(0.25em); } }
  .button.icon, button.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: calc(var(--padding)*.25); }
    .button.icon i, button.icon i {
      margin: 0px; }

body, html {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 150%;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
  margin: 0px;
  padding: 0px;
  letter-spacing: .02em;
  cursor: url("/assets/img/cursor.png"), auto; }
  @media all and (min-width: 1000px) {
    body, html {
      font-size: 12px; } }
  @media all and (min-width: 1500px) {
    body, html {
      font-size: 14px; } }
  @media all and (min-width: 2000px) {
    body, html {
      font-size: 16px; } }
  @media all and (min-width: 2500px) {
    body, html {
      font-size: 18px; } }

a {
  cursor: url("/assets/img/cursor.png"), auto; }
  a:hover {
    cursor: url("/assets/img/cursor.png"), auto; }

html {
  background-color: var(--color-bg);
  background-image: var(--background-mobile);
  background-position: top left;
  background-size: cover; }
  @media all and (min-width: 1000px) {
    html {
      background-image: var(--background-desktop); } }

strong, .strong {
  font-weight: 600; }

.italic {
  font-style: italic; }

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh; }
  body:after {
    content: '';
    display: block;
    pointer-events: none;
    position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-half); }

.figure {
  display: block;
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 70rem;
  height: auto; }
  .figure img {
    width: 100%;
    display: block;
    border-radius: var(--border-radius); }

p, h1, h2, h3, h4, h5 {
  line-height: 150%;
  padding: 0px;
  margin: 0px;
  margin-bottom: calc(var(--padding)*.5);
  max-width: 70rem; }

h1, h2, h3, h4, h5, .h1 {
  font-family: var(--font-headings);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 90%; }
  h1.normal, h2.normal, h3.normal, h4.normal, h5.normal, .h1.normal {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 120%; }
    @media all and (max-width: 1000px) {
      h1.normal, h2.normal, h3.normal, h4.normal, h5.normal, .h1.normal {
        line-height: 120%; } }

::selection {
  background-color: var(--color-dynamic);
  color: var(--color-bg); }

h1, .h1 {
  font-size: 5.25rem; }

h2 {
  font-size: 3.5rem; }

h3 {
  font-size: 2.5rem; }

h4 {
  font-size: 2rem; }

h5 {
  font-size: 1.75rem; }

p {
  max-width: 40rem; }

*[data-color="dynamic"] {
  color: var(--color-dynamic) !important; }

*[data-color="action"] {
  color: var(--color-action-up) !important; }

*[data-align="middle"] {
  align-items: center !important; }

*[data-align="top"] {
  align-items: start !important; }

*[data-br="hide"] br {
  display: none !important; }

@media all and (max-width: 1000px) {
  #main_intro {
    padding-top: calc(var(--padding) * 3); } }

article {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  width: 100%; }
  article[data-bg="gradient"]:before {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    background: linear-gradient(145deg, var(--color-dynamic) 0%, rgba(10, 10, 10, 0) 40%);
    z-index: 1;
    opacity: .1; }
  article .pod {
    width: 100%;
    padding: var(--padding); }
    @media all and (min-width: 1000px) {
      article .pod {
        width: 33.33%;
        max-width: calc(var(--padding)*13); }
        article .pod.wide {
          width: 100%;
          max-width: 75%; }
        article .pod.full {
          width: 100%;
          max-width: 100%; }
        article .pod.thirds-2 {
          width: 66%;
          max-width: 66%; } }
    article .pod.work-item a:not(.button) {
      border: none;
      padding: 0px; }
      article .pod.work-item a:not(.button) p:last-child {
        margin-bottom: 0px; }
    article .pod.stats {
      display: flex;
      justify-content: left;
      gap: calc(var(--padding)*1);
      flex-direction: column;
      align-items: flex-start; }
      article .pod.stats h4 {
        margin: 0px;
        line-height: 1em;
        margin-bottom: -.3em; }
      @media all and (min-width: 1000px) {
        article .pod.stats {
          width: 25%; } }
      article .pod.stats .stat-container {
        width: 100%;
        overflow: hidden;
        border-radius: var(--border-radius);
        display: flex;
        justify-content: left;
        align-items: center;
        flex-wrap: wrap;
        position: relative; }
        article .pod.stats .stat-container:before {
          content: '';
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          z-index: 1;
          backdrop-filter: blur(var(--padding));
          background: linear-gradient(-25deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
          box-shadow: var(--box-shadow); }
      article .pod.stats .stat {
        width: 50%;
        border-radius: 0px;
        padding: calc(var(--padding)*.5);
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 2; }
        article .pod.stats .stat:first-child {
          width: 100%;
          border-top: none; }
          @media all and (max-width: 1000px) {
            article .pod.stats .stat:first-child .h1 {
              font-size: 6rem; } }
        @media all and (max-width: 1000px) {
          article .pod.stats .stat:last-child {
            border-left: 1px solid rgba(255, 255, 255, 0.1); } }
        @media all and (min-width: 1000px) {
          article .pod.stats .stat {
            width: 100%;
            padding: calc(var(--padding)*1); } }
        article .pod.stats .stat h3, article .pod.stats .stat h2, article .pod.stats .stat h1, article .pod.stats .stat p {
          position: relative;
          z-index: 2;
          margin: 0px;
          padding: 0px;
          line-height: 1em; }
        @media all and (max-width: 1000px) {
          article .pod.stats .stat .h1 {
            font-size: 3rem; } }
        article .pod.stats .stat:before {
          content: '';
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          z-index: 0;
          background: linear-gradient(145deg, var(--color-dynamic) 0%, rgba(0, 0, 0, 0) 33%);
          opacity: .1; }
    article .pod[data-render="phone"] {
      padding: 0px;
      display: none; }
      @media all and (min-width: 1000px) {
        article .pod[data-render="phone"].has-stats {
          width: 75%; } }
      article .pod[data-render="phone"][data-viewport="mobile"] {
        overflow: hidden;
        margin-top: calc(var(--padding) * -2.5);
        margin-bottom: 0px;
        margin-left: calc(var(--padding) * -1);
        margin-right: calc(var(--padding) * -1);
        width: auto; }
        @media all and (max-width: 1000px) {
          article .pod[data-render="phone"][data-viewport="mobile"] {
            display: block; } }
      @media all and (min-width: 1000px) {
        article .pod[data-render="phone"][data-viewport="desktop"] {
          display: block; } }
      article .pod[data-render="phone"] #render1_desktop, article .pod[data-render="phone"] #render1_mobile {
        position: relative;
        z-index: 2; }
      article .pod[data-render="phone"] .render-container {
        position: relative; }
        article .pod[data-render="phone"] .render-container:before {
          content: '';
          display: block;
          pointer-events: none;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          aspect-ratio: 1/1;
          background: var(--phone-grad);
          transform: translate(-50%, -50%);
          z-index: -1;
          opacity: .2; }
      article .pod[data-render="phone"] .render-actions {
        display: flex;
        position: absolute;
        bottom: var(--padding);
        left: 50%;
        transform: translate(-50%, 0%);
        z-index: 3; }
    article .pod .render-container {
      cursor: url("/assets/img/grab.png"), grab;
      width: 100%; }
      article .pod .render-container canvas {
        opacity: 0;
        transition: all 0s, opacity 1s ease-in-out; }
      @media all and (max-width: 1000px) {
        article .pod .render-container {
          height: 55vh; } }
      @media all and (min-width: 1000px) {
        article .pod .render-container {
          height: 100vh;
          margin-top: calc(var(--padding) * -2); } }
      article .pod .render-container:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .25s;
        font-family: var(--font-headings);
        font-size: 1.5rem;
        line-height: 1em;
        animation: bounce 1s steps(11, end) infinite;
        pointer-events: none; }
      article .pod .render-container[data-state="loading"]::after {
        opacity: 1; }
      article .pod .render-container[data-state="loaded"] canvas {
        opacity: 1; }
      article .pod .render-container[data-state="loaded"]::after {
        opacity: 0; }
  article .sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: left;
    width: 100%; }
    @media all and (min-width: 1000px) {
      article .sidebar {
        width: 25%;
        justify-content: flex-end;
        position: sticky;
        top: 0px;
        padding-top: calc(var(--padding)*2); } }
    article .sidebar .pod {
      width: 100%; }
  article .sidebar-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    overflow-y: auto;
    width: 100%;
    position: relative;
    padding-bottom: calc(var(--padding) * 2); }
    @media all and (min-width: 1000px) {
      article .sidebar-content {
        padding-top: calc(var(--padding) * 2);
        width: 75%; } }

img, picture {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%; }
  img.work-image:before, img.work-image:after, img.figure:before, img.figure:after, picture.work-image:before, picture.work-image:after, picture.figure:before, picture.figure:after {
    content: '';
    position: absolute;
    top: 2%;
    left: 0%;
    width: 100%;
    height: 94%;
    z-index: 1;
    border-radius: var(--border-radius); }
  img.work-image:after, img.figure:after, picture.work-image:after, picture.figure:after {
    backdrop-filter: blur(var(--padding));
    background: linear-gradient(-25deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%);
    box-shadow: var(--box-shadow); }
  img.work-image:before, img.figure:before, picture.work-image:before, picture.figure:before {
    background: linear-gradient(145deg, var(--color-dynamic) 0%, rgba(0, 0, 0, 0) 33%);
    opacity: .1; }
  img.work-image[data-grad="from-bottom"]:after, img.figure[data-grad="from-bottom"]:after, picture.work-image[data-grad="from-bottom"]:after, picture.figure[data-grad="from-bottom"]:after {
    background: linear-gradient(215deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%); }
  img.work-image[data-grad="from-bottom"]:before, img.figure[data-grad="from-bottom"]:before, picture.work-image[data-grad="from-bottom"]:before, picture.figure[data-grad="from-bottom"]:before {
    background: linear-gradient(15deg, var(--color-dynamic) 0%, rgba(0, 0, 0, 0) 33%); }
  img.work-image img, img.figure img, picture.work-image img, picture.figure img {
    z-index: 2; }
  @media all and (max-width: 1000px) {
    img.work-image.zoom, img.figure.zoom, picture.work-image.zoom, picture.figure.zoom {
      transition: var(--transition);
      position: relative; }
      img.work-image.zoom::after, img.figure.zoom::after, picture.work-image.zoom::after, picture.figure.zoom::after {
        font-family: "Font Awesome 6 Pro";
        content: "\f00e";
        padding: calc(var(--padding)*.25);
        box-sizing: border-box;
        color: var(--color-action-up);
        font-size: 1.25rem;
        text-shadow: 0px 0px 2px black; }
      img.work-image.zoom[data-zoom="true"], img.figure.zoom[data-zoom="true"], picture.work-image.zoom[data-zoom="true"], picture.figure.zoom[data-zoom="true"] {
        width: 1000px !important;
        max-width: 1000px !important; }
        img.work-image.zoom[data-zoom="true"]::after, img.figure.zoom[data-zoom="true"]::after, picture.work-image.zoom[data-zoom="true"]::after, picture.figure.zoom[data-zoom="true"]::after {
          content: '\f010'; } }

.seperator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-top: calc(var(--padding)*.5);
  margin-bottom: calc(var(--padding)*.5);
  position: relative;
  width: 100%; }

@view-transition {
  navigation: auto; }
::view-transition-old(root) {
  animation: 1s ease-in-out both move-out-to-top; }

::view-transition-new(root) {
  animation: 1s ease-in-out both move-in-from-top; }

html[data-direction="next"]::view-transition-old(root) {
  animation: 1s ease-in-out both move-out-to-left; }
html[data-direction="next"]::view-transition-new(root) {
  animation: 1s ease-in-out both move-in-from-right; }
html[data-direction="prev"]::view-transition-old(root) {
  animation: 1s ease-in-out both move-out-to-right; }
html[data-direction="prev"]::view-transition-new(root) {
  animation: 1s ease-in-out both move-in-from-left; }
html[data-direction="down"]::view-transition-old(root) {
  animation: 1s ease-in-out both move-out-to-bottom; }
html[data-direction="down"]::view-transition-new(root) {
  animation: 1s ease-in-out both move-in-from-bottom; }

/* width */
::-webkit-scrollbar {
  height: 4px;
  width: 4px; }

/* Track */
::-webkit-scrollbar-track {
  background: black; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-action-up); }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-dynamic); }

#work_sidebar {
  display: flex;
  flex-direction: column; }

.navigation {
  margin-top: calc(var(--padding)*.5); }
  @media all and (max-width: 1000px) {
    .navigation {
      position: sticky;
      bottom: var(--padding);
      z-index: 99;
      background: linear-gradient(0deg, var(--color-scroll-grad-start) 0%, var(--color-scroll-grad-start) 50%, var(--color-scroll-grad-end) 100%); } }

.tags {
  font-style: italic;
  opacity: .5;
  font-size: .85rem;
  padding-left: 1.5rem;
  position: relative; }
  .tags i {
    position: absolute;
    top: .25rem;
    left: 0px; }

.backlink {
  font-size: .85rem;
  margin-bottom: calc(var(--padding) * 1);
  z-index: 3;
  position: relative; }

.client {
  opacity: .5;
  font-size: .85rem;
  margin-bottom: calc(var(--padding) * .25); }

.meta {
  margin-top: calc(var(--padding) * 1); }

.header-actions {
  z-index: 100;
  position: fixed;
  top: calc(var(--padding)*.75);
  right: calc(var(--padding)*.75);
  display: flex; }

.header-actions, .render-actions, .navigation {
  margin-right: auto;
  border-radius: var(--border-radius);
  box-shadow: calc(var(--shadow-offset-x) * 1) calc(var(--shadow-offset-y) * 1) 0px var(--color-action-up), calc(var(--shadow-offset-x) * 2) calc(var(--shadow-offset-y) * 2) 0px var(--color-action-up), calc(var(--shadow-offset-x) * 3) calc(var(--shadow-offset-y) * 3) 0px var(--color-action-up);
  display: flex; }
  .header-actions a, .header-actions button, .render-actions a, .render-actions button, .navigation a, .navigation button {
    box-shadow: none;
    border-radius: 0px; }
    .header-actions a:first-child, .header-actions button:first-child, .render-actions a:first-child, .render-actions button:first-child, .navigation a:first-child, .navigation button:first-child {
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius); }
    .header-actions a:last-child, .header-actions button:last-child, .render-actions a:last-child, .render-actions button:last-child, .navigation a:last-child, .navigation button:last-child {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius); }

.callout {
  padding: calc(var(--padding)*.5);
  border: 2px solid var(--color-action-up-dim);
  border-radius: var(--border-radius);
  box-shadow: 2px 2px 0px var(--color-action-up-dim), 4px 4px 0px var(--color-action-up-dim), 6px 6px 0px var(--color-action-up-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .callout p {
    margin: 0px;
    padding: calc(var(--padding)*.25); }

#tooltip {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transform: scale(0) translate(0px, 0px);
  line-height: 1em;
  font-size: .75rem;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--color-action-up);
  padding: calc(var(--padding)*.25);
  border-radius: var(--border-radius);
  transition: all 0s, transform .25s;
  backdrop-filter: blur(calc(var(--padding)*.25)); }
  @media all and (max-width: 1000px) {
    #tooltip {
      display: none; } }
  #tooltip[data-active="true"] {
    transform: scale(1) translate(28px, 7px); }

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  margin-bottom: calc(var(--padding)*.75); }
  ul li {
    margin: 0px;
    padding: 0px;
    margin-bottom: calc(var(--padding)*.25); }
    ul li:last-child {
      margin-bottom: 0px; }

#footer {
  display: flex;
  align-items: center;
  padding: var(--padding);
  padding-bottom: calc(var(--padding)*2);
  backdrop-filter: blur(calc(var(--padding)*.25));
  border-top: 2px solid rgba(255, 255, 255, 0.05); }
  @media all and (max-width: 1000px) {
    #footer {
      padding: calc(var(--padding)*.5);
      padding-bottom: calc(var(--padding)*2); } }
  #footer ul, #footer h5, #footer h1, #footer h2, #footer h3, #footer h4 {
    padding: var(--padding);
    margin: 0px; }
    @media all and (max-width: 1000px) {
      #footer ul, #footer h5, #footer h1, #footer h2, #footer h3, #footer h4 {
        width: 100%;
        padding: calc(var(--padding)*.5); } }

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