/* examples/index.css */
body {
  gap: var(--padding);
  padding: var(--padding) 0;
}

body h1 {
  font-size: 32px;
}

body h2 {
  font-size: 24px;
}

body h3 {
  font-size: 18px;
}

body a {
  display: inline-block;
  margin-left: -5px;
  padding: 5px;
}

body pre {
  display: inline-block;
  border: 1px solid var(--color);
  padding: var(--padding-half);
  overflow: auto;
  background-color: var(--background-secondary-color);
  border-radius: 7px;
}

body .installations {
  display: flex;
  flex-flow: column;
  align-items:  flex-start;
}

body .flex {
  display: flex;
  align-items:  flex-start;
  gap: var(--padding);
  flex-flow: column;
}

body > section {
  padding: 0 var(--padding);
}

body > section > h2 {
  padding-bottom: var(--padding);
}

body > section .example {
  display: flex;
  gap: var(--padding-half);
  flex-flow: column;
  width: 100%;
}

body > section .example + .example {
  margin-top: calc(var(--padding) * 4);
}

body > section .example .example-title {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items:  center;
}

body > section .example .example-body {
  display: flex;
  gap: var(--padding);
  flex-flow: wrap;
}

body > section .example .example-body .code {
  border: 2px solid var(--color);
  border-radius: var(--padding-half);
  flex: 1;
  min-width: 400px;
}

body > section .example .example-body iframe {
  border: 2px solid var(--color);
  border-radius: var(--padding-half);
  flex: 1;
  min-width: 400px;
}

body > section .example .example-body .code {
  display: flex;
  gap: var(--padding);
  padding: var(--padding);
  flex-flow: column;
}

body > section .example .example-body .code .file pre {
  width: 100%;
}

body > section .example .example-body iframe {
  position: sticky;
  top: var(--padding);
  resize: vertical;
  height: 500px;
}

body > section .example .example-body ins {
  color: var(--ins-color);
  background-color: var(--ins-background-color);
  text-decoration: none;
}

body > section .example .example-body del {
  color: var(--del-color);
  background-color: var(--del-background-color);
  text-decoration: none;
}