/*
The below theme is based on the default GitHub Pages Primer Jekyll theme here:
https://github.com/pages-themes/primer and takes further influence from the
full GitHub Primer design system here: https://github.com/primer/design.

* Only the necessary elements from the two above systems are included in this *
* file to keep file size to a minimum. If something is not working like you   *
* intend, this may be the cause!                                              *

For easy reference the base GitHub Pages Primer Jekyll theme can be found in 
the primer-jekyll.css file in this same directory. That file should never be 
served publicly.

Customizations and the motivations behind them should be added as comments
when necessary. 
*/

/* Barlow */
@font-face {
  font-family: "Barlow Condensed Bold";
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/barlow-condensed-bold.woff2")format("woff2");
  font-display: swap;
}

/* Barlow Semi Condensed */
@font-face {
  font-family: "Barlow Semi Condensed SemiBold";
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/barlow-semi-condensed-semibold.woff2") format("woff2");
  font-display: swap;
}

/* Nunito Sans */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 400;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-italic.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-700.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 700;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-700italic.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 800;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-800.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 800;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/nunito-sans-v15-latin-800italic.woff2") format("woff2");
  font-display: swap;
}

/* Cascadia Mono */
@font-face {
  font-display: swap;
  font-family: "Cascadia Mono";
  font-style: normal;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/cascadia-mono.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Cascadia Mono";
  font-style: italic;
  src: url("https://pages.git.generalassemb.ly/modular-curriculum-all-courses/universal-resources-internal/static/v2/fonts/cascadia-mono-italic.woff2") format("woff2");
}

/*
  Read this before working with the `-x-highlight-color` properties below!

  Changing the below highlight color values will change most of the colors 
  used in activity banners, but not all. When changing any of these values 
  you will also need to adjust the `fill` attribute in the `path` element
  that is used as a background for that banner.

  You can find these values you will need to change in the 
  `.activity.<activity-name> > .container` rules in this document - replacing 
  `<activity-name>` with the name of the activity (for example: 
  `.activity.solo-exercise > .container`. 
  
  This is necessary because the background svgs for banners are added as urls 
  with their own separate context from this document so they don't have 
  access to our css variables (and beyond that fill is an attribute on the 
  path HTML element - not CSS)
*/

html {
  /* Backgrounds */
  --body-background-color: #fff;
  --background-color-subtle: #f6f8fa;
  --background-color-subtle-hover: #eff2f5;
  --background-color-callout: #eff2f5;
  --background-color-code-block: #010409;
  --background-color-inline-code: #1b1f230d;
  --background-color-emphasis: #24292f;
  --background-color-nav: #24292f;
  --background-color-accent: #0969da;
  --background-color-attention: #9a6700;
  --background-color-warning: #cf222e;
  --background-color-slide-nav: #b7bdc8;

  /* Text */
  --text-color-default: #1f2328;
  --text-color-muted: #636c76;
  --text-color-on-bold-bg: #f3ede6;
  --text-color-on-emphasis: #f3ede6;
  --text-color-on-emphasis-muted: #a19fa8;
  --text-color-inline-code: #116329;
  --text-color-accent: #e41f26; /* GA Red */
  --text-color-attention: #9a6700;
  --text-color-warning: #d1242f;
  --text-color-file: #bc4c00;
  --text-color-keys: #8250df;
  --link-color-default: #0969da;
  --link-color-hover: #0056a6;

  /* Borders */
  --border-color-default: #d0d7de;
  --border-color-muted: #d0d7deb3;
  --border-color-emphasis: #6e7781;
  --border-color-accent: #0969da;
  --border-color-attention: #bf8700;
  --border-color-warning: #cf222e;

  /* Fonts */
  --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
    sans-serif;
  --barlow-condensed-bold: "Barlow Condensed Bold";
  --barlow-semi-condensed-semibold: "Barlow Semi Condensed SemiBold";
  --nunito-sans: "Nunito Sans";
  --cascadia-mono: "Cascadia Mono";
  --system-mono-fonts: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
  "Liberation Mono", monospace;

  /* Misc */
  --highlighter-yellow: #ccff15;
  --white: #ffffff;
  --black: #000000;

  /* Activity Banner highlight colors (see note above before changing these */
  --exercise-highlight-color: #fb8f44;
  --discussion-highlight-color: #0550ae;
  --guided-walkthrough-highlight-color: #eac54f;
  --knowledge-check-highlight-color: #6639ba;
  --programming-highlight-color: #2da44e;
  /* 
    If the value of the background color changes, you may want to update this.
    Do not use rgb() here - only the color values should be used here so that 
    this property can be used in both rgb() and rgba().
  */
  --activity-banner-background-color-rgb: 255, 255, 255;
  --activity-banner-background-gradient: linear-gradient(to right, rgba(var(--activity-banner-background-color-rgb), 1) 0%, rgba(var(--activity-banner-background-color-rgb), 0.95) 60%, rgba(var(--activity-banner-background-color-rgb), 0.8) 100%);
}

