.hero {
  height: 90svh;
}
.hero div {
  text-align: start;
  flex-direction: column;
  justify-content: end;
  align-items: start;
  display: flex;
}
.hero p {
  max-width: 48ch;
}
.hero-title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: .4em;
}
.hero-title .accent-font {
  font-size: clamp(1.25em, 3vmax, 1.5em);
  line-height: 1;
  font-weight: normal;
  font-style: italic;
  color: currentColor;
}
@media screen and (min-width: 768px) {
  .hero-title {
    font-size: 4rem;
  }
}
/**
 * uaplus.css version 0.0.1
 */

/**
 * Different box model
 * 
 * We use the traditional box model, where the padding and border 
 * of the element is drawn inside and not outside the specified 
 * width and height. That makes combining relative and absolute 
 * units in properties like <code>inline-size</code> and 
 * <code>block-size</code> easier.
 * 
 * See https://en.wikipedia.org/wiki/CSS_box_model
 */
 *,
 *::after,
 *::before {
   box-sizing: border-box;
 }
 
 /**
  * Improve focus styles
  *
  * Add spacing between content and its focus outline.
  */
 :focus-visible {
   outline-offset: 3px;
 }
 
 /**
  * Disable text size adjustment
  * 
  * To improve readability on non-mobile optimized websites, browsers
  * like mobile Safari increase the default font size when you switch
  * a website from portrait to landscape. We don't want that for our 
  * optimized sites.
  *
  * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
  */
 :where(html) {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
 
 /**
  * Increase line height
  *
  * Long paragraphs are easier to read if the line height is higher.
  */
 :where(html) {
   line-height: 1.5;
 }
 
 /**
  * Add scrollbar gutter
  *
  * Prevent the page from “jumping” when switching from a long to a short page.
  *
  */
 :where(html) {
   scrollbar-gutter: stable;
 }
 
 /**
  * Remove UA styles for h1s nested in sectioning content
  *
  * Nesting h1s in section, articles, etc., shouldn't influence the 
  * styling of the heading since nesting doesn't influence 
  * semantics either.
  * 
  * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
  * See https://github.com/whatwg/html/pull/11102
  * See https://html.spec.whatwg.org/#sections-and-headings
  */
 :where(h1) {
   font-size: 2em;
   margin-block: 0.67em;
 }
 
 /**
  * Improve abbreviations with titles
  * 
  * The abbr element with the title isn't helpful regarding 
  * accessibility because support is inconsistent, and it's only 
  * accessible to some users. Still, it's commonly used. 
  * This rule shows a dotted underline on abbreviations in all 
  * browsers (there's a bug in Safari) and changes the cursor.
  * 
  * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
 :where(abbr[title]) {
   cursor: help;
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
 
 /**
  * Optimize mark element in Forced Colors Mode
  *
  * The colors of the mark element don't change in Forced Colors Mode,
  * which can be problematic. Use system colors instead.
  * 
  * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
  */
 @media (forced-colors: active) {
   mark {
     color: HighlightText;
     background-color: Highlight;
   }
 }
 
 /**
  * Announce del, ins, and s to screen readers
  * 
  * With the exception of NVDA (2024.4.2), which announces "deletion",
  * none of the common screen readers announces the <s> element.
  * Voice Over on macOS and iOS and Narrator don't announce 
  * <ins> and <del>. Usually, screen readers not announcing text-level
  * semantics is something we just accept, but devs using elements 
  * like <s> without knowing that they may not convey semantics is a 
  * common issue. We announce the start and end of stricken, inserted,
  * and deleted content with pseudo-elements. For languages other 
  * than English, you should provide translations, e.g. :lang(de) 
  * :where(s::before) { content: "Durchgestrichener Text Beginn "; }
  * 
  * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
  */
  :where(del, ins, s)::before, 
  :where(del, ins, s)::after 
  {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    content: "test"
  }
  
  :where(s)::before {
    content: "stricken text start ";
  }
  
  :where(s)::after {
    content: " stricken text end";
  }
  
  :where(del)::before {
    content: "deletion start ";
  }
  
  :where(del)::after {
    content: " deletion end";
  }
  
  :where(ins)::before {
    content: "insertion start ";
   }
  
  :where(ins)::after {
    content: " insertion end";
  }
 
 /**
  * Avoid overflow caused by embedded content
  * 
  * Ensure that embedded content (audio, video, images, etc.) 
  * doesn't overflow its container.
  */
 :where(audio, iframe, img, svg, video) {
   max-block-size: 100%;
   max-inline-size: 100%;
 }
 
 /**
  * Prevent fieldsets from causing overflow
  *
  * Reset the default `min-inline-size: min-content` to prevent
  * children from stretching fieldsets
  *
  * See https://github.com/twbs/bootstrap/issues/12359
  * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  */
 :where(fieldset) {
   min-inline-size: 0;
 }
 
 /**
  * Turn labels into block elements
  * 
  * Labels for inputs, selects, and textarea should be block 
  * elements.
  */
 :where(label):has(+ :where(textarea, input, select)) {
   display: block;
 }
 
 /**
  * Increase the block-size of textareas
  *
  * The default height of textareas is small. We increase it a bit.
  */
 :where(textarea:not([rows])) {
   min-block-size: 6em;
 }
 
 /**
  * Inherit font styling in form elements
  * 
  * buttons, inputs, selects, and textarea should have the same font
  * family and size as the rest of the page.
  */
 :where(button, input, select, textarea) {
   font-family: inherit;
   font-size: inherit;
 }
 
 /**
  * Normalize search input styles
  *  
  * Remove the rounded corners of search inputs on macOS and IOS 
  * and normalize the background color
  */
 :where([type="search"]) {
   -webkit-appearance: textfield;
   appearance: textfield;
 }
 
 /* iOS only */
 @supports (-webkit-touch-callout: none) {
   :where([type="search"]) {
     border: 1px solid -apple-system-secondary-label;
     background-color: canvas;
   }
 }
 
 /**
  * Maintain direction in some input types
  * 
  * Some input types should remain left-aligned in right-to-left
  * languages,but only if the value isn't empty because the 
  * placeholder should be right-aligned.
  *
  * See https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
 :where([type="tel"], [type="url"], [type="email"], [type="number"]):not(
     :placeholder-shown
   ) {
   direction: ltr;
 }
 
 /**
  * Improve table styling
  *  
  * With the default styling, tables are hard to scan. These rules 
  * add padding and collapsed borders.
  */
 :where(table) {
   border-collapse: collapse;
   border: 1px solid;
 }
 
 :where(th, td) {
   border: 1px solid;
   padding: 0.25em 0.5em;
 }
 
 /**
  * Fading dialogs
  *  
  * Add fade in and fade out transitions for the dialog element
  * and backdrops
  */
 :where(dialog)::backdrop {
   background: oklch(0% 0 0 / 0.3);
 }
 
 :where(dialog),
 :where(dialog)::backdrop {
   opacity: 0;
   transition: opacity 300ms ease-out, display 300ms allow-discrete,
     overlay 300ms allow-discrete;
 }
 
 :where(dialog[open]),
 :where(dialog[open])::backdrop {
   opacity: 1;
 }
 
 @starting-style {
   :where(dialog[open]),
   :where(dialog[open])::backdrop {
     opacity: 0;
   }
 }
 
 /**
  * Increase specificity of [hidden]
  *  
  * Make it harder to accidentally unhide elements with the 
  * [hidden] attribute while still maintaining the until-found 
  * functionality.
  */
 [hidden]:not([hidden="until-found"]) {
   display: none !important;
 }
      :root {
	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;
	--color-gray-950: #0a0a0a;
	--color-asparagus-50: #f4f7ee;
	--color-asparagus-100: #e6eed9;
	--color-asparagus-200: #d0dfb7;
	--color-asparagus-300: #b1c98d;
	--color-asparagus-400: #95b368;
	--color-asparagus-500: #77984a;
	--color-asparagus-600: #5c7838;
	--color-asparagus-700: #485d2e;
	--color-asparagus-800: #3b4b29;
	--color-asparagus-900: #344126;
	--color-asparagus-950: #1a2211;
	--color-wedgewood-50: #f5f7fa;
	--color-wedgewood-100: #e9eff5;
	--color-wedgewood-200: #cedde9;
	--color-wedgewood-300: #a4bfd5;
	--color-wedgewood-400: #739ebd;
	--color-wedgewood-500: #4a7798;
	--color-wedgewood-600: #3e688b;
	--color-wedgewood-700: #335471;
	--color-wedgewood-800: #2d475f;
	--color-wedgewood-900: #2a3e50;
	--color-wedgewood-950: #1c2835;
	--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
	--font-size: 1.2rem;
	--gutter: clamp(1ch, 2.5vmax, 3ch);
	--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
	--line-length: 75ch;
	--line-length-small: 30ch;
	--line-length-large: 115ch;
	--border-width: 1px;
	--border-radius: 4px;
}
      :root {
  --color-neutral-50: var(--color-gray-50);
	--color-neutral-100: var(--color-gray-100);
	--color-neutral-200: var(--color-gray-200);
	--color-neutral-300: var(--color-gray-300);
	--color-neutral-400: var(--color-gray-400);
	--color-neutral-500: var(--color-gray-500);
	--color-neutral-600: var(--color-gray-600);
	--color-neutral-700: var(--color-gray-700);
	--color-neutral-800: var(--color-gray-800);
	--color-neutral-900: var(--color-gray-900);
	--color-neutral-950: var(--color-gray-950);

  --color-primary: var(--color-asparagus-500);
  --color-primary-50: var(--color-asparagus-50);
  --color-primary-100: var(--color-asparagus-100);
  --color-primary-200: var(--color-asparagus-200);
  --color-primary-300: var(--color-asparagus-300);
  --color-primary-400: var(--color-asparagus-400);
  --color-primary-500: var(--color-asparagus-500);
  --color-primary-600: var(--color-asparagus-600);
  --color-primary-700: var(--color-asparagus-700);
  --color-primary-800: var(--color-asparagus-800);
  --color-primary-900: var(--color-asparagus-900);
  --color-primary-950: var(--color-asparagus-950);

  --color-secondary: var(--color-wedgewood-500);
  --color-secondary-50: var(--color-wedgewood-50);
  --color-secondary-100: var(--color-wedgewood-100);
  --color-secondary-200: var(--color-wedgewood-200);
  --color-secondary-300: var(--color-wedgewood-300);
  --color-secondary-400: var(--color-wedgewood-400);
  --color-secondary-500: var(--color-wedgewood-500);
  --color-secondary-600: var(--color-wedgewood-600);
  --color-secondary-700: var(--color-wedgewood-700);
  --color-secondary-800: var(--color-wedgewood-800);
  --color-secondary-900: var(--color-wedgewood-900);
  --color-secondary-950: var(--color-wedgewood-950);

  --bg-gradient: linear-gradient(
    180deg,
    var(--color-secondary-400) 0%,
    var(--color-secondary-400) 5%,
    var(--color-secondary-300) 30%,
    color-mix(in srgb, var(--color-secondary-300) 70%, var(--color-primary-300) 30%) 50%,
    var(--color-primary-300) 65%,
    var(--color-primary-400) 98%,
    var(--color-primary-400) 100%
  );
  --background: var(--color-secondary-400);
  --text: var(--color-neutral-950);
  --text-2: color-mix(in srgb, var(--color-neutral-950) 80%, transparent);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
  --font-italic: "Georgia", serif;
  --font-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  --font-size: 1.2rem;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;
  --leading: 1.45;
  --gutter: clamp(1ch, 2.5vmax, 3ch);
  --stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
  --line-length-small: 30ch;
  --line-length: 75ch;
  --line-length-large: 115ch;
  --page-padding-inline: calc((100vw - min(var(--line-length), 80vw)) / 2);
  --border-width: 1px;
  --border-radius: 4px;
}
      .wrapper,
.wrapper-full {
  grid-template-columns: 1fr min(
      var(--wrapper-max-length, var(--line-length)),
      100% - var(--wrapper-gap, var(--gutter)) * 2
    ) 1fr;
  grid-column-gap: var(--wrapper-gap, var(--gutter));
  display: grid;
}
.wrapper > *,
.wrapper-full > * {
  grid-column: 2;
}
.wrapper-full {
  grid-template-columns: 1fr min(
      var(--wrapper-max-length, var(--line-length-large)),
      100% - var(--wrapper-gap, var(--gutter)) * 2
    ) 1fr;
}
.full-bleed {
  inline-size: 100%;
  padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
  background-color: var(--background-color, none);
  grid-column: 1/-1;
}
.flex {
  display: inline-flex;
}
.flex-col {
  flex-direction: column;
}
.justify-around {
  justify-content: space-around;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.sr-only {
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  block-size: 1px !important;
  inline-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
}
.invisible {
  visibility: hidden !important;
}
.list-inline {
  margin-left: calc(var(--item-gap, 1ch) * 3 * -1);
  clip-path: inset(0 0 0 calc(var(--item-gap, 1ch) * 3));
  color: var(--item-color, var(--text));
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.list-inline li {
  padding-left: var(--item-gap, 1ch);
}
.list-inline li:before {
  content: var(--item-separator, "•");
  margin-right: var(--item-gap, 1ch);
  width: var(--item-gap, 1ch);
  text-align: center;
  display: inline-block;
}
.list-inline a {
  color: var(--item-color, var(--text));
  text-decoration: none;
  transition: all 0.2s;
  outline-offset: -1px;
}
.list-inline a:hover {
  text-decoration: underline;
}

/* Focus */
* {
  outline-offset: 2px;
  outline-width: 2px;
  outline-color: #0a76f6;
}
:focus:focus-visible {
  outline-style: solid;
}
      :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
  font-stretch: var(--font-stretch, expanded);
}
:where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}
:where(html:focus-within) {
  scroll-behavior: smooth;
}

:where(svg.icon:not([fill])) {
  fill: currentColor;
}

/* Other */
:root {
  /* 
    Modern Font Stacks
    Source: https://modernfontstacks.com/
  */
  --accent-font-1: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --accent-font-2: 'Nimbus Mono PS', 'Courier New', monospace;
  --accent-font-3: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  
}
.accent-font {
  font-family: var(--accent-font, var(--accent-font-1));
}

*,
:before,
:after {
  font-feature-settings: "kern";
  font-kerning: normal;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
}
html {
  color: var(--text);
  background-color: var(--background);
  accent-color: var(--text);
  font-size: clamp(
    var(--font-size),
    var(--font-size) * 0.9 + 0.25vw,
    var(--font-size) * 2
  );
  font-family: var(--font);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  scroll-padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 8rem;
  }
}
body {
  background: var(--color-secondary-400);
  background: var(--bg-gradient);
  margin: 0;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}
