:root {
    /* ----- Site Colors ----- */
    --color-primary:rgb(69, 121, 146);
    --color-secondary: rgb(149, 147, 147);  
    --color-complementry-one:rgb(116, 205, 232); 
    --color-complementry-two:rgb(213, 180, 214);
    --color-complementry-three:rgb(102, 205, 170);
    --color-complementry-four:rgb(252, 186, 149);
    --color-bg-main:rgb(244, 246, 247); /* ----- highlight background ----- */
    --color-text-header: rgb(63, 108, 130); /* ----- header text ----- */
    --color-link: rgb(102, 51, 153); /* ----- link color ----- */
    --color-code1: rgb(57, 58, 52);
    --color-code2: rgb(128, 0, 0);
    --color-code3: rgb(255, 0, 0);
    --color-code4: rgb(0, 0, 255);
    --color-code5: rgb(0, 104, 0);
    /* ----- hover Colors ----- */
    --color-nav-one:rgb(69, 121, 146);
    --color-nav-two:rgb(255, 255, 255);

    --font-family_two: 'Trebuchet MS', Tahoma, Arial, Sans-serif;
    --font-family_three: 'Comic Sans MS', cursive;
    --font-family-code: ui-monospace, Consolas, Monaco, SFMono-Regular, SF Mono, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", monospace;
}

/* ----- Universal css ----- */

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html {
      min-height: 100%;
      min-width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.8em;
      margin: 0;
      padding: 0;
  }
  body {
      margin: 0;
      color: rgb(89, 89, 89);
  }
  ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  li {
      margin: 0;
      padding: 0;
  }
  
  a {
      text-decoration: underline;
      word-wrap: break-word;
      font-weight: 500;
      color: var(--color-link);
      font-family: var(--font-family_two);
      transition: all 0.6s ease-in-out;
  }
  
  a:hover {
      text-decoration: none; 
  }
  
  a img{
      border: none;
      display: flex;
  }
  
  img {display: block; max-width: 100%; height: auto;}
  
  h1 {
      font-size: 2em;
      margin: 0;
      line-height: 1em;
      color: var(--color-text-header);
      font-family: var(--font-family_two);
  }
  
  h2,
  h3,
  h4,
  h5 {
      margin: .5rem 0;
      line-height: 1.375em;
      color: var(--color-text-header);
      font-family: var(--font-family_two);
  }
  
  h2 {font-size: 1.728em;}
  h3 {font-size: 1.2em;}
  h4 {font-size: 1.1em;}
  h5 {font-size: 1em;}
  p {margin: .5em 0;}
  p a {text-decoration: underline;}
  li a {text-decoration: none; padding: .25rem;}
  strong {font-weight: 600;}
  
  li a:hover {
      color: var(--color-nav-one);
      border: double 5px var(--color-nav-one);
  }
/* ------ Code  ------ */
pre { margin: 0; padding: 0; tab-size: 4; white-space: pre-wrap; line-height: 1.5; padding: .5rem; margin: 0 0 .5rem; border: 3px double var(--color-complementry-one);}
code { font-family: var(--font-family-code); color: var(--color-code1);}
iframe {border: 3px double var(--color-complementry-one);}
.col1 {
    color:var(--color-code1);
    font-style: normal;
}
.col2 {
    color:var(--color-code2);
    font-style: normal;
}
.col3 {
    color:var(--color-code3);
    font-style: normal;
}
.col4 {
    color:var(--color-code4);
    font-style: normal;
}
.col5 {
    color:var(--color-code5);
    font-style: italic;
}
  /* -------- CSS Grid Core -------- */

header {
    grid-area: head;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

 body {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-areas:  
            "head"
            "main"
            "footer";
 }

 header {    
    display: grid;
    height: auto;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 60px;
    color: var(--color-text-header);
    box-shadow: 0 -1px 9px 0 rgb(119, 163, 166);
}


main {
    display: grid;
    min-height: calc(100vh - 350px);
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-gap: 2rem;
    padding: 2rem 0 1rem;
}

footer {
    display: grid;
    height: auto;
    color: var(--color-primary);
    border-top: solid 1px var(--color-secondary);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(80px, 1fr));
    padding: 1rem;
    grid-gap: 1rem;
}

.guide {
    grid-gap: 0 2rem;
}
/* -------- Header 1 -------- */

.logo {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
    display: grid;
    justify-content: center;
    align-content: center;
}
.logo_img {
    height: 150px;
}

