/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Tokens */
:root {
  --navbar-height: 56px;
  --section-gap: 16px;
  --divider-subtle: rgba(0, 0, 0, 0.1);

  --font-base: "Inter", system-ui, sans-serif;
  --font-brand: "Baloo 2", cursive;

  --black: #000;
  --white: #fff;

  --neutral-900: #0e1b2a;

  --yellow-100: #fff600;
  --yellow-500: #ffd000;
  --yellow-550: #ffd700;
  --yellow-600: #ffcc00;
  --yellow-700: #ffc107;

  --teal-400: #00ffc3;
  --rosa-500: #e91e63;

  --gray-50: #f2f2f2;
  --gray-100: #eee;
  --gray-900: #333;

  --orange-500: #ff5722;

}

html {
  font-family: var(--font-base);
  font-size: clamp(15px, 1.2vw, 16px);
}

body {
  line-height: 1.5;
  color: var(--neutral-900);
  background-color: var(--rosa-500);
  background-image:
    linear-gradient(to bottom, rgba(233, 30, 99, 0.8), rgba(233, 30, 99, 0.8)),
    url(/public/assets/images/optimized/background.png);
  background-repeat: repeat;
  background-blend-mode: overlay;
}

/* Layout */
main {
  padding-top: calc(var(--navbar-height) + var(--section-gap));
  padding-left: clamp(10px, 4vw, 32px);
  padding-right: clamp(10px, 4vw, 32px);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

p {
  font-size: 1rem;
}

small {
  font-size: 0.875rem;
}