@function pow($number, $exponent) {
    $value: 1;

    @if $exponent > 0 {
        @for $i from 1 through $exponent {
            $value: $value * $number;
        }
    }

    @return $value;
}

@mixin geometric-headings {
    $base-font-size: 16px;
    $heading-scale: 1.33;

    @for $i from 1 through 5 {
        $factor: pow($heading-scale, 5 - $i);

        h#{$i} {
            font-size: $base-font-size * $factor;
            font-family: 'Source Sans Pro', monospace;
            font-weight: 400;
            margin-bottom: 0.25rem;
        }

        p + h#{$i} {
            margin-top: 0.5rem * $factor;
        }
    }
}

@include geometric-headings;

.text-content {
    & > * {
        max-width: 46rem;
    }

    pre,
    code {
        background: #f0f0f0 !important;

        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
        font-size: 16px;
    }

    code {
        border-radius: 0.25rem;
        padding: 0.125rem;
    }

    pre {
        margin: 1rem auto;

        padding: 0.5rem;

        width: 100%;
        max-width: 80ch;

        line-height: 1.5;

        border-radius: 0.5rem;

        box-shadow: 0.25rem 0.25rem 0 0 #777;

        code {
            padding: 0;
        }
    }

    p {
        line-height: 1.65;
        margin: 0.5rem auto;
    }

    @include geometric-headings;

    h1 {
        margin-bottom: 2rem;
        text-align: center;
    }

    padding: 2rem 0 3rem;

    @media screen and (max-width: 1024px) {
        & > * {
            margin: 0 0.75rem;
        }
    }
}