/** Text **/
body{
    color:rgba($black,.6);
    font-size:16px;
    font-family:$mainFont;
    line-height:26px;
    @include media-min($sm){
        font-size:18px;
        line-height:30px;
    }
    &.dark-mode{
        color:rgba($white,.6);
        background:$darkBg;
    }
}
p{
    margin:0 0 .5em 0;
}

/** Custom selection color **/
::selection {
    color: rgba($black,.87);
    background: $yellow;
}
body.dark-mode ::selection{
    color:$white;
}

/** Headings **/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
    margin:0 0 .5em 0;
    color:$black;
    font-weight:400;
    font-family:$mainFont;
    line-height:130%;
    @include media-min($sm){
        line-height:120%;
    }
    strong{
        font-weight:600;
    }
}
body.dark-mode h1, body.dark-mode .h1,
body.dark-mode h2, body.dark-mode .h2,
body.dark-mode h3, body.dark-mode .h3,
body.dark-mode h4, body.dark-mode .h4,
body.dark-mode h5, body.dark-mode .h5,
body.dark-mode h6, body.dark-mode .h6{ 
    color:$white;
}
h1, .h1{
    font-size:1.6875em;
    @include media-min($sm){
        font-size:2.22em;
    }
}
h2, .h2{
    font-size:1.5em;
    @include media-min($sm){
        font-size:1.77em;
    }
}
h3, .h3{
    font-size:1.3125em;
    line-height:135%;
    @include media-min($sm){
        font-size:1.33em;
    }
}
h4, .h4{
    font-weight:600;
    font-size:1em;
    line-height:135%;
}

/** Code snippets **/
.code{
    display:block;
    margin-bottom:.75em;
    font-family:$codeFont;
    @include media-min($sm){
        margin-bottom:1em;
    }
    &--white{
        color:$white;
    }
    &--purple{
        color:$purple;
    }
    &--blue{
        color:$lightBlue;
    }
    &--green{
        color:$oliveGreen;
    }
    &--grey{
        color:#777777;
    }
    &--yellow{
        color:#fad437;
    }
    &--indent{
        padding-left:2em;
    }
}