/**
 * @file
 * Main css file.
 */

/* Tokens. */

/**
 * @file
 * Base tokens.
 *
 * @package Tokens.
 */

:root {
  /* Border radius. */
  --border-radius: 0.25rem;

  /* Outline. */
  --outline-color: var(--color-action);
  --outline-offset: 0.1em;
  --outline-style: solid;
  --outline-width: 2px;
  --outline: var(--outline-width) var(--outline-style) var(--outline-color);
}

/**
 * @file
 * Color tokens.
 *
 * @package Tokens.
 */

:root {
  /* Core. */
  --color-brand-primary: #75a0f4;
  --color-brand-secondary: #2fdce7;
  --color-shade-base: #1c2029;
  --color-shade-dark: #2b303d;
  --color-shade-glare: #869BC2;
  --color-shade-light: #eef0f5;
  --color-action: var(--color-brand-primary);
  --color-action-hover: var(--color-brand-secondary);

  /* Light theme. */
}

[data-theme="light"]:root {
    --color-background: white;
    --color-text: var(--color-shade-base);

    color-scheme: light;
  }

/* Dark theme. */

[data-theme="dark"]:root {
    --color-background: var(--color-shade-base);
    --color-text: var(--color-shade-light);

    color-scheme: dark;
  }

/**
 * @file
 * Easing settings.
 *
 * @package Settings.
 */

:root {
  /* Ease in-out. */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-in-out-base: var(--ease-in-out-cubic);
}

/**
 * @file
 * Font tokens.
 *
 * @package Tokens.
 */

:root {
  /* Font family. */
  --font-family-default: 'Inter', sans-serif;

  /* Font size. */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;
  --font-size-fluid-base: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  --font-size-h1: clamp(4rem, -2rem + 12vw, 10rem); /* Between 800 - 1200 */
  --font-size-h2: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --font-size-h3: 1.25rem;

  /* Font weight. */
  --font-weight-base: 400;

  /* Line height. */
  --font-line-height-base: 1.5;
  --font-line-height-tiny: 1;
  --font-line-height-small: 1.25;
}

/**
 * @file
 * Size tokens.
 *
 * @package Tokens.
 */

:root {
  /* Base. */
  --size-base: 1rem;
  --size-nano: 0.25rem;
  --size-tiny: 0.5rem;
  --size-small: 0.75rem;
  --size-medium: 1rem;
  --size-large: 1.5rem;
  --size-huge: 2rem;

  /* Fluid. */
  --size-fluid-base: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  --size-fluid-small: calc(var(--size-fluid-base) * 0.5);
  --size-fluid-large: calc(var(--size-fluid-base) * 2);

  /* Container. */
  --size-container-base: 100rem;

  /* Content. */
  --size-content-tiny: 20ch;
  --size-content-small: 30ch;
  --size-content-medium: 40ch;
  --size-content-large: 60ch;
}

/* Atoms. */

/**
 * @file
 * Base styles.
 *
 * @package Atoms.
 */

/* Box sizing. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin. */

:where(:not(dialog)) {
  margin: 0;
}

/* Scroll offset for anchors. */

:target {
  scroll-margin-block: 5ex;
}

/* Focus. */

:focus-visible {
  outline: var(--outline);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: no-preference) {

:focus-visible {
    transition: outline-offset 0.3s ease;
}
  }

/* HTML. */

:where(html) {
  background-color: var(--color-background);
  block-size: 100%;

  -webkit-text-size-adjust: none;
}

@media (prefers-reduced-motion: no-preference) {

:where(html) {
    scroll-behavior: smooth;
    transition: background-color 0.3s ease;
}
  }

/* Body. */

:where(body) {
  color: var(--color-text);
  font-family: var(--font-family-default);
  font-size: var(--font-size-fluid-base);
  font-weight: var(--font-weight-base);
  line-height: var(--font-line-height-base);
  min-block-size: 100%;
}

/* Set default display. */

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

/**
 * @file
 * Form styles.
 *
 * @package Atoms.
 */

/* Button. */

:where(button) {
  border-radius: var(--border-radius);
  border-width: 1px;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-family-default);
  font-size: var(--font-size-fluid-base);
  line-height: var(--font-line-height-base);
  padding-block: var(--size-tiny);
  padding-inline: var(--size-base);
}

:where(button):focus-visible {
    outline: var(--outline);
    outline-offset: 2px;
  }

/**
 * @file
 * Heading styles.
 *
 * @package Atoms.
 */

/* Headings. */

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text);
  font-family: var(--font-family-default);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--font-line-height-small);
  margin: 0;
  margin-block-start: var(--size-fluid-base);
}

:where(h1) {
  --h1-text-gradient: linear-gradient(
    to bottom right,
    var(--color-brand-primary) 20%,
    var(--color-brand-secondary) 60%
  );

  background: var(--h1-text-gradient) fixed;
  -webkit-background-clip: text;
          background-clip: text;
  font-size: var(--font-size-h1);
  letter-spacing: -0.01em;
  line-height: var(--font-line-height-tiny);
  margin: 0;

  -webkit-text-fill-color: transparent;
}

:where(h2) {
  font-size: var(--font-size-h2);
}

:where(h3) {
  font-size: var(--font-size-h3);
}

/**
 * @file
 * Link styles.
 *
 * @package Atoms.
 */