html.dark {
  /* Backgrounds */
  --body-background-color: #0d1117;
  --background-color-subtle: #151b23;
  --background-color-subtle-hover: #21262d;
  --background-color-callout: #151b23;
  --background-color-code-block: #010409;
  --background-color-inline-code: #151b23;
  --background-color-nav: #24292f;
  --background-color-emphasis: #6e7681;
  --background-color-accent: #1f6feb;
  --background-color-attention: #9e6a03;
  --background-color-warning: #da3633;
  --background-color-slide-nav: #2a313c;

  /* Text */
  --text-color-default: #f3ede6;
  --text-color-muted: #8d96a0;
  --text-color-on-bold-bg: #f3ede6;
  --text-color-on-emphasis: #f3ede6;
  --text-color-on-emphasis-muted: #a19fa8;
  --text-color-inline-code: #56d364;
  --text-color-accent: #e41f26; /* GA Red */
  --text-color-attention: #d29922;
  --text-color-warning: #f85149;
  --text-color-file: #db6d28;
  --text-color-keys: #8250df;
  --link-color-default: #4493f8;
  --link-color-hover: #60b0ff;

  /* Borders */
  --border-color-default: #30363d;
  --border-color-muted: #30363db3;
  --border-color-emphasis: #484f58;
  --border-color-accent: #1f6feb;
  --border-color-attention: #9e6a03;
  --border-color-warning: #da3633;

  /* Misc */
  --highlighter-yellow: #ccff15;

  /* Activity Banner highlight colors (see note above before changing these */
  --exercise-highlight-color: #f0883e;
  --discussion-highlight-color: #1158c7;
  --guided-walkthrough-highlight-color: #e3b341;
  --knowledge-check-highlight-color: #6e40c9;
  --programming-highlight-color: #2ea043;
  /* 
    If the value of the background color changes, you may want to update this.
    Do not use rgb() here - only the color values should be used here so that 
    this property can be used in both rgb() and rgba().
  */
  --activity-banner-background-color-rgb: 13, 17, 23;
  --activity-banner-background-gradient: linear-gradient(to right, rgba(var(--activity-banner-background-color-rgb), 1) 0%, rgba(var(--activity-banner-background-color-rgb), 0.95) 60%, rgba(var(--activity-banner-background-color-rgb), 0.8) 100%);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* With additional customizations */

/*
 * 1. Improve consistency of default fonts in all browsers.
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in iOS.
 * 4. Use a more readable tab size (opinionated).
 * 5. Set sensible default box-sizing method that can be overridden.
 */

html {
  font-family: var(--system-fonts); /* 1 */
  line-height: normal; /* 2 */
  -webkit-text-size-adjust: 100%; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  box-sizing: border-box; /* 5 */
}

/**
 * Tied to 5 above, allows box-sizing model to be overridden where necessary.
 */

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

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE. Should remove this but
 * something in me is keeping it for that .3 percenter that will need it.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Show the correct color in Firefox.
 */

hr {
  color: inherit;
}

/**
 * 1. Remove text indentation from table contents in Chrome and Safari. See:
 *    https://bugs.chromium.org/p/chromium/issues/detail?id=999088 and
 *    https://bugs.webkit.org/show_bug.cgi?id=201297
 * 2. Correct table border color inheritance in Chrome and Safari. See: 
 *    https://bugs.chromium.org/p/chromium/issues/detail?id=935729 and 
 *    https://bugs.webkit.org/show_bug.cgi?id=195016
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/**
 * Correct the inheritance and scaling of font size in all browsers.
 */

code,
kbd,
samp,
pre {
  font-size: 1em;
}

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  text-decoration: underline dotted;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers. See: https://gist.github.com/unruthless/413930
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove default blue buttons in iOS 15+ Safari 
 * 3. Remove the margin in Firefox and Safari.
 * 4. Remove the inheritance of text transform in Firefox.
 */

button {
  font: inherit; /* 1 */
  color: inherit;
  margin: 0; /* 3 */
  text-transform: none; /* 4 */
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Apply cursor pointer to all button-like elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  appearance: button;
  -webkit-appearance: button; /* 1 */
  cursor: pointer;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/**
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* --------------------------- End normalization ---------------------------- */
/* ------------------------------ Begin theme ------------------------------- */

/* Elements */

/** Customization
 *  Default font is Nunito Sans
 *  This follows the GA Brand Guidelines found here: 
 *  https://drive.google.com/file/d/1BfU0gnDvB65MmRkCPtcvawPMcQkpX4gg/view.
 *  (headers are overridden)
 */

html {
  font-family: var(--nunito-sans), var(--system-fonts);
}

body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color-default);
  background-color: var(--body-background-color);
}

/** Customization
 *  Retain underline on links for accessibility
 */
a {
  color: var(--link-color-default);
}

/** Customization
 *  Change link color on hover/focus for accessibility
 */
a:hover,
a:focus {
  color: var(--link-color-hover);
}

b,
strong {
  font-weight: 600;
}

mark {
  background-color: var(--highlighter-yellow);
  color: #1f2328;
}

hr,
.rule {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color-default);
}

hr::before,
.rule::before {
  display: table;
  content: "";
}

