:root {
  --text-size: 19px;
  --indent-size: 4;
}

html {
  --color-blue: #537BFF;
  --color-gray: #5A5A5A;
  --color-gray-light: #F2F2F2;
  --color-gray-light-2: #eaeaea;
}

code {
    display:block;
}

code example {
  background-color: lightblue;
  display: block;
}

.code-example {
    width: 90%;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
    margin: 3.3rem auto;
    overflow: hidden;
    border-radius: 0.8rem;
  }
  
  .code-example code {
    position: relative;
    width: 100%;
  }

  .code-example::after {
    position: relative;
    display: inline-block;
    text-align: right;
    width: 100%;
    content: "(‡)\00a0";
    font-size: 1.3em;
    color: var(--color-blue);
    bottom: 0.2em;
    border-top:2px solid var(--color-gray-light);;
  }

  .code-example header {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--color-gray-light);
    font-size: 1.1rem;
    color: var(--color-blue);
    padding: 0 1em;
  }

  .code-example>header>span {
    padding: 1em;
  }

  .context-on>div {
    width:1em;
    height:1em;
    border-top:3px solid red;
    border-bottom:3px solid red;
  }
  .context-off>div {
    width:1em;
    height:1em;
    border-top:3px solid lightgrey;
    border-bottom:3px solid lightgrey;
  }
  .context-on>div>div {
    margin:2px;
    width:0.8em;
    height:0.4em;
    border-top:3px solid black;
    border-bottom:3px solid black;
  }
  .context-off>div>div {
    margin:2px;
    width:0.8em;
    height:0.4em;
    border-top:3px solid red;
    border-bottom:3px solid red;
  }

  .code-example>header>span:hover {
    background-color: lightblue;
  }
  samp iframe {
    width:100%;
    height:20em;
    border:none;
    background-color: darkslategrey;
  }
  samp {
    position: relative;
    display: block;
  }
  samp span {
    position:absolute;
    color:white;
    background-color: darkslategrey;
    padding: 0 0.5em;
    right:1em;
    top:0.5em;
    font-size: 1.5em;
  }
  samp span:hover {
    background-color: lightblue;
    color: darkslategrey;
  }