body header,
body footer {
  padding: 0.5rem clamp(0.2rem, 3vw, 2rem);
}
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: calc(var(--border-width) * 2);
}
a:hover {
  text-decoration-thickness: calc(var(--border-width) * 2);
}
strong {
  font-weight: var(--font-weight-semibold);
}
main {
  margin: 0;
  padding: 0;
}
main h2 {
  font-size: calc(var(--font-size) * 1.6);
  margin-block: 1.5em 1em;
}
main .list-inline {
  --item-gap: 0;
}
main ul:not(.list-inline) {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
main li {
  --item-separator: none;
  margin: 0;
  padding: 0;
}
section {
  margin-block: 3.5rem;
  padding-block: 2rem;
}

.badge {
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  padding: .2em .3em;
  font-size: .75em;
  border-radius: .4em;
  color: var(--badge-color, var(--color-secondary-600));
  background: color-mix(in srgb, var(--badge-color, var(--color-secondary-600)) 40%, white 100%);
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--color-secondary-600)) 90%, white 100%);
}


.underline {
  position: relative;
}
.underline::after {
  content: "";
  background: no-repeat url("/line.svg");
  position: absolute;
  height: 10px;
  width: 100%;
  bottom: 0;
  left: 0;
}

      .button {
  --button-bg: #342a21;
  --button-color: #ffffff;
  --button-hover-bg: #4b4b4a;
  --button-hover-color: #ffffff;
  --button-border-width: 3px;
  --button-border-style: solid;
  --button-border-color: var(--button-bg);
  --button-radius: 0.5em;

  --button-outline-color: #0a76f6;
  --button-outline-offset: -3px;

  display: inline-flex;
  align-items: center;
  gap: var(--button-gap, 0.5em);
  padding: var(--button-padding, 0.7em 1.2em);

  background: var(--button-bg);
  color: var(--button-color);

  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);

  text-decoration: none;
  font-weight: var(--button-font-weight, 700);
  font-size: var(--button-font-size, 1em);
  letter-spacing: 0.05ch;
  font-family: sans-serif;
  line-height: 1.1; /* Set or buttons will be different sizes (<a>/<button>) */

  cursor: pointer;
}

