@layer base, component, section, page

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

  :root {
    --green: #047b40;
    --yellow: #f0ad4e;
    --red: #cf2e2e;
  }

  html {
    font-size: 62.5%;
  }

  body {
    font-size: 1.6rem;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
  }
}

@layer component {
  .container {
    --container-width: 1440rem;
    --container-padding: 4rem;
    width: min(var(--container-width) + var(--container-padding) * 2, 100%);
    padding-inline: var(--container-padding);
  }
}

/* Topbar */

@layer component {
  .topbar {
    background: #f4f4f4;
  }
}