@font-face {
  font-family: "Circular Std";
  src: url("../assets/circular-std-medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url(../assets/Inter.ttf) format("truetype");
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --page-margin: 8px;

  --header-height: 10vh;
  --page-max-width: 500px;
  --manual-page-margin: calc(
    var(--page-margin) + (max(0px, (100% - var(--page-max-width)) / 2))
  );

  --primary: #8fc73e;
  --secondary: #6f8e46;
  --ternary: #2d5c62;
  --quaternary: #011c39;
  --quinary: #1c1c1c;
  --senary: #ffffff;
  --septenary: #545454;
  --octonary: #c7d0de;
  --Nonary: #ddd;
  --denary: #ddd;

  --default: #19182580;
  --default-2: #1918251f;

  --font-size-xs: 0.85rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.9rem;
  --font-size-xl: 2.4rem;

  --font-family-title: "Circular Std", "Inter", "system-ui", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-text: "Inter", "system-ui", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  --size-xs: 0.5rem;
  --size-sm: 1.5rem;
  --size-md: 2.5rem;
  --size-lg: 5rem;

  --padding-xs: 0.5rem;
  --padding-sm: 0.75rem;
  --padding-md: 1rem;
  --padding-lg: 2rem;

  --max-width-item: 100%;

  color: var(--default);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;

  font-size: calc(17px + (20 - 17) * ((100vw - 400px) / (1200 - 400)));

  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  padding-top: var(--header-height);
  min-height: 100vh;
  overflow-x: hidden;

  --w-mobile: 200px;
  --w-desktop: 40vw;
  --w: max(var(--w-mobile), var(--w-desktop));

  --c-mobile: calc(var(--w-mobile) * 0.7);
  --c-desktop: calc(var(--w-desktop) * 0.5);
  --c: max(var(--c-mobile), var(--c-desktop));

  --left: calc(var(--c) * -1);
  --right: calc(100vw - var(--c));

  background-image: url(../assets/waves.svg), url(../assets/waves.svg),
    url(../assets/waves.svg);
  background-repeat: no-repeat;
  background-size: var(--w);
  background-position: calc(var(--left) - 2vw) 190vh, var(--left) 550vh,
    var(--right) 340vh;
}

li {
  list-style: none;
}

a {
  color: inherit;
}
button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}

textarea {
  resize: none;
}

@media (min-width: 350px) {
  :root {
    --page-margin: 1rem;
  }
}

@media (min-width: 760px) {
  :root {
    --page-margin: 3rem;
    --page-max-width: 1200px;
    --manual-page-margin: calc(
      var(--page-margin) + max(0px, (100vw - var(--page-max-width)) / 2)
    );

    --max-width-item: 15rem;
  }
}