hr::after,
.rule::after {
  display: table;
  clear: both;
  content: "";
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

button {
  cursor: pointer;
  border-radius: 0;
}

[hidden][hidden] {
  display: none !important;
}

details summary {
  cursor: pointer;
}

details:not([open]) > *:not(summary) {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
}

/** Customization
 *  Headers use rem sizes. hX element and hX classes adhere to the same sizes.
 *  Markdown h1 is no different from a regular h1 outside of markdown content.
 *  h1 and h2 use Barlow Condensed Bold, h3 uses Barlow Semi Condensed Semibold,
 *  h4 - h6 use ExtraBold Nunito Sans. This follows the GA Brand Guidelines
 *  found here: 
 *  https://drive.google.com/file/d/1BfU0gnDvB65MmRkCPtcvawPMcQkpX4gg/view.
 */
h1,
.h1 {
  font-size: 2.25rem;
  font-family: var(--barlow-condensed-bold), var(--system-fonts);
}

.markdown-body.slides h1,
.markdown-body.slides .h1 {
  font-size: 72px;
  line-height: 72px;
}

h2,
.h2 {
  padding-bottom: 0.3em;
  font-size: 1.95rem;
  border-bottom: 1px solid var(--border-color-muted);
  font-family: var(--barlow-condensed-bold), var(--system-fonts);
}

.markdown-body.slides h2,
.markdown-body.slides .h2 {
  font-size: 64px;
  line-height: 64px;
  margin-top: 0;
}

h3,
.h3 {
  font-size: 1.5rem;
}

.markdown-body.slides h3,
.markdown-body.slides .h3 {
  font-size: 48px;
  line-height: 48px;
}

h4,
.h4 {
  font-size: 1.25rem;
}

.markdown-body.slides h4,
.markdown-body.slides .h4 {
  font-size: 36px;
  line-height: 36px;
}

h3,
h4,
.h3,
.h4 {
  font-family: var(--barlow-semi-condensed-semibold), var(--system-fonts);
}

h5,
.h5 {
  font-size: 1rem;
}

.markdown-body.slides h5,
.markdown-body.slides .h5 {
  font-size: clamp(24px, 4.6vw, 36px);
  line-height: clamp(24px, 4.6vw, 36px);
  margin-top: 0;
}

h6,
.h6 {
  font-size: 0.85rem;
}

h5,
h6,
.h5,
.h6 {
  font-family: var(--nunito-sans), var(--system-fonts);
  font-weight: 800;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  margin: 0;
}

ul,
ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

ol ol,
ul ol {
  list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
  list-style-type: lower-alpha;
}

dd {
  margin-left: 0;
}

tt,
code {
  font-size: 12px;
}

pre {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
}


/** Customization
 *  Use Cascadia Mono as the preferred mono font.
 */
code,
kbd,
samp,
pre {
  font-family: var(--cascadia-mono), var(--system-mono-fonts);
}

/* Borders */

.border {
  border: 1px var(--border-color-default) solid;
}

.border-y {
  border-top: 1px var(--border-color-default) solid;
  border-bottom: 1px var(--border-color-default) solid;
}

.border-top {
  border-top: 1px var(--border-color-default) solid;
}

.border-right {
  border-right: 1px var(--border-color-default) solid;
}

.border-bottom {
  border-bottom: 1px var(--border-color-default) solid;
}

.border-left {
  border-left: 1px var(--border-color-default) solid;
}

.border-0 {
  border: 0;
}

.border-top-0 {
  border-top: 0;
}

.border-right-0 {
  border-right: 0;
}

.border-bottom-0 {
  border-bottom: 0;
}

.border-left-0 {
  border-left: 0;
}

.border-dashed {
  border-style: dashed;
}

.border-muted {
  border-color: var(--border-color-muted);
}

.border-emphasis {
  border-color: var(--border-color-emphasis);
}

.border-accent {
  border-color: var(--border-color-accent);
}

.border-attention {
  border-color: var(--border-color-attention);
}

.border-warning {
  border-color: var(--border-color-warning);
}

.rounded-0 {
  border-radius: 0;
}

.rounded-1 {
  border-radius: 3px;
}

.rounded-2 {
  border-radius: 6px;
}

.rounded-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-top-1 {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.rounded-top-2 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.rounded-right-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-right-1 {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.rounded-right-2 {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-bottom-1 {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.rounded-bottom-2 {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.rounded-left-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.rounded-left-1 {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.rounded-left-2 {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

.circle {
  border-radius: 50%;
}

/* Box shadows */

.box-shadow {
  box-shadow: 0 1px 1px rgba(27, 31, 35, 0.1);
}

.box-shadow-medium {
  box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
}

.box-shadow-large {
  box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15);
}

.box-shadow-extra-large {
  box-shadow: 0 10px 50px rgba(27, 31, 35, 0.07);
}

.box-shadow-none {
  box-shadow: none;
}

/* Backgrounds */

.bg-white {
  background-color: #ffffff;
}

.bg-black {
  background-color: #000000;
}

.bg-subtle {
  background-color: var(--background-color-subtle);
}

.bg-emphasis {
  background-color: var(--background-color-emphasis);
}

.bg-accent {
  background-color: var(--background-color-accent);
}

.bg-attention {
  background-color: var(--background-color-attention);
}

.bg-warning {
  background-color: var(--background-color-warning);
}

/* Text */

.text-default {
  color: var(--text-color-default);
}

.text-muted {
  color: var(--text-color-muted);
}

.text-on-bold-bg {
  color: var(--text-color-on-bold-bg);
}

.text-accent {
  color: var(--text-color-accent);
}

.text-attention {
  color: var(--text-color-attention);
}

.text-attention {
  color: var(--text-color-warning);
}

.text-file {
  color: var(--text-color-file);
}

.text-keys {
  color: var(--text-color-keys);
}

/* Summary */

.details-overlay[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: block;
  cursor: default;
  content: " ";
  background: transparent;
}

.details-overlay-dark[open] > summary::before {
  z-index: 99;
  background: rgba(27, 31, 35, 0.5);
}

/* Display */

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-inline-flex {
  display: inline-flex;
}

.d-none {
  display: none;
}

/* Flexbox */

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

.flex-items-start {
  align-items: flex-start;
}

.flex-items-end {
  align-items: flex-end;
}

.flex-items-center {
  align-items: center;
}

.flex-items-baseline {
  align-items: baseline;
}

.flex-items-stretch {
  align-items: stretch;
}

.flex-content-start {
  align-content: flex-start;
}

.flex-content-end {
  align-content: flex-end;
}

.flex-content-center {
  align-content: center;
}

.flex-content-between {
  align-content: space-between;
}

.flex-content-around {
  align-content: space-around;
}

.flex-content-stretch {
  align-content: stretch;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-5 {
  gap: 20px;
}

.gap-6 {
  gap: 24px;
}

/* Position */

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

/* Overflow */

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

/* Width and height */

.width-fit {
  max-width: 100%;
}

.width-full {
  width: 100%;
}

.height-fit {
  max-height: 100%;
}

.height-full {
  height: 100%;
}

/* Margin */

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mx-0 {
  margin-right: 0;
  margin-left: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.m-1 {
  margin: 4px;
}

.mt-1 {
  margin-top: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mb-1 {
  margin-bottom: 4px;
}

.ml-1 {
  margin-left: 4px;
}

.mx-1 {
  margin-right: 4px;
  margin-left: 4px;
}

.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.m-2 {
  margin: 8px;
}

.mt-2 {
  margin-top: 8px;
}

.mr-2 {
  margin-right: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.mx-2 {
  margin-right: 8px;
  margin-left: 8px;
}

.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.m-3 {
  margin: 16px;
}

.mt-3 {
  margin-top: 16px;
}

.mr-3 {
  margin-right: 16px;
}

.mb-3 {
  margin-bottom: 16px;
}

.ml-3 {
  margin-left: 16px;
}

.mx-3 {
  margin-right: 16px;
  margin-left: 16px;
}

.my-3 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.m-4 {
  margin: 24px;
}

.mt-4 {
  margin-top: 24px;
}

.mr-4 {
  margin-right: 24px;
}

.mb-4 {
  margin-bottom: 24px;
}

.ml-4 {
  margin-left: 24px;
}

.mx-4 {
  margin-right: 24px;
  margin-left: 24px;
}

.my-4 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.m-5 {
  margin: 32px;
}

.mt-5 {
  margin-top: 32px;
}

.mr-5 {
  margin-right: 32px;
}

.mb-5 {
  margin-bottom: 32px;
}

.ml-5 {
  margin-left: 32px;
}

.mx-5 {
  margin-right: 32px;
  margin-left: 32px;
}

.my-5 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.m-6 {
  margin: 40px;
}

.mt-6 {
  margin-top: 40px;
}

.mr-6 {
  margin-right: 40px;
}

.mb-6 {
  margin-bottom: 40px;
}

.ml-6 {
  margin-left: 40px;
}

.mx-6 {
  margin-right: 40px;
  margin-left: 40px;
}

.my-6 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

/* Padding */

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.px-0 {
  padding-right: 0;
  padding-left: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.p-1 {
  padding: 4px;
}

.pt-1 {
  padding-top: 4px;
}

.pr-1 {
  padding-right: 4px;
}

.pb-1 {
  padding-bottom: 4px;
}

.pl-1 {
  padding-left: 4px;
}

.px-1 {
  padding-right: 4px;
  padding-left: 4px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.p-2 {
  padding: 8px;
}

.pt-2 {
  padding-top: 8px;
}

.pr-2 {
  padding-right: 8px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pl-2 {
  padding-left: 8px;
}

.px-2 {
  padding-right: 8px;
  padding-left: 8px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.p-3 {
  padding: 16px;
}

.pt-3 {
  padding-top: 16px;
}

.pr-3 {
  padding-right: 16px;
}

.pb-3 {
  padding-bottom: 16px;
}

.pl-3 {
  padding-left: 16px;
}

.px-3 {
  padding-right: 16px;
  padding-left: 16px;
}

.py-3 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.p-4 {
  padding: 24px;
}

.pt-4 {
  padding-top: 24px;
}

.pr-4 {
  padding-right: 24px;
}

.pb-4 {
  padding-bottom: 24px;
}

.pl-4 {
  padding-left: 24px;
}

.px-4 {
  padding-right: 24px;
  padding-left: 24px;
}

.py-4 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.p-5 {
  padding: 32px;
}

.pt-5 {
  padding-top: 32px;
}

.pr-5 {
  padding-right: 32px;
}

.pb-5 {
  padding-bottom: 32px;
}

.pl-5 {
  padding-left: 32px;
}

.px-5 {
  padding-right: 32px;
  padding-left: 32px;
}

.py-5 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.p-6 {
  padding: 40px;
}

.pt-6 {
  padding-top: 40px;
}

.pr-6 {
  padding-right: 40px;
}

.pb-6 {
  padding-bottom: 40px;
}

.pl-6 {
  padding-left: 40px;
}

.px-6 {
  padding-right: 40px;
  padding-left: 40px;
}

.py-6 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Responsive fonts */

.f1 {
  font-size: 26px;
}

@media (min-width: 768px) {
  .f1 {
    font-size: 32px;
  }
}

.f2 {
  font-size: 22px;
}

@media (min-width: 768px) {
  .f2 {
    font-size: 24px;
  }
}

.f3 {
  font-size: 18px;
}

@media (min-width: 768px) {
  .f3 {
    font-size: 20px;
  }
}

.f4 {
  font-size: 16px;
}

@media (min-width: 768px) {
  .f4 {
    font-size: 16px;
  }
}

.f5 {
  font-size: 14px;
}

.f6 {
  font-size: 12px;
}

.f7 {
  font-size: 10px;
}

/* Text mods */

.text-normal {
  font-weight: 400;
}

.text-bold {
  font-weight: 600;
}

.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.no-wrap {
  white-space: nowrap;
}

.ws-normal {
  white-space: normal;
}

.wb-break-all {
  word-break: break-all;
}

.text-emphasized {
  font-weight: 500;
  color: var(--text-color-accent);
}

.list-style-none {
  list-style: none;
}

/* Text shadows */

.text-shadow-dark {
  text-shadow: 0 1px 1px rgba(27, 31, 35, 0.25),
    0 1px 25px rgba(27, 31, 35, 0.75);
}

.text-shadow-light {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Containers */

.container {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.container::before {
  display: table;
  content: "";
}

.container::after {
  display: table;
  clear: both;
  content: "";
}

.container-md {
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.container-lg {
  max-width: 1012px;
  margin-right: auto;
  margin-left: auto;
}

.container-xl {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

/* Tables */

.table-fixed {
  table-layout: fixed;
}

.columns {
  margin-right: -10px;
  margin-left: -10px;
}

.columns::before {
  display: table;
  content: "";
}

.columns::after {
  display: table;
  clear: both;
  content: "";
}

.column {
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

.one-third {
  width: 33.333333%;
}

.two-thirds {
  width: 66.666667%;
}

.one-fourth {
  width: 25%;
}

.one-half {
  width: 50%;
}

.three-fourths {
  width: 75%;
}

.one-fifth {
  width: 20%;
}

.four-fifths {
  width: 80%;
}

.centered {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

/* Medium Zoom styles */

.medium-zoom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: backdrop 0.7s, -webkit-backdrop-filter 0.7s, background-color 0.7s;
}

.medium-zoom--opened .medium-zoom-overlay {
  cursor: pointer;
  cursor: zoom-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(33, 37, 48, 0.3);
}

.medium-zoom-image {
  cursor: pointer;
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

.medium-zoom-image--hidden {
  visibility: hidden;
}

.medium-zoom-image--opened {
  position: relative;
  cursor: zoom-out;
}

/* Markdown */

.markdown-body {
  font-size: 16px;
  line-height: 1.55;
  word-wrap: break-word;
}

.markdown-body.slides {
  font-size: 24px;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body > *:first-child {
  margin-top: 0 !important;
}

.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body figure {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body.slides p,
.markdown-body.slides blockquote,
.markdown-body.slides ul,
.markdown-body.slides ol,
.markdown-body.slides dl,
.markdown-body.slides table,
.markdown-body.slides pre,
.markdown-body.slides figure {
  margin-top: 0;
  margin-bottom: 24px;
}

.markdown-body hr {
  height: 0.25rem;
  padding: 0;
  margin: 24px 0;
  background-color: var(--border-color-default);
  border: 0;
}

/** Customization
 *  Add .fiquote class
 */

.markdown-body blockquote,
.markdown-body .figquote {
  padding: 0.4rem 1rem;
  color: var(--text-color-default);
  border-left: 0.25rem solid var(--border-color-muted);
  background-color: var(--background-color-callout);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 16.5px;
}

.markdown-body.slides blockquote,
.markdown-body.slides .figquote {
  font-size: 26px;
}

.markdown-body .figquote > blockquote {
  margin-bottom: 0
}

.markdown-body .figquote > figcaption {
  text-align: right;
  font-style: italic;
}

.markdown-body blockquote > :first-child {
  margin-top: 0;
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

/** Customization
 *  Allow the keyboard class to use this styling
 */
.markdown-body span.keyboard,
.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px 4px;
  font-size: 12px;
  line-height: 11px;
  font-weight: 600;
  color: var(--text-color-keys);
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
}

.markdown-body.slides span.keyboard,
.markdown-body.slides kbd {
  font-size: 22px;
  line-height: 21px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  line-height: 1.25;
}

.markdown-body h1 tt,
.markdown-body h1 code,
.markdown-body h2 tt,
.markdown-body h2 code,
.markdown-body h3 tt,
.markdown-body h3 code,
.markdown-body h4 tt,
.markdown-body h4 code,
.markdown-body h5 tt,
.markdown-body h5 code,
.markdown-body h6 tt,
.markdown-body h6 code {
  font-size: 85%;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body ul.no-list,
.markdown-body ol.no-list {
  padding: 0;
  list-style-type: none;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li {
  word-wrap: break-all;
}

.markdown-body li > p {
  margin-top: 16px;
}

.markdown-body li + li {
  margin-top: 0.25em;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
}

.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
}

.markdown-body table th {
  font-weight: 600;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid var(--border-color-default);
}

.markdown-body table tr {
  background-color: var(--body-background-color);
}

.markdown-body table tr:nth-child(2n) {
  background-color: var(--background-color-subtle);
}

.markdown-body table img {
  background-color: transparent;
}

.markdown-body img {
  max-width: 100%;
  box-sizing: content-box;
  background-color: transparent;
}

/* Markdown code types */

/** Customization
 *  Significant customization to code styles to simplify and consolidate.
 */

.markdown-body code,
.markdown-body tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 90%;
  background-color: var(--background-color-inline-code);
  color: var(--text-color-inline-code);
  border-radius: 3px;
}

.markdown-body code br,
.markdown-body tt br {
  display: none;
}

.markdown-body del code {
  text-decoration: inherit;
}

.markdown-body pre {
  word-wrap: normal;
  padding: 16px;
  border-radius: 3px;
  background-color: var(--background-color-code-block);
  line-height: 1.6;
}

.markdown-body pre code,
.markdown-body pre tt {
  display: block;
  padding: 1em;
  margin: 0;
  font-size: 14px;
  overflow-y: visible;
  overflow-x: auto;
  line-height: inherit;
  word-wrap: normal;
  word-break: normal;
  white-space: pre;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #abb2bf;
}

/* Custom styles */

.markdown-body p.collapse {
  margin-bottom: 0;
}

.markdown-body span.warning {
  color: var(--text-color-warning);
}

.markdown-body span.extreme-warning {
  color: var(--text-color-warning);
  font-weight: 600;
}

.markdown-body code.codeblock-filepath {
  background-color: var(--background-color-code-block);
  color: var(--text-color-file);
  padding: 0.4em 0.7em;
  font-size: 14.5px;
}

.markdown-body code.filepath {
  color: var(--text-color-file);
}

/** 
 * Would really like to :not() this, but that increases the specificity of the 
 * base rule and makes us have to !important all the color rules for blockquotes
 * which we'd prefer not to do. Just unsetting things here instead.
 */

.markdown-body blockquote.quote {
  padding: unset;
  border-left: unset;
  background-color: unset;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

.markdown-body blockquote.attention {
  border-color: var(--border-color-attention);
}

.markdown-body blockquote.knowledge-check {
  border-color: var(--knowledge-check-highlight-color);
}

.markdown-body blockquote.warning {
  border-color: var(--border-color-warning);
}

.markdown-body blockquote.extreme-warning {
  color: var(--black);
  border-color: var(--background-color-warning);
  background-color: var(--background-color-warning);
  font-weight: 600;
}

/* ------------------------- Page header and footer ------------------------- */

#tc-header {
  background: var(--background-color-nav);
  color: var(--text-color-on-emphasis);
  min-height: 50px;
}

#tc-header-temp {
  background: var(--background-color-nav);
  color: var(--text-color-on-emphasis);
  position: sticky;
  top: 0;
  height: 50px;
}

#tc-nav {
  height: 49px;
}

#tc-nav-logo-container {
  display: none;
  line-height: 32px;
  margin-left: 30.5px;
}

#tc-sub-nav-button {
  background: none;
  color: var(--text-color-on-emphasis);
}

#tc-hamburger-icon,
#tc-close-icon {
  display: none;
}

#tc-sub-nav-container {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s;
}

#tc-main-container {
  transition: grid-template-rows 0.35s;
}

#tc-footer {
  background: var(--background-color-nav);
  color: var(--text-color-on-emphasis);
}

#tc-footer-slide-controls-container {
  background: var(--background-color-slide-nav);
  color: var(--text-color-default);
}

#tc-footer-slide-controls {
  height: 45px;
}

#tc-footer-slide-controls button {
  background-color: var(--background-color-subtle);
  color: var(--text-color-default);
}

#tc-footer-items {
  height: 55px;
  background: var(--background-color-nav);
  color: var(--text-color-on-emphasis);
}

#tc-footer-right,
#tc-footer-left {
  flex-grow: 1;
  flex-basis: 0;
  text-wrap-style: balance;
}

#tc-left-nav-lg {
  display: none;
}

#tc-right-nav-lg {
  display: none;
}

#tc-footer-legal {
  color: var(--text-color-on-emphasis-muted);
  line-height: 16px;
}

#tc-footer-right {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

#tc-sub-nav {
  visibility: hidden;
  overflow-y: hidden;
}

#tc-sub-nav.visible {
  visibility: visible;
}

#tc-hamburger-icon.visible,
#tc-close-icon.visible {
  display: block;
}

#tc-header.no-stick {
  position: static;
  top: auto;
}

#tc-sub-nav-container.open {
  grid-template-rows: 1fr;
}

#tc-sub-nav h2 {
  border-bottom: none;
}

#tc-sub-nav button {
  background-color: var(--background-color-subtle);
  color: var(--text-color-default);
}

