@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import './variables';
@import './sidebar';
@import './contribute';
@import './code';
@import './layout/compare';

body{
    font-family: $font-primary;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: normal;
    background: #fafafa;
    color: $dark;
}

p {
    max-width: 45rem;
}
li {
    max-width: 40rem;
}

a {
    transition: .3s all ease;
    color: $darkGreen;
    &:hover, &:focus {
        color: darken($darkGreen, 25%);
        text-decoration: underline;
        outline: none !important;
        box-shadow: none;
    }
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    line-height: 1.5;
    font-weight: 400;
    font-family: $font-primary;
    color: $black;
}

h2, .h2 {
    margin-top: 2rem;
    border-bottom: 1px solid $gray-300;
}

h3, .h3 {
    margin-top: 1.5rem;
    font-size: 1.4rem;
}
h4, .h4 {
    font-size: 1.15rem;
}

.headerlink {
    font-size: 80%;
    font-weight: 400;
    padding-left: 7px;
    text-decoration: none;
    color: $gray-500;

    &:hover, &:focus {
        color: $darkGreen;
    }
}

.content {
    width: 100%;
    padding: 0;
    min-height: 100vh;
    transition: all 0.3s;
}

table {
    max-width: 100%;
    margin-bottom: 1rem;
    img {
        max-width: 100%;
    }
    td, th {
        padding-right: 1rem;
    }
}

blockquote {
    margin-left: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-left: 10px solid $red;

    > p:last-child {
        margin-bottom: 0;
    }
}

img {
    max-width: 100%;
}

@include media-breakpoint-down(md) {
    .no-mobile-x-scroll {
        overflow-x: hidden;
    }
}
