/* sizing related settings and variables */

:root {
  /* breakpoints */
  --sm: 640px;
  --md: 1024px;
  --lg: 1200px;

  /* spacings */
  --breve: 64px;
  --semibreve: 32px;
  --minim-dotted: 24px;
  --minim: 16px;
  --crotchet: 8px;
  --quaver: 4px;
  --semiquaver: 2px;

  /* key sizes */
  --header-height: 48px;
  --text-maxwidth: 750px;
  --page-maxwidth: 1400px;
}

@media only screen and (width <= 640px) {
  html {
    --body-padding: var(--minim);
  }
}

@media only screen and (640px < width <= 1024px) {
  html {
    --body-padding: var(--semibreve);
  }
}

@media only screen and (1024px < width) {
  html {
    --body-padding: var(--breve);
  }
}