#tc-sub-nav a,
#tc-sub-nav li {
  color: var(--text-color-on-emphasis);
}

#tc-sub-nav code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 90%;
  background-color: var(--background-color-inline-code);
  color: var(--text-color-inline-code);
  border-radius: 3px;
}

#tc-sub-nav code.filepath {
  color: var(--text-color-file);
}

#tc-sub-nav button:hover {
  background-color: var(--background-color-subtle-hover);
}

#tc-sub-nav a:hover {
  color: var(--text-color-accent);
}

#tc-sub-nav a.complete,
#tc-sub-nav li.complete {
  color: var(--text-color-on-emphasis-muted);
}

#tc-sub-nav a.current,
#tc-sub-nav li.current,
#tc-sub-nav a.current code {
  color: var(--text-color-accent);
}

#tc-sub-nav a.complete:hover,
#tc-sub-nav a.current:hover,
#tc-sub-nav a.current:hover code {
  color: var(--text-color-accent);
}

#tc-slide-settings {
  visibility: hidden;
}

#tc-slide-settings.visible {
  visibility: visible;
}

#tc-footer-items p {
  margin: 0;
}

#tc-footer-legal a {
  color: var(--text-color-on-emphasis-muted);
}

#tc-footer-items a {
  color: var(--text-color-on-emphasis);
}

