/**

Theme Name: INDNetNew
Theme Description: INDNetNew description

*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    border-style: solid;
}

img,
embed,
object,
video {
    max-width: 100%;
}

textarea {
    width: 96%
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/

/**, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}*/


body {
    font-family: 'Roboto', Tahoma, Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: #eee;
    background-image: url(https://www.industrian.net/assets/img/hello-world1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-blend-mode: overlay;
    background-size: cover;
}

button {}

.clearfix {}

ul,
li {
    margin: 0;
    list-style: none;
    list-style-image: none;
}

a {
    color: #555;
    text-decoration: none;
}

li a {
    font-size: 1em;
    line-height: normal;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    /*font-size:1.025em;*/
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.navIcons a:hover {
    font-size: 1em;
}


.shadow {
    -moz-box-shadow: inset 0 0 30px 10px #999;
    -webkit-box-shadow: inset 0 0 30px 10px #999;
    box-shadow: inset 0 0 30px 10px #999;
}

.highlighthover:hover {
    background-color: #FAFAFA;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


h1 {
    font-family: 'Play', sans-serif;
    font-size: 2em;
    color: #222;
    padding: 1% 0;
}

h2 {
    font-size: 1.25em;
    color: #555;
    display: inline;
    font-family: 'play', sans-serif;
    padding: 0.5% 0;
}

h3 {
    padding: 0.5em;
    display: block;
    font-size: 1.25em;
    color: #444;
    /* display: inline; */
    /* padding: 0.25% 1em 0 0; */
    font-family: 'play', sans-serif;
}

h4 {
    font-size: 1.2em;
    color: #444;
    display: inline;
    /*padding: 0.25% 0 2% 0;*/
    font-family: 'play', sans-serif;
    vertical-align: middle;
}

p {
    font-size: 1.1em;
    line-height: 1.75em;
    color: black;
    display: block;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}



.column {
    width: 100%;
    height: 100%;
    /*background-color: #ccc;
    opacity: 88%;*/
    background-position: center;
    background-size: cover;
    /*float: left;*/
    /*border: 1px solid #999;*/
    margin: 1.5em 0.9%;
    /*padding: 1%;*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 0 1em 1em 0;
    box-shadow: 0.25em 0.25em 0.5em 0.15em darkgrey;
}

.bgimg {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.bgimg:hover {
    -ms-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01);
}

.one {
    width: 98%;
}

.two {
    width: 64.67%;
}

.onehalf {
    width: 48.2%;
}

.three {
    width: 31.33%;
}

.four {
    width: 23%;
}

.autoheight {
    height: auto;
}

.hugeheight {
    height: 512px;
}

.normalheight {
    height: 256px;
}

.smallheight {
    height: 128px;
    font-size: 1em !important;
}


.onehalf.normalheight h1 {
    font-size: 1.65em;
}

.onehalf.smallheight h1 {
    font-size: 1.5em;
}

.three.normalheight h1 {
    font-size: 1.65em;
}

.three.smallheight h1 {
    font-size: 1.5em;
}

.tinyheight {
    height: 64px;
}

.tinyheight h1 {
    font-size: 1.5em;
}

.four h1 {
    font-size: 1.25em;
}

#wrapper br {
    display: table;
    clear: both;
}

#headerLine {
    /*width:90%;*/
    text-align: center;
}

#logoText {
    font-family: 'Play', sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #333;
    vertical-align: 50%;
    display: inline-block;
    /*width: 24%;*/
}

.navIcons {
    display: inline-block;
    text-align: center;
    padding: 0 4.5%;
}

#searchInput {
    /*width: 18%;*/
    display: inline-block;
    vertical-align: 150%;
}

#navIconsContainer {
    display: inline-block;
    width: 50%;
}

/*#mobileNav{
	display:none;
}*/

#searchsubmit {
    background: url(https://www.industrian.net/assets/img/icons/search.png) no-repeat;
    background-size: cover;
    -moz-background-size: 100%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: none;
    overflow: hidden;
    right: 5%;
    top: 25%;
    position: absolute;
}

#searchform {
    /*padding: 2% 10% 2% 2%;*/
    position: relative;
    /*font-style: italic;
    color: #555 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    width: 84%;*/
}

#s {
    font-style: italic;
    color: #555;
    font-size: 1.2em;
}

