*, :after, :before {
    box-sizing: border-box;
}
:root {
    --base-header-height: 5rem;
    --base-footer-height: 4rem;
    --base-header-menu-item-number: 4;

    --main-text-color: #4f0000;

    --bg-white-color: #fff;
    --bg-blue-color: rgb(79, 158, 255);

    --page-bg-color: var(--bg-white-color);

    --base-header-bg-color-opaque: #fff568;
    --base-header-bg-color: #fff56899;
    /* --base-header-bg-color: #3065c7; */
    /* --base-header-bg-color: rgb(204, 201, 0); */
    --link-text-color: rgb(73, 167, 255);
    /* --link-text-color: #3065c7; */
}

:root {
    --size-x-small: 4px;
    --size-small: 8px;
    --size-normal: 16px;
    --size-bigger: 24px;
    --size-large: 48px;
    --size-x-large: 96px;
}

@media screen and (max-width: 720px) {
    :root {
        font-size: 12px;
    }
}

@media screen and (max-width: 1080px) {
    :root {
        font-size: 14px;
    }
}

body {
    margin: 0 auto;
    width: 100%;
    font-family: 'Prompt', sans-serif;
    color: var(--main-text-color);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link-text-color);
}
a.outer::after {
    content: " ↗";
    width: 16px; height: 16px;
}
a.same::after {
    content: " ↩";
    width: 16px; height: 16px;
}

p {
    margin: 0;
}

.tg-normal {
    font-size: var(--size-normal);
}
.tg-bigger {
    font-size: var(--size-bigger);
}

.mg-b-auto {
    margin-block: auto;
}
.mg-b-normal {
    margin-block: var(--size-normal);
}
.mg-b-bigger {
    margin-block: var(--size-bigger);
}

.d-flex {
    display: flex;
}
.d-flex.row {
    flex-direction: row;
}
.d-flex.col {
    flex-direction: column;
}
.d-flex.center, .d-flex.center.both {
    align-items: center;
    justify-content: center;
}
.d-flex.y-center {
    justify-content: space-around;
}
.d-flex.x-expand {
    align-items: center;
}
.d-flex.x-expand.y-center {
    align-items: center;
    justify-content: space-around;
}

.d-hidden {
    display: none !important;
}

#base-main {
    width: 100%;
    padding: 12px 24px 0;
}

#base-footer {
    padding-block: 16px;

    text-align: center;
}