#tc-footer-items a code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 90%;
  background-color: var(--background-color-inline-code);
  color: var(--text-color-inline-code);
  border-radius: 3px;
}

#tc-footer-items a code.filepath {
  color: var(--text-color-file);
}

#tc-footer-items a:hover,
#tc-footer-legal a:hover,
#tc-footer-items a:hover code {
  color: var(--text-color-accent);
}

/* Stop animations */

@media screen and (prefers-reduced-motion: reduce) {
  #tc-sub-nav-container {
    transition: none;
  }
}

/*
When navigating to a heading element on a page the heading text will be
obscured under the sticky nav by default. This code moves the page up 
slightly so that the header text it is no longer obscured when navigating
to these types of links.
*/

:target {
  scroll-margin-top: 60px;
}

/* Change footer nav display on small format screens */

@media (min-width: 800px) {
  #tc-left-nav-sm,
  #tc-right-nav-sm {
    display: none;
  }

  #tc-left-nav-lg,
  #tc-right-nav-lg {
    display: block;
  }

  #tc-nav-logo-container {
    display: inline-flex;
  }
}

/* ---------------------------------- Hero ---------------------------------- */
/* 
  General maintenance note - some of this code could be removed in favor of 
  using the design system classes above on these elements - if you're touching 
  this code and have time to make those updates, that would be a big win!
*/