.headerarea {
    position: absolute;
    width: 80%;
    /*border-top: 5px #000066 solid;*/
    border-bottom: 0 #000066 solid;
    background-color: #ccc;
    opacity: 88%;
    padding: 0.5em 1em 0.5em 1em;
}

.textboxarea {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    /*border-radius: 0 1em 1em 1em;*/
    border-radius: 0 1em 1em 0;
    border: 1px solid #D8DFEA;
    /*border-top: 0;*/
    /*border-left: 1px solid #D8DFEA;	*/
    /*border-right: 1px solid #D8DFEA;*/
}

.textboxheader {
    padding: 0.65em;
    border-bottom: 1px solid #D8DFEA;
    border-radius: 0 1em 0 0;
    border-right: 10px solid #D8DFEA;
    background-color: #ECEEF3;
}

.textboxarea ol {
    padding: 2% 5%;
}

.textboxarea li {
    list-style: decimal;
    list-style-position: inside;
    padding: 2.75% 0;
}

.floattop {
    top: 0;
    height: fit-content;
    border-top: 0;
    border-bottom: 5px;
}

.floatbottom {
    bottom: 0;
    border-bottom: 0;
    border-top: 5px;
}


.floatleft {
    left: 0;
    text-align: left;
    border-right: 10px solid;
}

.floatright {
    right: 0;
    text-align: right;
    border-left: 10px solid;
}

/* Determine the corner to make a radius*/

.floatleft.floatbottom {
    border-top-right-radius: 1em;
}

.floatleft.floattop {
    border-bottom-right-radius: 1em;
}

.floatright.floatbottom {
    border-top-left-radius: 1em;
    border-bottom-right-radius: 0.9em;
}

.floatright.floattop {
    border-bottom-left-radius: 1em;
    border-top-right-radius: 0.9em;
}

/* Color coding for border radius corners */

.news {
    border-color: blue;
}

.music {
    border-color: red;
}

.tutorials {
    border-color: green;
}

.articles {
    border-color: orange;
}

.blockLink {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.bgimg:hover {
    opacity: 95%
}

.bigIcons {
    /*width: 48px;*/
    vertical-align: middle;
    display: block;
}

.smallIcons {
    /*width: 24px;*/
    vertical-align: middle;
    padding: 1px;
}

.textboxarea p {
    padding: 0.75em;
}

.tinyheight p {
    padding: 0 0.75em;
    font-size: 0.95em;
}

/* Footer */

footer {
    text-align: center;
    padding: 1%;
}

footer p {
    padding: 0.5%;
}

/* Images */

.articleImage {
    /*width: 100%;*/
    /*height: 100%;*/
    display: block;
    padding: 1em;
    margin: auto;
}

.small {
    width: 50%;
    height: 50%;
}

.left {
    float: left;
}

.right {
    float: right;
}

/* Article content */

article {
    padding: 1.5em 2em;
}

article h1 {
    padding: 0 0.5em;
}

article h2 {
    font-size: 1.5em;
    padding: 0.75em 0.75em 0.75em 0;
    display: block;
}

/*article h2::before{content: "-- ";}*/
/*article h2::after{content: " --";}*/
article ul li {
    list-style: square !important;
    margin: 0 2em;
    padding: 1em !important;
}


article a {
    text-decoration: underline;
}

article .headerarea a {
    text-decoration: none;
}

article .headerarea a:hover {
    text-decoration: underline;
}

#articleInformation {}

#articleWriterDate {
    width: 50%;
    display: inline-block;
}

#articleShare {
    width: 50%;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
}

.socialSquare {
    cursor: pointer;
    margin: 0 0 0 10%;
}

#slideThumbs {
    padding: 0.5em;
    text-align: center;
}

#slideThumbs img {
    width: 20%;
    height: auto;
    cursor: pointer;
}

#slideShow {}

#slideText {
    text-align: center;
    font-style: italic;
    font-size: 1.5em;
}

.youTubeIframe {
    /*  width: 100%;
    height: 640px;*/
}

