html {
    font-size: 62.5%;
}

body {
    font-family: Ubuntu, sans-serif;
}

.typography-wrapper {
    color: var(--color-text);
    font-size: var(--font-size-body-fluid);
    line-height: var(--line-height-body);
    word-break: break-word;

    > *:first-child {
        margin-top: 0;
    }

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

    h1, h2, h3 {
        line-height: var(--line-height-heading);
    }

    h1 {
        font-size: var(--font-size-h1-fluid);
    }

    h2 {
        font-size: var(--font-size-h2-fluid);
    }

    h3 {
        font-size: var(--font-size-h3-fluid);
    }

    sub {
        font-size: var(--font-size-small-fluid);
        line-height: var(--line-height-small);
    }

    .text-color-purple {
        color: var(--color-primary);
    }

    .text-color-grey {
        color: var(--color-secondary);
    }

    .text-color-white {
        color: #ffffff;
    }

    .text-color-black {
        color: #000000;
    }

    a {
        color: inherit;
        transition: color .3s ease;

        &:hover {
            color: var(--color-primary);
        }
    }

}