@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap");

:root {
  color-scheme: light dark;
  /* font: [font-style] [font-variant] [font-weight] [font-stretch] <font-size> [/ <line-height>] <font-family>; */
  font: normal normal 100 1rem/1.5 Oxanium, sans-serif;

  scroll-behavior: smooth;

  /* https://html-css-tip-of-the-week.netlify.app/tip/interpolate-size/
  https://12daysofweb.dev/2024/calc-size-and-interpolate-size/ */
  interpolate-size: allow-keywords;

  --25: 25%;
  --55: 55%;
  --45: 45%;
  --75: 75%;
  --100: 100%;

  accent-color: light-dark(#005a9c, #66ccff);
}

/* MARK: TECH CORNERS
*/
section [role="button"] {
  display: grid;
  justify-self: start;
  border: solid 0.065rem color-mix(in srgb, currentColor var(--45), transparent);
  padding-inline: 1rem;
  padding-block: 0.5rem;
  margin: 1rem;
  color: inherit;
  background-color: transparent;
  text-transform: uppercase;
  mask: conic-gradient(currentColor 0 0) padding-box,
    conic-gradient(at 0.5rem 0.5rem, transparent 75%, currentcolor 0%) 0 0 /
      calc(100% - 0.5rem) calc(100% - 0.5rem) border-box;
}

[role="button"] {
  cursor: pointer;
  user-select: none;
}

/* MARK: SCROLLBARS
*/
section {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accent2)) #0000;

  &:not(:hover) {
    scrollbar-color: transparent #0000;
  }
}

/* https://css-tricks.com/come-to-the-light-dark-side/ */
/* MARK: FORMS
*/