.steamBuyIframeContainer {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.categoryHeader {
    font-size: 1.1em;
    color: #444;
    display: inline;
    padding: 0.25% 1em 0 0;
    font-family: 'play', sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}

.latestNewestHeader {
    font-size: 1.2em;
    color: #444;
    display: inline;
    /* padding: 0.25% 0 2% 0; */
    font-family: 'play', sans-serif;
    vertical-align: middle;
    font-weight: bold;
}

.highlightNewPost::before {
    content: "NEW!";
    color: #FF0000;
    display: inline-block;
    font-weight: bold;
    padding: 0 2% 0 0;
    margin: 0 -1em 0 1em;
}

.socialLinks {
    text-align: center;
    font-weight: bold;
}


/* Code block section begins */

.codeBlock {
    display: inline-block;
    width: 100%;
    padding: 1em;
    border: 1px dashed #999999;
    background: #EEEEEE;
    margin: 1em 0;
}

/*.removeLeftPadding {padding-left: 3%!important;}*/

/*#codeBlock ul{padding-left:3%;}*/

.codeBlock ul,
.codeBlock li {
    font-family: 'Inconsolata', monospace;
    margin: -1em 1.25em;
    list-style: none !important;
    list-style-image: none;
    list-style-type: none;
    /*line-height: 18px;*/
}

.codeGrey {
    color: #808080;
}

.codeLightGrey {
    color: #959595;
}

.codeBlue {
    color: #0000FF;
}

.codeDarkBlue {
    color: #1F377F;
}

.codeTurq {
    color: #2B91AF;
}

.codeBrown {
    color: #74531F;
}

.codeGreen {
    color: #008000;
}

.codeRed {
    color: #A31515;
}

.codePurple {
    color: #8F08C4;
}

.editorNote {
    font-style: italic;
    text-align: center;
    background-color: #ECEEF3;
    border: 1px solid #D8DFEA;
    border-radius: 0 1em;
}

.editorNote a {
    font-style: normal;
    line-break: anywhere;
}


/* Code block section ends */

table {
    margin: 1.5em auto;
    width: 90%;
    text-align-last: center;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

table tr td {
    border: 1px solid;
    padding: 1em;
    vertical-align: middle;
    line-break: anywhere;
}

video {
    margin: 1em auto;
    display: block;
}


.textboxarea li a {
    margin: 0 0 0 1em;
}

/* Fonts */
/* vietnamese */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v20/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRL2l2eY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    font-display: swap;
}

/* latin-ext */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v20/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRP2l2eY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}

/* latin */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v20/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32lw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvtg2H68T.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    font-display: swap;
}

/* cyrillic */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvtE2H68T.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    font-display: swap;
}

/* greek */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvtY2H68T.woff2) format('woff2');
    unicode-range: U+0370-03FF;
    font-display: swap;
}

/* vietnamese */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvto2H68T.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    font-display: swap;
}

/* latin-ext */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvts2H68T.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}

/* latin */
@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/play/v12/6aez4K2oVqwIvtU2Hw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    font-display: swap;
}

/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    font-display: swap;
}

/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
    font-display: swap;
}

/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
    unicode-range: U+0370-03FF;
    font-display: swap;
}

/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    font-display: swap;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

/* Media queries for responsive layout */

@media only screen and (max-width : 640px) {
    #wrapper {
        width: 96%;
        margin: 1% auto;
    }

    .column {
        width: 98% !important;
    }

    .hugeheight,
    .normalheight,
    .smallheight,
    .tinyheight {
        max-height: 180px;
    }

    .textboxarea li {
        padding: 1.8% 0;
    }

    #navIconsContainer {
        display: block;
        width: auto;
        padding: 2.5%;
    }

    .textboxarea ol {
        padding: 0.5% 2.5%;
    }

    .youTubeIframe {
        height: 240px;
    }

    h1 {
        font-size: 1.65em;
    }

    .textboxarea p {
        font-size: 0.85em;
    }

    li a {
        font-size: 0.85em;
    }


    #articleWriterDate {
        width: 100%;
        display: block;
    }

    #articleShare {
        width: 100%;
        display: block;
        text-align: center;
        vertical-align: middle;
    }

    .socialSquare {
        margin: 0 6% 0 0;
    }

    .removeMargin {
        margin: 0
    }

    ;

    table {
        font-size: 0.8em;
    }

    .codeBlock ul,
    .codeBlock li {
        margin: -1em 0;
        line-break: anywhere;
    }

    .headerarea h2 {
        display: none;
    }

    article a {
        line-break: anywhere;
    }

}