nav {
    grid-column: 1 / 7;
    grid-row: 2 / 3;
    display: grid;
    align-items: center;
}
nav ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    justify-items: center;
}
nav a:link { 
    color: var(--color-nav-one); 
    padding: .8rem;
    border: solid 1px var(--color-complementry-two);
    border-radius: 5px;
}
nav a:visited {       
    color: var(--color-nav-one);
    border: solid 1px var(--color-complementry-two);
}
nav a:hover {
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
    text-decoration: none;
}
nav a:focus { 
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
    text-decoration: none; 
}
nav li .active {
    border: solid 3px var(--color-complementry-two);
    font-weight: 600;
}

/* -------- Main -------- */

h1 {
    grid-column: 1 / 13;
    grid-row: 1 / 2;
    justify-self: center;
    align-self: center;
    padding: 0 .5rem;
}
.tagline {
    grid-column: 1 / 13;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    align-items: center;
    padding: 0 .5rem;
}
.tagline h2,
.tagline p {
    font-style: italic;
    color:rgb(146, 69, 121);
}

.tagline img {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    justify-self: center;
}
.big {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    font-size: 2em;
    justify-self: center;
}
.small {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    font-size: 1.8rem;
    text-align: center;
}
.cta {
    grid-column: 2 / 12;
    grid-row: auto;  
}
.cta h3 {
    text-align: center;  
}
.website_guide {
    grid-column: 2 / 12;
    grid-row: auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 0 1rem;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: 0 -1px 9px 0 rgb(119, 163, 166);
}
.website_guide_text {
    grid-column: 1 / 12;
    padding: 0 0 1rem;
}
.website_guide_img {
    grid-column: 1 / 12;
    justify-self: center;
    align-self: center;
}
.text_tagline {
    font-size: 1.1em;
}
.web,
.vis,
.host,
.supp {
    display: grid;    
    grid-template-columns: 1fr;
}
.web a,
.vis a,
.host a,
.supp a {
    display: grid;    
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    padding: 1rem;
}

.web a:hover,
.vis a:hover,
.host a:hover,
.supp a:hover,
.services_links a:hover,
.services_text_links a:hover {
    box-shadow: 0 5px 14px 0 rgb(119, 163, 166);
}
.web {
    grid-column: 2 / 12;
    grid-row: auto;
}

.vis {
    grid-column: 2 / 12;
    grid-row: auto;
}

.host {
    grid-column: 2 / 12;
    grid-row: auto;   
}

.supp {
    grid-column: 2 / 12;
    grid-row: auto;  
}
.web_border {
    border: 10px double var(--color-complementry-one);
}

.vis_border {
    border: 10px double var(--color-complementry-two);
}

.host_border {
    border: 10px double var(--color-complementry-three);   
}

.supp_border {
    border: 10px double var(--color-complementry-four);  
}
.services_tag {
    grid-column: 1 / 13;
    grid-row: auto;
    justify-self: center;
}
.services_tag img {
    width: 240px;
    height: auto;
}
.text_panel,
.text_panel_large,
.text_panel_half,
.text_panel_small,
.text_center_half_panel {
    grid-column: 2 / 12;
    grid-row: auto;  
} 
.text_panel_img,
.text_panel_img_large {
    grid-column: 2 / 12;
    grid-row: auto;
    justify-self: center;
    align-self: center;  
}
.list_styling {
    list-style: square inside;
    color: var(--color-text-header);
}
.list_styling li {
    padding: .5rem 0;
}
.list_styling li a {
    border: double 5px transparent;
    text-decoration: underline;

}
.list_styling li a:hover {
    border: double 5px var(--color-nav-one);
}
.underline {
    grid-column: 4 / 10;
    grid-row: auto; 
    border-bottom: solid 1px var(--color-secondary);
    padding: .5rem 0;
}
.boxed_tagline {
    grid-column: auto;
    grid-row: auto;
    color: var(--color-text-header);
    font-size: 1.1em;
    text-align: center;
    margin: 0 0 2rem;
    padding: 1rem;
    border-radius: 20px;
    border: 6px double var(--color-complementry-one);
}
.page_img {
    grid-column: 1 / 13;
    grid-row: auto; 
    justify-self: end;
    align-self: center;
    max-height: 300px;
    width: auto;
    padding: 0 .5rem 0 0;
}
.page_top {
    grid-column: 2 / 12;
    grid-row: auto; 
    justify-self: center;
    align-self: center;
}
/* -------- Guide Pages -------- */

