@import url('./variables.css');
@import url('./theme.css');

:link {
    color: var(--color-grey);
}

:visited {
    color: var(--color-red);
}

.page {
    background-color: var(--color-white);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    margin: 0 0 0 0;
    overflow: hidden;

    & .page__header {
        border-bottom: 1px solid var(--color-blue);
        font-size: 2.5rem;
        font-weight: bold;
        flex: 0 0 auto;
        line-height: 2rem;
        margin-inline: 2rem;
        padding-block: 1rem;
        padding-inline: 1rem;
    }

    & .page__content {
        flex: 1 1 auto;
        overflow: auto;
        margin-inline: 2rem;
        padding-block: 2rem;

        &.page__content--splitted {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 1rem;
        }

        &.page__content--splitted[columns] {
            display: grid;
            grid-template-columns: repeat(attr(columns type(<number>)), 1fr);
            grid-column-gap: 1rem;
        }
    }

    & .page__footer {
        background-color: var(--color-blue);
        border-bottom: 1px solid var(--color-grey);
        border-top: 1px solid var(--color-grey);
        color: var(--color-white);
        flex: 0 0 auto;
        padding-block: 1rem;
        padding-inline: 1rem;
    }
}