/* Tablet or horizontal phone display */
@media only screen and (min-width : 641px) and (max-width : 1024px) {
    #wrapper {
        width: 96%;
        margin: 1% auto;
    }

    .hugeheight {
        height: 320px;
    }

    #logoText {
        display: block;
    }

    #navIconsContainer {
        display: block;
        width: auto;
        padding: 2.5%;
    }

    .three.normalheight h1 {
        font-size: 1.45em;
    }

    .four h1 {
        font-size: 1.15em;
    }

    .youTubeIframe {
        height: 360px;
    }

    .textboxarea p {
        font-size: 0.85em;
    }

    #articleWriterDate {
        width: 100%;
        display: block;
    }

    #articleShare {
        width: 100%;
        display: block;
        text-align: center;
        vertical-align: middle;
    }

    .socialSquare {
        margin: 0 10% 0 0;
    }

    table {
        font-size: 0.9em;
    }

    .codeBlock ul,
    .codeBlock li {
        margin: -1em 0;
    }

    .headerarea h2 {
        display: none;
    }

    article a {
        line-break: anywhere;
    }

    .removeMargin {
        margin: 0
    }

    ;
}

/* Normal desktop display */
@media only screen and (min-width : 1026px) {

    /*and (max-width : 1439px) {*/
    #wrapper {
        width: 80%;
        margin: 1% auto;
    }
}

/* Dark mode */

@media screen and (prefers-color-scheme: dark) {
    body {
        background-color: #111;
        background-blend-mode: multiply;
    }

    .column {
        box-shadow: 0.25em 0.25em 0.5em 0.15em #222;
    }

    a {
        color: #ddd;
    }

    .textboxarea {
        background: #222;
        border: 1px solid #111;
    }

    .textboxheader {
        background-color: #333;
        border-right: 10px solid #444;
        border-bottom: 1px solid #444;
    }

    p {
        color: #ddd;
    }

    article ol {
        color: #ddd;
    }

    .textboxarea ol {
        color: #999;
    }

    article h1 {
        color: #eee;
    }

    .headerarea h1 {
        color: #222;
    }

    h2,
    h4 {
        color: #eee;
    }

    .latestNewestHeader {
        color: #eee;
    }

    table,
    ul {
        color: #eee;
    }

    .codeBlock {
        background: #555;
    }

    .codeGreen {
        color: greenyellow;
    }

    .codeBlue {
        color: lightskyblue;
    }

    .codeRed {
        color: red;
    }

    .codeBrown {
        color: sandybrown;
    }

    .codeTurq {
        color: paleturquoise;
    }

    .codePurple {
        color: palevioletred;
    }

    .codeDarkBlue {
        color: lightsteelblue;
    }

    .editorNote {
        background-color: #333;
        border: 1px solid #444;
    }

    .bigIcons {
        filter: invert(1);
    }

    .textboxheader .smallIcons {
        filter: invert(1);
    }

    .noFilterWhenDark {
        filter: none;
    }

    .headerarea h2 {
        color: #555;
    }
}

/* Code highlights */


/*code styling*/

.astro-code {
    background-color: #0d1117;
    overflow-x: auto;
    text-wrap: balance;
    padding: 1em;
    line-height: 1.5em;
    border-radius: 0 1em 1em 0;
}


