/* flex main content with sidebar */
.main-with-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
  max-width: 1200px;
  margin-inline: auto;
}

.main-with-sidebar > :first-child {
  flex-basis: 500px;
  flex-grow: 9999;
}
.main-with-sidebar > :last-child {
  flex-basis: 300px;
  flex-grow: 1;
}

/* general style not specific to the layouts */

section {
  padding: 3rem;
}

section:nth-child(even) {
  background-color: hsl(0 0% 100% / 0.05);
}

.child {
  border: 3px solid hsl(230, 75%, 75%);
  padding: 0.5rem;
  background: hsl(230, 75%, 25%);
}

/* general styling */

:root {
  /* either --dark-mode or --no-dark-mode */
  --color-scheme: var(--dark-mode);

  --font-family: system-ui;

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --clr-primary-300: hsl(219, 76%, 55%);
  --clr-primary-400: hsl(219, 76%, 40%);
  --clr-primary-500: hsl(219, 76%, 25%);
  --clr-secondary-300: hsl(269, 75%, 55%);
  --clr-secondary-400: hsl(269, 75%, 40%);
  --clr-secondary-500: hsl(269, 75%, 25%);
  --clr-accent-300: hsl(358, 72%, 65%);
  --clr-accent-400: hsl(358, 72%, 50%);
  --clr-accent-500: hsl(358, 72%, 35%);

  /* settings */
  --no-dark-mode: light;
  --dark-mode: dark light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-400);
  line-height: 1.6;
}
h2 {
  display: inline;
}