#hero {
  aspect-ratio: 64 / 11;
  display: flex;
  align-items: center;
  background-color: var(--background-color-nav);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 16px;
}

#hero div {
  height: 48%;
  aspect-ratio: 1 / 1;
  margin: 0 4.5%;
}

#hero h1 {
  display: flex;
  flex-direction: column;
  color: var(--white);
  margin: 16px 4.5% 16px 0;
  font-size: clamp(24px, 4.6vw, 48px);
  line-height: clamp(24px, 4.6vw, 48px);
  font-family: var(--barlow-condensed-bold), var(--system-fonts);
}

.markdown-body.slides #hero h1 {
  font-size: 72px;
  line-height: 72px;
}

#hero h1 .prefix + .headline,
#hero h1 .headline + .subhead {
  margin-top: 6px;
}

#hero h1 .prefix,
#hero h1 .subhead {
  font-size: clamp(16px, 2.9vw, 30px);
  line-height: clamp(16px, 2.9vw, 30px);
  font-family: var(--barlow-semi-condensed-semibold), var(--system-fonts);
}

.slides #hero h1 .prefix,
.slides #hero h1 .subhead {
  font-size: 48px;
  line-height: 48px;
}

#hero code {
  color: var(--text-color-inline-code);
  padding: 2px 4px;
  margin: 0 1px;
}