code[class*="language-"],
pre[class*="language-"] {
    background: hsl(230, 1%, 98%);
    color: hsl(230, 8%, 24%);
    font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Selection */
code[class*="language-"]::-moz-selection,
code[class*="language-"] *::-moz-selection,
pre[class*="language-"] *::-moz-selection {
    background: hsl(230, 1%, 90%);
    color: inherit;
}

code[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
    background: hsl(230, 1%, 90%);
    color: inherit;
}

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    border-radius: 0.3em;
    width: fit-content;
    margin: 0 auto;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
    padding: 0.2em 0.3em;
    border-radius: 0.3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.cdata {
    color: hsl(230, 4%, 64%);
}

.token.doctype,
.token.punctuation,
.token.entity {
    color: hsl(230, 8%, 24%);
}

.token.attr-name,
.token.class-name,
.token.boolean,
.token.constant,
.token.number,
.token.atrule {
    color: hsl(35, 99%, 36%);
}

.token.keyword {
    color: hsl(301, 63%, 40%);
}

.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.important {
    color: hsl(5, 74%, 59%);
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.regex,
.token.attr-value,
.token.attr-value>.token.punctuation {
    color: hsl(119, 34%, 47%);
}

.token.variable,
.token.operator,
.token.function {
    color: hsl(221, 87%, 60%);
}

.token.url {
    color: hsl(198, 99%, 37%);
}

/* HTML overrides */
.token.attr-value>.token.punctuation.attr-equals,
.token.special-attr>.token.attr-value>.token.value.css {
    color: hsl(230, 8%, 24%);
}

/* CSS overrides */
.language-css .token.selector {
    color: hsl(5, 74%, 59%);
}

.language-css .token.property {
    color: hsl(230, 8%, 24%);
}

.language-css .token.function,
.language-css .token.url>.token.function {
    color: hsl(198, 99%, 37%);
}

.language-css .token.url>.token.string.url {
    color: hsl(119, 34%, 47%);
}

.language-css .token.important,
.language-css .token.atrule .token.rule {
    color: hsl(301, 63%, 40%);
}

/* JS overrides */
.language-javascript .token.operator {
    color: hsl(301, 63%, 40%);
}

.language-javascript .token.template-string>.token.interpolation>.token.interpolation-punctuation.punctuation {
    color: hsl(344, 84%, 43%);
}

/* JSON overrides */
.language-json .token.operator {
    color: hsl(230, 8%, 24%);
}

.language-json .token.null.keyword {
    color: hsl(35, 99%, 36%);
}

/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url>.token.operator,
.language-markdown .token.url-reference.url>.token.string {
    color: hsl(230, 8%, 24%);
}

.language-markdown .token.url>.token.content {
    color: hsl(221, 87%, 60%);
}

.language-markdown .token.url>.token.url,
.language-markdown .token.url-reference.url {
    color: hsl(198, 99%, 37%);
}

.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
    color: hsl(230, 4%, 64%);
    font-style: italic;
}

.language-markdown .token.code-snippet {
    color: hsl(119, 34%, 47%);
}

.language-markdown .token.bold .token.content {
    color: hsl(35, 99%, 36%);
}

.language-markdown .token.italic .token.content {
    color: hsl(301, 63%, 40%);
}

.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important>.token.punctuation {
    color: hsl(5, 74%, 59%);
}

/* General */
.token.bold {
    font-weight: bold;
}

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

.token.entity {
    cursor: help;
}

.token.namespace {
    opacity: 0.8;
}

/* Plugin overrides */
/* Selectors should have higher specificity than those in the plugins' default stylesheets */

/* Show Invisibles plugin overrides */
.token.token.tab:not(:empty):before,
.token.token.cr:before,
.token.token.lf:before,
.token.token.space:before {
    color: hsla(230, 8%, 24%, 0.2);
}

/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
div.code-toolbar>.toolbar.toolbar>.toolbar-item {
    margin-right: 0.4em;
}

/* Styling the buttons */
div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span {
    background: hsl(230, 1%, 90%);
    color: hsl(230, 6%, 44%);
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
}

div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover,
div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus {
    background: hsl(230, 1%, 78%);
    /* custom: darken(--syntax-bg, 20%) */
    color: hsl(230, 8%, 24%);
}

/* Line Highlight plugin overrides */
/* The highlighted line itself */
.line-highlight.line-highlight {
    background: hsla(230, 8%, 24%, 0.05);
}

/* Default line numbers in Line Highlight plugin */
.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
    background: hsl(230, 1%, 90%);
    color: hsl(230, 8%, 24%);
    padding: 0.1em 0.6em;
    border-radius: 0.3em;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
    /* same as Toolbar plugin default */
}

/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before {
    background-color: hsla(230, 8%, 24%, 0.05);
}

/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
.line-numbers.line-numbers .line-numbers-rows,
.command-line .command-line-prompt {
    border-right-color: hsla(230, 8%, 24%, 0.2);
}

/* Stuff in the gutter */
.line-numbers .line-numbers-rows>span:before,
.command-line .command-line-prompt>span:before {
    color: hsl(230, 1%, 62%);
}