/* Hyperlink. */

:where(a) {
  background: linear-gradient(
    transparent calc(100% - 1px),
    color-mix(in srgb, var(--color-shade-glare), transparent 50%) calc(100% - 1px)
  );
  border-radius: 1px;
  color: var(--color-action);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color 0.15s var(--ease-in-out-quad);
}

:where(a)::after {
    background-color: color-mix(in srgb, var(--color-shade-glare), black 20%);
    block-size: 1px;
    content: '';
    display: block;
    inset-block-end: 0;
    inline-size: 100%;
    inset-inline-start: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right 50%;
    transition: transform .3s var(--ease-in-out-quad);
  }

[data-theme="dark"] :where(a)::after {
      background-color: color-mix(in srgb, var(--color-shade-glare), white 20%);
    }

:where(a):hover {
    color: var(--color-action-hover);
  }

:where(a):hover::after {
      transform: scaleX(1);
      transform-origin: 0 50%;
    }

/**
 * @file
 * Image, figure and video styles.
 *
 * @package Atoms.
 */

/* Image. */

:where(img) {
  margin-block-start: var(--size-fluid-base);
  max-inline-size: 100%;
  block-size: auto;
}

/**
 * @file
 * Type styles.
 *
 * @package Atoms.
 */

/* Paragraph. */

:where(p) {
  margin-block-start: var(--size-fluid-base);
}

/* Layouts. */

/**
 * @file
 * Layout container.
 *
 * @package Layouts.
 */

/* Container. */

.container {
  --container-size: var(--size-container-base);

  block-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-size);
  padding-inline: var(--size-fluid-base);
}

.container--is-fluid {
  --container-size: 100%;
}

/**
 * @file
 * Layout layout.
 *
 * @package Layouts.
 */

/* Layout. */

.layout {
  --layout-inset: var(--size-fluid-large);

  padding-block: var(--layout-inset);
}

.layout--inset-small {
  --layout-inset: var(--size-fluid-base);
}

/* Components. */

/**
 * @file
 * Component info.
 *
 * @package Components.
 */

/* Info. */

.info h1 {
    display: inline;
  }

.info p {
    color: var(--color-shade-glare);
    display: inline;
    font-family: var(--font-family-default);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-base);
    letter-spacing: -0.01em;
    line-height: var(--font-line-height-tiny);
    margin: 0;
    opacity: 0.75;
  }

/**
 * @file
 * Component me.
 *
 * @package Components.
 */

/* Me. */

.me {
  --me-outline-color: var(--color-shade-light);
  --me-outline-max-size: calc(var(--size-container-base) / 2);

  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-flex;
  inline-size: 1em;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  outline: min(50vw, var(--me-outline-max-size)) solid color-mix(in srgb, var(--me-outline-color), transparent 40%);
  position: relative;
  vertical-align: -0.1em;
  z-index: -1;
}

[data-theme="dark"] .me {
    --me-outline-color: var(--color-shade-dark);
  }

@media (prefers-reduced-motion: no-preference) {

.me {
    animation: me-background 20s var(--ease-in-out-quad) infinite;
    transition: outline-color 0.3s ease;
}
  }

@keyframes me-background {
  50% {
    outline-width: min(30vw, var(--me-outline-max-size));
  }
}

/**
 * @file
 * Component theme switcher.
 *
 * @package Components.
 */

/* Theme switcher. */

.theme-switcher {
  --theme-switcher-ease: var(--ease-in-out-quad);
  --theme-switcher-duration: 0.4s;

  background: none;
  border: none;
  border-radius: 50%;
  color: var(--color-shade-glare);
  padding: var(--size-tiny);
  transition: color 0.2s ease;
}

.theme-switcher:hover {
    color: var(--color-text);
  }

.theme-switcher svg {
    fill: currentcolor;
  }

.theme-switcher .theme-switcher__moon {
    transition: translate var(--theme-switcher-duration) var(--theme-switcher-ease);
  }

[data-theme="dark"] :is(.theme-switcher .theme-switcher__moon) {
      translate: -75% 0;
    }

.theme-switcher .theme-switcher__sun {
    transition: scale var(--theme-switcher-duration) var(--theme-switcher-ease);
    transform-origin: center;
  }

[data-theme="light"] :is(.theme-switcher .theme-switcher__sun) {
      scale: 0.5;
    }

.theme-switcher .theme-switcher__shining {
    transform-origin: center;
    transition: opacity var(--theme-switcher-duration)
        var(--theme-switcher-ease), scale var(--theme-switcher-duration)
          var(--theme-switcher-ease),
      rotate var(--theme-switcher-duration) var(--theme-switcher-ease);
  }

[data-theme="dark"] :is(.theme-switcher .theme-switcher__shining) {
      opacity: 0;
      rotate: -35deg;
      scale: 0.75;
    }

/* Helpers. */

/**
 * @file
 * Helper for word-break.
 *
 * @package Helpers.
 */

/* Word break. */

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

.word-break {
    -webkit-hyphens: auto;
            hyphens: auto;
    text-wrap: balance;
    word-wrap: break-word;
}
  }

/* Utilities. */

/**
 * @file
 * Utility for text elements.
 *
 * @package Utilities.
 */

/* Text align. */

.text-align--right {
  text-align: right;
}

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