* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Add styles here! */

/************ RESET ************/

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/************ DEBUG ************/
/*
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
*/

/************ FOUNDATION ************/

:root {
  /* Design tokens */

  /* Spacing
This app uses an 8px unit. All spaces are a multiple of 8px
When it comes to max widths (e.g. the maximum width of the card), arbitrary values can be used.
  */
  --o⋄space⁚unit: 8px;

/* Font
1 font is used in this project: Lato. It is already included in the stylesheet.
For font sizes, the rem unit should be used.
The scale is:
1rem
1.25rem
1.5rem
2rem
By default, 1rem is equivalent to 16px.
*/

  /* Color palette
   */
  --o⋄color⁚green: hsl(160deg, 100%, 30%);

  --o⋄color⁚gold--lighter: hsl(45deg, 100%, 50%);
  --o⋄color⁚gold--darker:  hsl(45deg, 100%, 40%);

  --o⋄color⁚dark--l00:   hsl(0deg, 0%,   0%);
  --o⋄color⁚dark--l10:   hsl(0deg, 0%,  10%);
  --o⋄color⁚dark--l30:   hsl(0deg, 0%,  30%);
  --o⋄color⁚dark--l40:   hsl(0deg, 0%,  40%);
  --o⋄color⁚light--l60:  hsl(0deg, 0%,  60%);
  --o⋄color⁚light--l100: hsl(0deg, 0%, 100%);
}


.max-width-wrapper {
  max-width: var(--max-width-wrapperⳇwidth);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--max-width-wrapperⳇhpad, 16px);
  padding-right: var(--max-width-wrapperⳇhpad, 16px);
}


html, body {
  height: 100%;
}

:root {
  font-size: 1.25rem;
}

p {
  margin-top: calc(2 * var(--o⋄space⁚unit));
  margin-bottom: calc(2 * var(--o⋄space⁚unit));
}

header {
  --max-width-wrapperⳇwidth: calc(101 * var(--o⋄space⁚unit));
  --max-width-wrapperⳇhpad: calc(3 * var(--o⋄space⁚unit));
}
.intro-chunk {
  max-width: calc(50 * var(--o⋄space⁚unit));
  margin-top: calc(8 * var(--o⋄space⁚unit));
  margin-bottom: calc(8 * var(--o⋄space⁚unit));
}
header h1 {
  margin-top: calc(12 * var(--o⋄space⁚unit));
  margin-bottom: calc(6 * var(--o⋄space⁚unit));
}

main {
  background-color: var(--o⋄color⁚dark--l40);
  border-top: solid var(--o⋄space⁚unit) var(--o⋄color⁚light--l60);
  padding: calc(8 * var(--o⋄space⁚unit)) 0;
}
main > section {
  --max-width-wrapperⳇwidth: calc(101 * var(--o⋄space⁚unit));
  --max-width-wrapperⳇhpad: 0;
}

strong {
  color: var(--o⋄color⁚green);
}

.card {
  background-color: var(--o⋄color⁚light--l100);
  padding: calc(1 * var(--o⋄space⁚unit)) calc(3 * var(--o⋄space⁚unit));
  border-bottom: solid var(--o⋄space⁚unit) var(--o⋄color⁚light--l60);
}

.card h2 {
  margin: 0;
  width: fit-content;
  background-color: var(--o⋄color⁚gold--lighter);
  border-bottom: solid var(--o⋄space⁚unit) var(--o⋄color⁚gold--darker);
  padding: calc(2 * var(--o⋄space⁚unit)) calc(4 * var(--o⋄space⁚unit));
  margin-left: calc(-4 * var(--o⋄space⁚unit));
}