/* Match Braces plugin overrides */
/* Note: Outline colour is inherited from the braces */
.rainbow-braces .token.token.punctuation.brace-level-1,
.rainbow-braces .token.token.punctuation.brace-level-5,
.rainbow-braces .token.token.punctuation.brace-level-9 {
    color: hsl(5, 74%, 59%);
}

.rainbow-braces .token.token.punctuation.brace-level-2,
.rainbow-braces .token.token.punctuation.brace-level-6,
.rainbow-braces .token.token.punctuation.brace-level-10 {
    color: hsl(119, 34%, 47%);
}

.rainbow-braces .token.token.punctuation.brace-level-3,
.rainbow-braces .token.token.punctuation.brace-level-7,
.rainbow-braces .token.token.punctuation.brace-level-11 {
    color: hsl(221, 87%, 60%);
}

.rainbow-braces .token.token.punctuation.brace-level-4,
.rainbow-braces .token.token.punctuation.brace-level-8,
.rainbow-braces .token.token.punctuation.brace-level-12 {
    color: hsl(301, 63%, 40%);
}

/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
pre.diff-highlight>code .token.token.deleted:not(.prefix),
pre>code.diff-highlight .token.token.deleted:not(.prefix) {
    background-color: hsla(353, 100%, 66%, 0.15);
}

pre.diff-highlight>code .token.token.deleted:not(.prefix)::-moz-selection,
pre.diff-highlight>code .token.token.deleted:not(.prefix) *::-moz-selection,
pre>code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
pre>code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
    background-color: hsla(353, 95%, 66%, 0.25);
}

pre.diff-highlight>code .token.token.deleted:not(.prefix)::selection,
pre.diff-highlight>code .token.token.deleted:not(.prefix) *::selection,
pre>code.diff-highlight .token.token.deleted:not(.prefix)::selection,
pre>code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
    background-color: hsla(353, 95%, 66%, 0.25);
}

pre.diff-highlight>code .token.token.inserted:not(.prefix),
pre>code.diff-highlight .token.token.inserted:not(.prefix) {
    background-color: hsla(137, 100%, 55%, 0.15);
}

pre.diff-highlight>code .token.token.inserted:not(.prefix)::-moz-selection,
pre.diff-highlight>code .token.token.inserted:not(.prefix) *::-moz-selection,
pre>code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
pre>code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
    background-color: hsla(135, 73%, 55%, 0.25);
}

pre.diff-highlight>code .token.token.inserted:not(.prefix)::selection,
pre.diff-highlight>code .token.token.inserted:not(.prefix) *::selection,
pre>code.diff-highlight .token.token.inserted:not(.prefix)::selection,
pre>code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
    background-color: hsla(135, 73%, 55%, 0.25);
}

/* Previewers plugin overrides */
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
/* Border around popup */
.prism-previewer.prism-previewer:before,
.prism-previewer-gradient.prism-previewer-gradient div {
    border-color: hsl(0, 0, 95%);
}

/* Angle and time should remain as circles and are hence not included */
.prism-previewer-color.prism-previewer-color:before,
.prism-previewer-gradient.prism-previewer-gradient div,
.prism-previewer-easing.prism-previewer-easing:before {
    border-radius: 0.3em;
}

/* Triangles pointing to the code */
.prism-previewer.prism-previewer:after {
    border-top-color: hsl(0, 0, 95%);
}

.prism-previewer-flipped.prism-previewer-flipped.after {
    border-bottom-color: hsl(0, 0, 95%);
}

/* Background colour within the popup */
.prism-previewer-angle.prism-previewer-angle:before,
.prism-previewer-time.prism-previewer-time:before,
.prism-previewer-easing.prism-previewer-easing {
    background: hsl(0, 0%, 100%);
}

/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
.prism-previewer-angle.prism-previewer-angle circle,
.prism-previewer-time.prism-previewer-time circle {
    stroke: hsl(230, 8%, 24%);
    stroke-opacity: 1;
}

/* Stroke colours of the handle, direction point, and vector itself */
.prism-previewer-easing.prism-previewer-easing circle,
.prism-previewer-easing.prism-previewer-easing path,
.prism-previewer-easing.prism-previewer-easing line {
    stroke: hsl(230, 8%, 24%);
}

/* Fill colour of the handle */
.prism-previewer-easing.prism-previewer-easing circle {
    fill: transparent;
}