/* Values from site-extract / computed styles of https://dabric.xyz/ */

:root {
  --ease-jiggle: cubic-bezier(0, 1.12, 0.218, 1);
  --ease-smooth: cubic-bezier(0.78, 0, 0.22, 1);

  --c-baseplate: hsl(108, 20%, 5%);
  --c-dark: hsl(0, 0%, 5%);
  --c-light: hsl(0, 0%, 80%);
  --c-sur: var(--c-dark);
  --c-sur-ctr: hsl(0, 0%, 22.5%);
  --c-sur-ctr-low: hsl(0, 0%, 15%);
  --c-on-sur: var(--c-light);
  --c-on-sur-ctr: var(--c-on-sur);
  --c-on-sur-ctr-low: var(--c-on-sur);
  --c-on-sur-var: hsl(0, 0%, 50%);
  --c-out: var(--c-on-sur);
  --c-out-var: hsl(0, 0%, 40%);
  --c-inv-sur: var(--c-on-sur);
  --c-on-inv-sur: var(--c-sur);
  --c-inv-sur-bright: #ffffff;
  --c-on-inv-sur-bright: #10140f;

  --size-unit: 3px;
  --rem-spacing: 0.25rem;
  --px-spacing: var(--size-unit);
  --font-size: calc(var(--size-unit) * 8);
  --font-sans: "Rubik", sans-serif;
  --font-brand: "Chakra Petch", sans-serif;
  --content-width: calc(var(--px-spacing) * 350);
  --textual-width: calc(var(--px-spacing) * 300);
  --program-width: calc(var(--px-spacing) * 600);
  --navigation-height: calc(var(--rem-spacing) * 12);
  --layout-x-padding: calc(var(--px-spacing) * 16);
  --border-width: calc(var(--px-spacing) * 1);
  --font-size-sm: calc(var(--rem-spacing) * 3);

  font-size: var(--font-size);
  accent-color: #a0d49b;
}

@media (prefers-color-scheme: light) {
  :root {
    --c-dark: hsl(0, 0%, 5%);
    --c-light: hsl(0, 0%, 85%);
    --c-sur: var(--c-light);
    --c-on-sur: var(--c-dark);
    --c-on-sur-var: hsl(0, 0%, 22%);
    --c-out-var: hsl(0, 0%, 50%);
    --c-sur-ctr: hsl(0, 0%, 70%);
    --c-sur-ctr-low: hsl(0, 0%, 75%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-sur);
  color: var(--c-on-sur);
  font-family: var(--font-sans);
  font-size: calc(var(--rem-spacing) * 4);
  position: relative;
  overflow-wrap: break-word;
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/* Cursor canvas */
cursor-canvas {
  display: contents;
}

cursor-canvas canvas {
  image-rendering: pixelated;
  width: 100%;
  height: min(max(45vh, 300px), 700px);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  cursor-canvas canvas {
    cursor: unset;
  }
}

/* Layout */
.content-section,
footer {
  padding: 0 var(--layout-x-padding);
  max-width: var(--content-width);
  margin: auto;
}

footer {
  padding: calc(var(--rem-spacing) * 16) var(--layout-x-padding);
  text-align: center;
  color: var(--c-on-sur-var);
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  margin: calc(var(--px-spacing) * 10) auto;
  margin-top: calc(var(--rem-spacing) * 6);
}

.hero .title {
  font-size: calc(var(--rem-spacing) * 12);
  font-family: var(--font-brand);
  font-weight: 700;
  bottom: 0;
  line-height: 1em;
}

.teran {
  display: inline-block;
  width: var(--icon-width);
  height: var(--icon-height);
  mask-image: var(--icon);
  -webkit-mask-image: var(--icon);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--c-on-sur);
  image-rendering: pixelated;
  vertical-align: baseline;
}

.outlinks,
.social-links,
.page-links {
  gap: calc(var(--px-spacing) * 6);
  container: section / inline-size;
}

.outlinks {
  display: flex;
  flex-direction: column;
}

.social-links {
  display: flex;
}

.social-links.social-links-small {
  display: none;
}

.page-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Social link panels */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: padding 0.2s;
  flex: 1 1 100%;
}

.social-link.tiny {
  width: auto;
  flex-basis: content;
}

.social-container {
  border: var(--c-out) calc(var(--px-spacing) * 1) solid;
  width: 100%;
  height: 100%;
  background-color: var(--c-sur);
  color: var(--c-on-sur);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--px-spacing) * 6) calc(var(--px-spacing) * 12);
  position: relative;
  overflow: hidden;
  transition: color 0.2s var(--ease-smooth), transform 1s var(--ease-smooth);
}

.social-container .title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(var(--rem-spacing) * 5);
  line-height: 1em;
}

.social-container .cover {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-inv-sur);
  transition: top 0.5s var(--ease-smooth);
}

.social-container .text {
  position: relative;
}

.social-link:hover .cover {
  top: 0;
}

.social-link:hover .social-container {
  background-color: var(--c-sur);
  color: var(--c-on-inv-sur);
  transform: translateY(-4px);
  transition: color 0.2s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

/* Page link panels */
.page-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: padding 0.2s;
}

.page-container {
  border: var(--c-out) calc(var(--px-spacing) * 1) solid;
  width: 100%;
  height: 100%;
  background-color: var(--c-sur);
  color: var(--c-on-sur);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--px-spacing) * 8) calc(var(--px-spacing) * 14);
  position: relative;
  overflow: hidden;
}

.page-container .title,
.page-container .arrow {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(var(--rem-spacing) * 8);
  line-height: 1em;
}

.page-container .arrow {
  visibility: hidden;
  display: none;
}

@container section (width > 500px) {
  .page-link[href] .arrow {
    display: unset;
  }
}

.arrow-span {
  background-color: var(--c-inv-sur);
  color: var(--c-on-inv-sur);
  padding: 0 4px;
  white-space: pre;
}

.page-container .cover {
  position: absolute;
  top: 200%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-on-sur);
  transform: skewY(-5deg);
}

.page-link:hover .arrow {
  visibility: visible;
}

.page-link:hover .arrow-span {
  animation: appear 0s calc(var(--count) * 0.05s) 1;
  animation-fill-mode: backwards;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 920px) {
  .social-links.social-links-small {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .social-links.social-links-large {
    display: none;
  }

  .page-links {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 570px) {
  .social-links.social-links-small {
    display: flex;
    flex-direction: column;
    gap: calc(var(--px-spacing) * 4);
  }
}

@media (max-width: 560px) {
  :root {
    --layout-x-padding: calc(var(--px-spacing) * 8);
  }
}

@media (max-width: 550px) {
  .page-container {
    padding: calc(var(--px-spacing) * 4) calc(var(--px-spacing) * 4);
    border: none;
  }

  .page-container:hover {
    text-decoration: underline;
  }

  .page-container .title,
  .page-container .arrow {
    font-size: calc(var(--rem-spacing) * 6);
  }
}

@media (max-width: 400px) {
  :root {
    --rem-spacing: 0.225rem;
    --font-size-sm: calc(var(--rem-spacing) * 3.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-container .cover {
    top: 0;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .social-link:hover .cover {
    opacity: 1;
  }

  .social-link:hover .social-container {
    transform: none;
  }
}