#hero code.filepath {
  color: var(--text-color-file);
}

/* -------------------- Activity Banners / Timed section -------------------- */
/* 
  General maintenance note - some of this code could be removed in favor of 
  using the design system classes above on these elements - if you're touching 
  this code and have time to make those updates, that would be a big win!
*/

.activity {
  width: 100%;
  background-color: rgb(var(--activity-banner-background-color-rgb));
  margin-bottom: 20px;
}

.activity > .box {
  border-width: 2px 2px 24px;
  border-style: solid;
  padding: 8px 1.5% 10px;
}

.activity h2,
.activity h3 {
  font-family: var(--barlow-condensed-bold), var(--system-fonts);
  font-size: 1.75em;
  line-height: 1em;
  margin: 0 72px 8px 0;
  padding: 0;
  border: none;
  text-wrap: balance;
}

.markdown-body.slides .activity h2,
.markdown-body.slides .activity h3 {
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: clamp(48px, 4.6vw, 72px);
  margin-top: 0;
}

.activity p {
  font-family: var(--barlow-semi-condensed-semibold), var(--system-fonts);
  color: var(--text-color-muted);
  font-size: 1em;
  margin: 0;
}

.markdown-body.slides .activity p {
  margin: 0;
}

.activity .meta {
  display: flex;
  justify-content: space-between;
  margin: 2px 0 0 0;
}

