/* #region MARK: general */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-headings);
  color: var(--clr-heading);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 500;
}
a {
  text-decoration: none;
  /* font-weight: 500; */
  color: var(--clr-text);
}
a:hover {
  opacity: 0.7;
}

button {
  cursor: pointer;
  border: transparent;
}

h1,
.h1 {
  font-size: var(--fs-4xl);
}
h2,
.h2 {
  font-size: var(--fs-3xl);
}
h3,
.h3 {
  font-size: var(--fs-xl);
}
h4,
.h4 {
  font-size: var(--fs-xl);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  font-size: var(--fs-m);
  color: var(--clr-text);
  line-height: 1.8;
  accent-color: var(--clr-accent-400);
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; */
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}
footer {
  margin-block-start: auto;
}

.sr-only {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  block-size: 0.0625rem;
  inline-size: 0.0625rem;
  overflow: hidden;
  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible .0625rem box */
  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
  /* modern browsers, clip-path works inwards from each corner */
  clip-path: inset(50%);
  /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
  white-space: nowrap;
}

/* #region MARK: utilities */
.section-padding {
  padding-block: var(--section-padding);
}
.wrapper {
  inline-size: min(
    100% - var(--content-columns-gap, var(--content-columns-gap-fallback)),
    var(--content-max-inline-size, var(--content-max-inline-size-fallback))
  );
  margin: 0 auto;
  display: grid;
  align-items: start;
}
.content {
  display: grid;
  align-content: start;
  row-gap: var(--gap);
}
.smart-spacing * + :where(h1, h2, h3, h4, h5, h6) {
  padding-block-start: var(--space-alpha);
}
.smart-spacing * + :where(p, ul, ol, li) {
  padding-block-start: var(--space-bravo);
}
.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--columns-gap);
}
.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--columns-gap);
}
.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--columns-gap);
}
.grid-cols-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min-col, 17.5rem)), 1fr));
  gap: var(--columns-gap);
}
.center {
  text-align: center;
}

input,
select,
textarea {
  border-radius: var(--br-btns);
  padding: 0.4em 1em;
  inline-size: 100%;
  border: 0.0625rem solid var(--clr-900);
  background-color: transparent;
}
textarea {
  border-radius: 8px;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: 0.0625rem auto #0bf;
  outline-offset: 0.0625rem;
}
@media (width < 64rem) {
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
/* #endregion*/

/* #region MARK: Scroll-driven Animations */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    animation: fadeUp 1s linear forwards;
    animation-timeline: view();
    animation-range-start: 15.625rem;
    animation-range-end: 31.25rem;
    scale: 0.8;
  }
  @keyframes fadeUp {
    to {
      scale: 1;
    }
  }
  .fade-left {
    animation: fade-left 1s linear forwards;
    transform: translate(-100%);
    animation-timeline: view();
    animation-range-start: 3.125rem;
    animation-range-end: 25rem;
    scale: 0.8;
  }
  @keyframes fade-left {
    to {
      scale: 1;
      transform: translate(0);
    }
  }
  .fade-right {
    animation: fade-right 1s linear forwards;
    animation-timeline: view();
    animation-range-start: 3.125rem;
    animation-range-end: 25rem;
    scale: 0.8;
    transform: translate(100%);
  }
  @keyframes fade-right {
    to {
      scale: 1;
      transform: translate(0);
    }
  }
}
/* #endregion*/

/* #region MARK: project */

.top {
  position: fixed;
  inset-block-end: 30px;
  inset-inline-end: 30px;
  background-color: hsl(from var(--clr-900) h s l / 0.4);
  border: 0.0625rem solid var(--clr-100);
  inline-size: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--clr-text);
}

@media (prefers-reduced-motion: no-preference) {
  .top-start {
    scale: 0;
    animation: topUp 1s linear forwards;
    animation-timeline: view();
    animation-range-start: 53.125rem;
    animation-range-end: 66rem;
  }
  @keyframes topUp {
    to {
      scale: 1;
    }
  }
}

@media (width < 40rem) {
  .top {
    inset-block-end: 20px;
    inset-inline-end: 20px;
  }
}