/* css styles */
@media (min-width: 970px){
    #main #container #content { width:14400px; }
    }
    dl {
        font-size: 24px;
          font-weight: bold;
        padding: 25px;
        color: #111;
        background-color: #f7f5fa;
        border-left: 8px solid #5f4b8b;
        border-image: linear-gradient(to right,#5f4b8b, #cc66ff 25%, #9966ff 50% , #6666ff) 1/0 0  1px 1;
    }
    .theme-light
    {    
        --background-color: #f7f5fa;
    }
    .theme-dark
    {    
        --background-color: #503946;
    }

    h1,
      h2,
      h3,
      h4,
      h5,
      h5,
      h6 {
        line-height: 1.25;
        font-weight: bold;
      }
      h5,
      h5,
      h6 {
        font-size: 20px;
        padding: 9px 10px;
      }
      h2 {
        font-size: 24px;
        padding: 25px;
        background-color:  var(--background-color) ;
        border-left: 8px solid #5f4b8b;
        border-image: linear-gradient(to right, #5f4b8b, #216cae 40%, #1690b8 60%, #21c5e5 80%, #00CCCC) 1/0 0  1px 1;
      }
      h3 {
        border-left: 7px solid #5f4b8b;
        font-size: 22px;
        padding: 12px 25px;
        border-image: linear-gradient(to right, #5f4b8b, #8757a5, #af63be, #c500cc) 1/0 0 1px 1;
        }
      h4 {
        position: relative;
        padding: 0 .5em .5em 1.5em;
        border-image: linear-gradient(to right, #5f4b8b, #216cae 40%, #1690b8 60%, #21c5e5 80%, #00CCCC) 1/0 0  1px 1;
      }
      h4::before,
      h4::after {
        position: absolute;
        content: '';
        border-radius: 100%
      }
      h4:before {
        content:''; 
        border-radius:30px;
        -webkit-border-radius:30px;
        -moz-border-radius:30px; 
        height:15px; 
        width:15px; 
        display:block; 
        position:absolute; 
        top:2px; 
        left:2px; 
        background-color:#6021ed;
        box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
        filter:alpha(opacity=50);
        -moz-opacity:0.50;
        -khtml-opacity: 0.50;
        opacity:0.50;
        z-index: 1;
      }
      h4:after {
          content:''; 
          border-radius:30px;
          -webkit-border-radius:30px;
          -moz-border-radius:30px; 
          height:12px; 
          width:12px; 
          display:block; 
          position:absolute; 
          top:8px; 
          left:8px; 
          background-color:#00CCCC;
          box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
      }
      h5 {
        position: relative;
        padding: 0 .5em .5em 1.6em;
        border-bottom: 2px solid #f0e5fa;
      }
        h5::before,
        h5::after {
          position: absolute;
          content: '';
          border-radius: 100%
        }
        h5:before {
            content:''; 
            border-radius:30px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px; 
            height:15px; 
            width:15px; 
            display:block; 
            position:absolute; 
            top:2px; 
            left:2px; 
            background-color:#6021ed;
            box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
            filter:alpha(opacity=50);
            -moz-opacity:0.50;
            -khtml-opacity: 0.50;
            opacity:0.50;
            z-index: 1;
        }
        h5:after {
            content:''; 
            border-radius:30px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px; 
            height:12px; 
            width:12px; 
            display:block; 
            position:absolute; 
            top:8px; 
            left:8px; 
            background-color:#00CCCC;
            box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
        }
        h6 {
            position: relative;
            padding: 0 .5em .5em 1.6em;
          }
        h6::before,
        h6::after {
          position: absolute;
          content: '';
          border-radius: 100%
        }
        h6:before  {
            content:''; 
            border-radius:30px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px; 
            height:15px; 
            width:15px; 
            display:block; 
            position:absolute; 
            top:2px; 
            left:2px; 
            background-color:#6021ed;
            box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
            filter:alpha(opacity=50);
            -moz-opacity:0.50;
            -khtml-opacity: 0.50;
            opacity:0.50;
            z-index: 1;
        }
        h6:after {
            content:''; 
            border-radius:30px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px; 
            height:12px; 
            width:12px; 
            display:block; 
            position:absolute; 
            top:8px; 
            left:8px; 
            background-color:#00CCCC;
            box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
        }
      .column-wrap h1, .column-wrap h2, .column-wrap h3, .column-wrap h4, .column-wrap h5, .column-wrap h5, .column-wrap h6 {
        margin-top: 0;
      }
      .copyBtn{
        font-weight:bold;
        font-size:.85em;
        text-align:center;
        margin:30px auto;
        padding:12px 20px;
        border:1px solid #eee;
        }
        @media (min-width:769px){
        .copyBtn{
        max-width:20em;
        }
        }
        .copyBtn:hover{
        opacity:0.6;
        cursor:pointer;
        }
        .copyBtn.isCopied{
        pointer-events:none;
        background:#f7f7f7;
        }
        .copyBtn.isCopied:hover{
        cursor:auto;
        }