.guide h1{
    margin: 0 0 2rem;
}
.toms_section {
    grid-column: 2 / 12;
    grid-row: auto; 
    display: grid; 
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
}
.toms_section img {
    grid-column: 1 / 2;
}
.toms_section h2,
.toms_section h3 {
    grid-column: 2 / 13;
    align-self: center;
}
.full_img {
    grid-column: 1 / 13;
    grid-row: auto;
    width: 100%;
    max-width: 700px;
	height: auto;
    justify-self: center;
    align-self: center;
    padding: 0 1rem;
}
.panel_img {
    grid-column: 1 / 13;
    grid-row: auto;
    justify-self: center;
}
.breadcrumb {
    grid-column: 2 / 12;
    grid-row: auto; 
    display: grid;
    justify-items: center;
}

.size1 {
    font-size: 2em;
}
.size2 {
    font-size: 1.8em;
}
.size3 {
    font-size: 1.6em;
}
.size4 {
    font-size: 1.4em;
}
.size5 {
    font-size: 1.2em;
}
.size6 {
    font-size: 1em;
}
.left {
    align-self: flex-start;
}
.split_col_list span,
p span {
    color: var(--color-text-header);
    font-weight: 600;
}
.split_col_list li a {
    text-decoration: underline;
    border: none;
}
.split_col_list li a:hover {
    text-decoration: none;
    border: none;
    color: var(--color-link);
}
/* -------- Service Links -------- */