.button svg {
  height: var(--button-icon-size, 1.2cap);
  width: auto;
  flex: none;
}

/* Hover/focus/active */
.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

.button:focus:focus-visible {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(
    --button-outline-offset,
    calc(var(--button-border-width) * 2)
  );
}

.button:active {
  transform: scale(99%);
}

/* Variants */
.button[data-button-variant="negative"] {
  --button-bg: #b33c48;
  --button-border-color: #a62f3d;
  --button-hover-bg: #c24a56;
}

/* Outline buttons */
.button[data-outline-button] {
  --button-bg: transparent;
  --button-border-color: currentColor;
  --button-color: currentColor;
}

/* Ghost buttons */
.button[data-ghost-button] {
  --button-bg: transparent;
  --button-border-color: transparent;
  --button-color: currentColor;
  --button-hover-bg: transparent;
  --button-hover-bg: color-mix(in srgb, var(--color-neutral-500) 35%, transparent 65%);
  --button-hover-color: currentColor;
  --button-padding: .2em .4em;
}

      body > a {
  z-index: 99999;
  padding: 0.4rem 1rem;
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline-start: 0.3rem;
}
body > a:not(:focus) {
  size: 1px;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
}
      .socials-list {
  gap: 0.2rem;
  margin-block-start: 1rem;
  --button-icon-size: 1.2em;
}
.socials-list--label {
  gap: .6rem;
}
.socials-list--label a {
  --button-font-weight: 600;
}
      .project-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 1rem;
  display: grid;
}
.project-grid > li {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.project-grid .button {
  --button-padding: .2em;
}
.card {
  --background: linear-gradient(45deg, var(--color-neutral-100) 30%, var(--color-neutral-300) 100%);
  z-index: 1;
  background: var(--background);
  background-repeat: no-repeat;
  background-size: cover;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
  height: 100%;
  padding: 0.4rem;
  display: flex;
  position: relative;
}
.card a:hover {
  color: #3a3a3a;
  transition: color 0.2s ease-in-out;
}
.card a:before,
.card a:after {
  --icon-size: 1.2rem;
}
.card .top {
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.card .links {
  align-self: flex-end;
  gap: 0.35rem;
  display: flex;
}
.card .links svg {
  height: var(--card-icon-size, 1.2cap);
  width: auto;
}
.card .content {
  padding-inline: .4rem;
}
.card .list-inline {
  gap: 0.5ch;
}
      .timeline {
  flex-direction: column;
  margin-top: 1.4rem;
  padding: 0;
  display: flex;
  position: relative;
}
.timeline:before {
  content: "";
  background-color: var(--color-neutral-200);
  background: linear-gradient(180deg, var(--color-neutral-200) 0%, var(--color-neutral-200) 85%, transparent 100%);
  inline-size: 6px;
  margin-inline-start: -3px;
  position: absolute;
  inset: 1.5rem 0 0 1.5rem;
}
.timeline > li {
  --size: 3rem;
  padding: 0 0 0 calc(var(--size) + 0.8rem);
  margin: 1.4rem 0;
  position: relative;
  list-style: none;
}
.timeline > li:last-child {
  margin-bottom: 3rem;
}
.timeline > li:first-child {
  margin-top: -20px;
}
.timeline > li:before {
  content: "";
  aspect-ratio: 1;
  inline-size: var(--size);
  background-color: var(--color-neutral-200);
  border: 6px solid var(--color-primary-600);
  z-index: 1;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  position: absolute;
  inset-block-end: 50%;
  inset-inline-start: 0;
  transform: translateY(50%);
}
.timeline > li:hover:before {
  border-color: var(--color-secondary-600);
}
      .skills-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.skill {
  font-size: 2rem;
  font-size: clamp(2rem, 1.2967rem + 2.1978vw, 3rem);
  font-weight: 600;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .skill {
    text-align: left;
  }
}

@media screen and (min-width: 991px) {
  .skills-gallery {
    row-gap: 3.5rem;
  }
}
      .download {
  gap: 0.8rem;
}
.download p {
  font-size: 1.4rem;
}
.download .button {
  --button-icon-size: 1.2em;
}
      
      .clouds-zone {
	overflow-x: hidden;
	top: 0;
  padding-top: 70px;
	inset-inline: 0;
	position: absolute;
	z-index: -1;
}

@keyframes animateCloud {
    0% { margin-left: -1000px; }
    100% { margin-left: 100%; }
}

.cloud--item {
  animation: animateCloud var(--delay, 35s) linear infinite;
  transform: scale(var(--scale, .5));
}

.cloud {
	position: relative;

	background: var(--cloud-color-primary, var(--color-neutral-50));
	
  border-radius: 100px;
	
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

	height: 120px;
	width: 350px;
}

.cloud:after, .cloud:before {
  background: var(--cloud-color-primary, var(--color-neutral-50));
	content: '';
	position: absolute;
	z-indeX: -1;
}

.cloud:after {
	border-radius: 100px;

	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.cloud:before {
	border-radius: 200px;

	height: 180px;
	right: 50px;
	top: -90px;
	width: 180px;
}

@media (prefers-reduced-motion: reduce) {
  .clouds-zone {
    display: none;
  }
}
header {
  background-color: var(--color-secondary-400);
  z-index: 10;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
}
header.scroll {
  box-shadow: hsla(0 0% 0% / 0.1) 0 0.5rem 1rem;
  transition-duration: 400ms;
}
header nav ul {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
header nav li {
  text-align: end;
  margin: 0;
  padding: 6px clamp(10px, 3vw, 20px);
}
header nav a {
  text-underline-offset: 0.4rem;
  text-decoration: none;
  position: relative;
}
header nav a:hover,
header nav a[aria-current="page"] {
  color: var(--color-secondary-950);
  text-shadow: 1px 0 0 currentColor;
}
header nav a:hover::after,
header nav a[aria-current="page"]:after {
  content: "";
  background: no-repeat url("/line.svg");
  position: absolute;
  height: 7px;
  width: 100%;
  bottom: -6px;
  left: 0;
}
footer {
  justify-items: center;
  margin-block-start: 1.5rem;
}
footer > div {
  place-content: center space-between;
  align-items: start;
  width: 100%;
  display: flex;
  flex-direction: column;
}
footer .list-inline a {
  --item-color: var(--text-2);
  text-decoration: underline;
}
footer .list-inline a:hover {
  --item-color: var(--text);
}
footer .socials-list {
  --item-gap: 0.2ch;
  --item-separator: "";
  margin: 0;
}
footer .button.button {
  --button-padding: .2em;
}
@media (min-width: 768px) {
  footer > div {
    align-items: center;
    flex-direction: row-reverse;
  }
}