html {
    font-family: Alte Haas Grotesk, serif;
    font-size: var(--main-font-size);
    line-height: var(--main-line-height);
    scroll-behavior: smooth;
}

html,
body {
    overflow: hidden;
}

.content {
    display: grid;
    grid-template-rows: repeat(3, 100dvh);
    grid-template-columns: 100dvw;
}

.page {
    display: grid;
    justify-items: center;
    align-items: center;
    padding: var(--main-padding);
}

.page:nth-child(odd) {
    color: var(--primary-color);
    background-color: var(--primary-background-color);
}

.page:nth-child(even) {
    color: var(--secondary-color);
    background-color: var(--secondary-background-color);
}

.page__link {
    color: var(--link-color);
}

@media (hover: hover) {
    .page__link:hover {
        color: var(--hover-link-color);
    }
}

.page__title {
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
}

.page__text {
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
}