.service_title {
    grid-column: 1 / 13;
    grid-row: auto; 
    justify-self: center;
    align-self: center;
    padding: 1.5rem;
    line-height: 0;
}
.service_list_tag {
    grid-column: 2 / 12;
    max-width: 200px;
}
.service_list_tag h1 {
    font-family: var(--font-family_three);
    color: var(--color-secondary);
    transform: rotate(-20deg);
}
.service_list {
    grid-column: 1 / 13;
    color: var(--color-text-header);
    justify-self: center;
    font-size: 1.2em;
    font-weight: 600;
    list-style: square inside;
}
.service_list li {
    padding: .5rem 0;
}
.service_list a {
    color: var(--color-text-header);
    text-decoration: underline;
    border: double 5px transparent;
}
.service_list a:hover {
    text-decoration: none;
    border: double 5px var(--color-complementry-two);
}
.service_list li .active {
    text-decoration: none;
    border: double 5px var(--color-complementry-two);
}
.service_list2 {
color: var(--color-text-header);
justify-self: center;
font-size: .9em;
font-weight: 600;
/* list-style: square inside; */
padding: .5rem 0 0 3rem;
}
.service_list2 li:last-child {
    padding: .5rem 0 0;
}
.services_links {
    grid-column: 2 / 12;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px;
    grid-gap: 1rem;
}
.services_links div {
    grid-column: span 1;
    grid-row: span 1; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
.services_links a {
    grid-column: span 1;
    grid-row: span 1; 
    display: grid;
    justify-items: center;
    align-items: center;
    padding: .25rem;
}
.services_links img {
    height: 70px;
}
.services_text_links {
    grid-column: 2 / 12;
    grid-row: auto; 
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.service .services_text_links {
    grid-column: 1 / 13;
    grid-row: auto; 
}
.services_text_links a {
    padding: 1rem;
    margin: .5rem;
    text-align: center;
}
/* -------- Services Page -------- */

.services_panel {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.services_panel .web a:hover,
.services_panel .vis a:hover,
.services_panel .host a:hover,
.services_panel .supp a:hover {
    box-shadow: none;
}
.service_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-width: 350px;
    margin-bottom: 1rem;
    justify-content: space-between;
}
.service_card a {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.service_card_title {
    padding: .5rem;
}
.service_text {
    padding: .85rem;
    margin: 0 .5rem;
}
.text_link {
    display: flex;
    width: 100%;    
    height: 100%;    
    max-height: 100px;
}
.services_panel {
    grid-column: 1 / 13;
    grid-row: auto; 
    display: grid;    
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-gap: 1rem;
    padding: 0 1rem;
}
.service_card {
    grid-column: span 1;
    grid-row: span 1;
    display: grid;  
    grid-template-columns: 1fr;
    grid-template-rows: 160px auto 75px;
    grid-gap: 1rem;
}
.service_card_title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: .5rem;
}
.service_text {
    padding: .85rem;
    margin: 0 .5rem;
    display: grid;
    justify-content: center;
    align-items: center;
}

@supports (display: flex ) {
    .service_card { 
        width: 45%; 
    }
}
@supports (display: grid ) {
    .service_card { 
        width: auto; 
    }
}

/* -------- Contact and FAQ Pages-------- */

.contact .panel_text {
    grid-column: 2 / 12;
    grid-row: auto; 
}
.contact_link {
    grid-column: 1 / 13;
    grid-row: auto; 
    display: grid;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: .5rem;
    color: var(--color-text-header);
    background-color: var(--color-bg-main);
    font-family: var(--font-family_two);
}
.contact_link a {
    color: var(--color-text-header); 
    padding: .8rem;
    border: solid 3px var(--color-complementry-two);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}
.contact_link a:hover {    
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
}

details {
    grid-column: 2 / 12;
    grid-row: auto; 
    padding: .5rem 0;
    border-bottom: solid 1px rgba(137, 178, 234, .3);
}

summary {
    color: var(--color-text-header);
    font-family: var(--font-family_two);
    font-weight: 600;
}
.message {
    grid-column: 2 / 12;
    grid-row: auto; 
    justify-content: center;
    align-content: center;
}
/* -------- Form -------- */
form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    justify-content: center;
    align-content: center;
    grid-gap: .5rem;
    padding: .5rem;
}
input,
textarea {
    grid-column: 1 /5;
    font-size: 16px;
    height: auto;
    outline: 0;
    padding: 15px;
    border: 2px solid var(--color-text-header);
    border-radius: 5px;
}
label {    
    grid-column: 1 /5;
    font-family: var(--font-family_two);
    color: var(--color-text-header);
}
button {
    grid-column: 1 / 2;
    border-radius: 8px;
    color: var(--color-text-header); 
    padding: .8rem;
    border: solid 1px var(--color-complementry-two);
    font-family: var(--font-family_two);
    font-weight: 600;
    font-size: 1.1em;
}
button:hover {
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
}
.error {
    color: rgb(220, 20, 60);
}
form p {
    grid-column: 2 / 4;
}
/* -------- sitemap -------- */

.sitemap {
    grid-column: 2 / 12;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
}
.sitemap img {
    height: 120px;
    width: 150px;
}
.sitemap li {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: center;
    padding: .5rem;
    justify-content: center;
    justify-items: center;
    grid-gap: .5rem;
}
.sitemap a {
    text-decoration: underline;
    font-size: 1.4em;
    border: double 5px transparent;
}
/* -------- Error Page -------- */

.error_panel {
    grid-column: 2 / 12;
    grid-row: 2 / 3;
    text-align: center;
}
.error_panel p {
    color: var(--color-primary);
    font-family: var(--font-family_two);
    font-weight: 600;
    font-size: 1.2em;
}
/* -------- Footer -------- */

footer {
    min-height: 60px;
    justify-content: center;
    align-content: center;
}


/* -------- Footer 2 -------- */

.social {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
}
.copyright {
    grid-column: 1 / 7;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
    font-family: var(--font-family_two);
    color: var(--color-text-header);
}
.footer_menu {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.footer_menu li {
    display: grid;
}
.footer_menu li a { 
    text-decoration: underline;
    padding: .25rem;
    border: none;
}
.footer_menu a:link { 
    color: var(--color-nav-one); 
}
.footer_menu a:visited {
    color: var(--color-nav-one); 
}
.footer_menu a:hover {
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
}
.footer_menu a:focus { 
    color: var(--color-nav-two);
    background-color: var(--color-nav-one);
}
.social img {
    transition: all .5s ease-in-out; 
}
.social img:hover { 
    transform: scale(1.4); 
}

@media screen and (min-width: 320px) {
    html {
      font-size: calc(14px + 4 * ((100vw - 320px) / 680));
    }
  }

@media only screen and (min-width: 48em) { /* 768px */

    /* -------- Header -------- */
    header {    
        display: grid;
        width: 100%;
        height: auto;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    header .logo {
        grid-column: 1 / 3;
        grid-row: 1 / 4;
    }
    header nav {
        grid-column: 4 / 7;
        grid-row: 1 / 4;    
    }

    /* -------- Main -------- */

    .web,
    .vis,
    .host,
    .supp {
        justify-self: center;
    }
    .web {
        grid-column: 7 / 12;
        grid-row:  5 / 6;
    }    
    .vis {
        grid-column: 4 / 10;
        grid-row: 6 / 7;
    }    
    .host {
        grid-column: 2 / 7;
        grid-row: 7 / 8;   
    }    
    .supp {
        grid-column: 7 / 12;
        grid-row: 7 / 8;  
    }  
    .website_guide {
        grid-template-columns: auto;
        grid-template-rows: 1fr;
    }
    .website_guide_text {
        grid-column: 1 / 2;
    }
    .website_guide_img {
        grid-column: 2 / 3;
    }  
    .service_page .web {
        grid-column: 2 / 7;
        grid-row: 2 / 3;
        min-height: 183px;
    }    
    .service_page .vis {
        grid-column: 7 / 12;
        grid-row: 2 / 3;
        min-height: 183px;
    }    
    .service_page .host {
        grid-column: 2 / 7;
        grid-row: 3 / 4;   
    }    
    .service_page .supp {
        grid-column: 7 / 12;
        grid-row: 3 / 4;  
    }
    .services_links {
        grid-column: 1 / 13;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 1rem;
    }
    .services_tag {
        grid-column: 2 / 7;
        grid-row: 5 / 6;    
    }
    .service_list_tag {
        grid-column: 2 / 6;
        justify-self: end;
    }
    .service_list {
        grid-column: 7 / 13;
        justify-self: start;
    }
    .contact .panel_text{
        grid-column: 2 / 7;
        grid-row: auto; 
    }
    .message {
        grid-column: 7 / 12;
        grid-row: auto; 
    }
    .text_panel_half {
        grid-column: 2 / 8;
        grid-row: auto; 
    }
    .text_center_half_panel {
        grid-column: span 6;
        grid-row: auto; 
        display: flex; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }      
    .text_panel_img {
        grid-column: 8 / 12;
        grid-row: auto;  
    }
    .page_img {
        grid-column: 6 / 13;
        grid-row: auto; 
    }
    .service .services_links {
        grid-column: 1 / 6;
        grid-row: auto; 
    }
    .services_panel {
        grid-template-columns: repeat(2, 1fr);
    }   
    .sitemap li {
        grid-template-columns: repeat(2, 1fr);
    }

    /* -------- Footer -------- */
    
    footer {
        grid-template-rows: minmax(80px, 1fr);
    }
    .copyright {
    grid-column: 1 / 7;
    grid-row: auto;
    }
    .footer_menu {
        justify-self: center;
    }
    .social {
        grid-column: 4 / 7;
        grid-row: 1 / 2;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }
}
@media only screen and (min-width: 50em) { /* 800px */

    .tagline img {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        justify-self: center;
    }
    .big {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        font-size: 1.8em;
        justify-self: center;
    }
    .small {
        grid-column: 3 / 5;
        grid-row: 2 / 3;
        font-size: 1.4rem;
    }
}
@media only screen and (min-width: 62.5em) { /* 1000px */    
    .tagline img {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
        justify-self: center;
    }
    .big {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        font-size: 1.8em;
        justify-self: center;
    }
    .text_panel_small {
        grid-column: 2 / 6;
        grid-row: auto;  
    }
    .text_panel_img_large {
        grid-column: 6 / 12;
        grid-row: auto;
        padding-left: 2rem;  
    }
}

/**
 * VS theme by Andrew Lock (https://andrewlock.net)
 * Inspired by Visual Studio syntax coloring
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #393A34;
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	font-size: 1rem;
	line-height: 1.2;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre > code[class*="language-"] {
	font-size: 1rem;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	background: #C1DEF1;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	background: #C1DEF1;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 0 1em 1em;
	margin: .5em 0;
	overflow: auto;
/*	border: 1px solid #dddddd; */
	background-color: white;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .2em;
	padding-top: 1px;
	padding-bottom: 1px;
/*	background: #f8f8f8;
	border: 1px solid #dddddd; */
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #008000;
	font-style: italic;
}

.token.namespace {
	opacity: .7;
}

.token.string {
	color: #A31515;
}

.token.punctuation,
.token.operator {
	color: #393A34; /* no highlight */
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
	color: #36acaa;
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*="language-css"] {
	color: #0000ff;
}

.token.function {
	color: #393A34;
}

.token.deleted,
.language-autohotkey .token.tag {
	color: #9a050f;
}

.token.selector,
.language-autohotkey .token.keyword {
	color: #00009f;
}

.token.important {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.class-name,
.language-json .token.property {
	color: #2B91AF;
}

.token.tag,
.token.selector {
	color: #800000;
}

.token.attr-name,
.token.property,
.token.regex,
.token.entity {
	color: #ff0000;
}

.token.directive.tag .tag {
	background: #ffff00;
	color: #393A34;
}

/* overrides color-values for the Line Numbers plugin
 * http://prismjs.com/plugins/line-numbers/
 */
.line-numbers.line-numbers .line-numbers-rows {
	border-right-color: #a5a5a5;
}

.line-numbers .line-numbers-rows > span:before {
	color: #2B91AF;
}

/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight.line-highlight {
	background: rgba(193, 222, 241, 0.2);
	background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
	background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}