/* css for copies of GitHub README.md. I want the same style as dark github. */


/*simplified css style based on https://www.w3schools.com/w3css/default.asp */


/* css variables */

:root {
    /* color palette */
    /* use of variables: var(--color_tooltip_1); */
    /* background color */
    --b_color_html: #111111;
    --b_color_body: #161b22;
    --b_color_header: #0f1016;
    --b_color_header_hover: #DA5929;
    --b_color_button: #8BC24A;
    --b_color_button_disabled: #555;
    --b_color_button_hover: #333;
    /* front color */
    --f_color_body: #f0f6fc;
    --f_color_header: #f0f6fc;
    --f_color_button: #f0f6fc;
    --f_color_link: #FF8C00;
}

* {
    box-sizing: border-box;
}

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

html {
    background-color: var(--b_color_html);
    color: var(--f_color_body);
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 20px;
    overflow-x: hidden;
    /*margin auto means centered horizontally*/
    margin: 10px;
    padding: 0;
    border: 0;
}

body {
    background-color: var(--b_color_body);
    color: var(--f_color_body);
    margin: 10px;
    padding: 0;
    left: 0;
    line-height: 1.8;
    word-wrap: break-word;
}


/* no special color for links, but special class for links */

a:link,
a:visited,
a:hover,
a:active {
    cursor: pointer;
    text-decoration: none;
}

img {
    border-style: none;
    vertical-align: middle;
}


/* region: fixed header */

.fixed_header {
    background-color: var(--b_color_header);
    position: fixed;
    z-index: 10000;
    top: 0;
    padding: 0px 0px 0px;
    width: 100%;
    height: 35px;
}


/* navbar Segments starts with h1, it needs 10px because of the fixed header */
h1 {
    padding-top: 35px;
}
/* fixed header, nest styles inside header to isolate from others */
header {
    background-color: var(--b_color_header);
    position: fixed;
    z-index: 10000;
    top: 0;
    padding: 0px 0px;
    width: 100%;
    height: 35px;
    font-family: Poppins, Segoe UI, Tahoma, sans-serif;
    font-weight: 700;

    & nav {
        justify-self: center;
        max-width: 800px;
        height: 35px;
    display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    & nav a {
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
    text-decoration: none;
        color: var(--f_color_body);
}

    & nav a:hover {
    background-color: var(--b_color_header_hover);
}

    & nav svg {
        fill: var(--f_color_body);
    }


}

.footer {
    background-color: var(--b_color_header);
}


/* css for GitHub classes*/

article {
    background-color: #0d1117;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    border-color: #30363d;
    padding-left: 20px;    
    max-width: 800px;
    
}

h1{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #21262d;
    padding-bottom: 9.6px;
    margin-top: 24px;
    margin-bottom: 16px;
    margin-block-start: 24px;
    margin-block-end: 16px;
}
h2{
    font-size: 24px;
    font-weight: 600;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #21262d;
    margin-bottom: 16px;
}
p{
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}
a{
    color:#58a6ff;
  }
.octicon-link {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    font-size: 24px;
    width: 22px;
    color:#c9d1d9;
    padding-right: 4px;
    margin-left: -20px;
    text-size-adjust: 100%;
    visibility: hidden;
  }
  .anchor{
    visibility: hidden;
  }

  li{
    font-size: 16px;
  }

  code{
    padding: 0.2em 0.4em;
    background-color: #6e768166;
    border-radius: 6px;
    font-size: 13.6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }

  .snippet-clipboard-content{
    box-sizing: border-box;
    display: block;
    line-height: 24px;
    position:relative;
  }

  .highlight{
    box-sizing: border-box;
    display: block;
    line-height: 24px;
    position:relative;
    }

  pre{
    display: block;
    border-radius: 6px;
    padding:16px;
    background-color: #161b22;
    box-sizing: border-box;
    color: #f0f6fc;
    line-height: 19.72px;
    font-size: 13.6px;
    width:98%;
    margin:0;
    margin-bottom: 16px;

    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;
    word-break: normal;
    white-space: pre;
    max-width: none;
  }
  pre > code{
    padding: 0;
    display: inline;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #0000;
    background-origin: padding-box;
    box-sizing: border-box;
    font-size: 13.6px;
    margin:0px;

    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;    
    word-break: normal;
    white-space: pre;
    max-width: none;
  }  

.octicon-copy{
    display: block;
    box-sizing:border-box;
    visibility: hidden;
    overflow-wrap: break-word;
}
.octicon-check{
    display: block;
    box-sizing:border-box;
    visibility: hidden;
    overflow-wrap: break-word;
}
.zeroclipboard-container{
    height: 0px;
}
.small {
    font-size: 50%;
  }