@import url("reset.css");
@import url("fonts.css");
@import url("variables.css");
@import url("components.css");

.body {
    font-family: var(--base-font), serif;
    line-height: var(--standard-line-height);
}

.section {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: var(--space-medium);
}

.h1 {
    padding-block: var(--space-small);
    font-size: var(--font-size-xxxxlarge);
    font-weight: var(--font-weight-extrabold);
}

.h2 {
    padding-block: var(--space-small);
    font-size: var(--font-size-xxxlarge);
    font-weight: var(--font-weight-bold);
}

.h3 {
    padding-block: var(--space-small);
    font-size: var(--font-size-xxlarge);
    font-weight: var(--font-weight-semibold);
}

.h4 {
    padding-block: var(--space-small);
    font-size: var(--font-size-xlarge);
}

.h5 {
    padding-block: var(--space-small);
    font-size: var(--font-size-large);
}

.h6 {
    padding-block: var(--space-small);
    font-size: var(--font-size-medium);
}

.text {
    max-width: 80ch;
    font-size: var(--font-size-regular);

    :not(.last) {
        padding-bottom: var(--space-xsmall);
    }
}

.small {
    font-size: var(--font-size-small);
}

.x-small {
    font-size: var(--font-size-xsmall);
}