/* styles for all pages */
:root
{
  /* colors from StackOverflow */
  --black-075: hsl(210,8%,90%);
  --black-600: hsl(210,8%,35%);
  --black-750: hsl(210,8%,20%);
  --green-700: hsl(140,41%,31%);
  --red-600: hsl(358,62%,47%);
  --highlight-bg: hsl(0,0%,96.5%);
  --highlight-color: var(--black-750);
  --highlight-comment: hsl(210,8%,43.5%);
  --highlight-punctuation: var(--black-600);
  --highlight-namespace: hsl(27,99%,36%);
  --highlight-attribute: hsl(206,98.5%,29%);
  --highlight-literal: hsl(27,99%,36%);
  --highlight-symbol: hsl(306,43%,35%);
  --highlight-keyword: hsl(206,98.5%,29%);
  --highlight-variable: hsl(80,80.5%,26.5%);
  --highlight-addition: var(--green-700);
  --highlight-deletion: var(--red-600);
}

.hl-color, .hl-col {
  color: var(--highlight-color);
}

.hl-comment {
  color: var(--highlight-comment);
}

.hl-punctuation, .hl-punct {
  color: var(--highlight-punctuation);
}

.hl-namespace {
  color: var(--highlight-namespace);
}

.hl-attribute, .hl-attr {
  color: var(--highlight-attribute);
}

.hl-literal, .hl-lit {
  color: var(--highlight-literal);
}

.hl-symbol, .hl-smb {
  color: var(--highlight-symbol);
}

.hl-keyword, .hl-kwd {
  color: var(--highlight-keyword);
}

.hl-variable, .hl-var {
  color: var(--highlight-variable);
}

.hl-addition, .hl-add {
  color: var(--highlight-addition);
}

.hl-deletion, .hl-del {
  color: var(--highlight-deletion);
}

code, samp, kbd
{
  display: inline-block;
  background: var(--black-075);
  border-radius: 5px;
  font-family: monospace;
  padding: 2px;
  width: fit-content;
}

code
{
  display: block;
  padding: 10px;
  background: var(--highlight-bg);
}

kbd {
  border: 1px solid var(--black-075);
  background: white;
  box-shadow: var(--black-075) 0px 2px;
  text-transform: capitalize;
  margin: 0px 3px;
}

div#webview-screenshot-crop
{
  width: 300px;
  height: 202.5px;
  overflow: hidden;

  max-width: 100%;
}

div#webview-screenshot-crop img
{
  width: 100%;
}

img
{
  max-width: 100%;
}


/* iFrame tests page styles */
body#iframe-body
{
  margin: 0px;
}

body#iframe-body p:first-child
{
  margin-block-start: 0px;
}

body#iframe-body p:last-child
{
  margin-block-end: 0px;
}