.activity .text-container {
  margin-left: 1.5%;
  flex-grow: 1;
}

.activity .time {
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 10px 5px
    rgba(var(--activity-banner-background-color-rgb), 0.9);
  background-color: rgba(var(--activity-banner-background-color-rgb), 0.9);
}

.activity svg.activity-icon {
  margin-top: 6px;
  stroke: var(--text-color-default);
  min-width: 50px;
}

.activity svg.clock-icon {
  margin-right: 4px;
  stroke: var(--text-color-muted);
}

.activity > .box h2 code {
  font-size: 75%;
}

/* Timed section */

.timed-section {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 16px;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--border-color-muted);
}

.timed-section h2,
.timed-section h3,
.timed-section h4,
.timed-section h5 {
  text-wrap: balance;
  margin: 0;
  padding: 0;
  border: none;
}

.timed-section span {
  font-family: var(--barlow-semi-condensed-semibold);
  padding-left: 1.5em;
  min-width: max-content;
  display: flex;
  align-items: center;
  color: var(--text-color-muted);
}

.timed-section .clock-icon {
  margin-right: 4px;
  stroke: var(--text-color-muted);
}

@media (max-width: 520px) {
  .activity .meta,
  .timed-section {
    justify-content: start;
  }

  .activity .time {
    background-color: transparent;
    box-shadow: none;
  }

  .activity .time:before {
    content: "-";
    padding: 0 4px;
    color: var(--text-color-muted);
    font-family: var(--barlow-semi-condensed-semibold);
  }

  .activity svg.clock-icon,
  .timed-section svg.clock-icon {
    display: none;
  }

  .activity div.box {
    background: transparent !important;
  }

  .activity h2,
  .activity h3 {
    margin: 0 0 8px;
  }
}

/* Activity-specific container customization */

/* ! Important! Read this before working with the activity banners below! */
/* 
  The `fill` below must be adjusted manually when there are color changes to 
  this banner.

  IMPORTANT: the `fill`'s value starts with `%23` - this is the URL encoding 
  for the # character - do not remove or change this.For example, if 
  `fill='%239740b5'` then the actual hex color is 9740B5 - that is what you 
  will want to modify.

  Unfortunately, this value cannot adjust between light and dark mode without
  doubling up this already extensive code - use the light mode color as a 
  sensible default.
*/

.activity.solo-exercise > .box,
.activity.partner-exercise > .box,
.activity.group-exercise > .box {
  /* See the note above before modifying this code */
  border-color: var(--exercise-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23FB8F44' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.activity.discussion > .box {
  /* See the note above before modifying this code */
  border-color: var(--discussion-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg width='76' height='18' viewBox='0 0 76 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 18c-2.43-1.824-4-4.73-4-8 0-4.418-3.582-8-8-8H0V0h20c5.523 0 10 4.477 10 10 0 4.418 3.582 8 8 8h20c4.418 0 8-3.582 8-8 0-5.523 4.477-10 10-10v2c-4.418 0-8 3.582-8 8 0 3.27-1.57 6.176-4 8H32zM64 0c-1.67 1.256-3.748 2-6 2H38c-2.252 0-4.33-.744-6-2h32z' fill='%230550AE' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.activity.guided-walkthrough > .box {
  /* See the note above before modifying this code */
  border-color: var(--guided-walkthrough-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23E3B341' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.activity.knowledge-check > .box {
  /* See the note above before modifying this code */
  border-color: var(--knowledge-check-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%236639BA'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.activity.pair-programming > .box {
  /* See the note above before modifying this code */
  border-color: var(--programming-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232DA44E'%3E%3Cpath d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.activity.mob-programming > .box {
  /* See the note above before modifying this code */
  border-color: var(--programming-highlight-color);
  background: var(--activity-banner-background-gradient),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%232DA44E' fill-rule='evenodd'/%3E%3C/svg%3E");
}