:root {
    --primary-navigation__link-list-link-padding-x: .25rem;
    --primary-navigation__link-list-link-padding-y: .5rem;
}

.page-footer, .primary-navigation {
    background: #292929;
    display: flex;
}

.page-footer a:hover, .primary-navigation a:hover {
    color: #ffe755;
}

.page-footer a,
.page-footer nav,
.primary-navigation a,
.primary-navigation nav {
    color: #e6e6e6;
    text-decoration: none;
    padding: var(--text-normal);
}

.primary-navigation__app-title-link {
    flex-grow: 1;
    flex-shrink: 0;
}

.primary-navigation__app-title {
    font-size: 2rem;
}

.primary-navigation__app-slogan::after {
    content: url("icons/vendor/noto-emoji/emoji_u270c.svg");
    width: calc(var(--text-normal));
    display: inline-block;
    animation-name: flip-characters;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay: 4s;
    margin-left: .125rem;
}

@keyframes flip-characters {
    0% {
        transform: rotateY(0deg);
    }
    10% {
        transform: rotateY(180deg);
    }
    15% {
        transform: rotateY(180deg);
    }
    25% {
        transform: rotateY(0deg);
    }
}

.page-footer__link-list,
.primary-navigation__link-list {
    align-self: center;
}

.page-footer__link-list ul,
.primary-navigation__link-list ul {
    margin: 0 calc(-1 * var(--primary-navigation__link-list-link-padding-x));
    padding: 0;
    text-align: right;
}

.page-footer__link-list li,
.primary-navigation__link-list li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-footer__link-list li a,
.primary-navigation__link-list li a {
    padding: var(--primary-navigation__link-list-link-padding-y) var(--primary-navigation__link-list-link-padding-x);
    display: block;
}

@media (max-width: 36em) {
    .primary-navigation {
        /* Move links to second row on mobiles. */
        flex-wrap: wrap;
    }

    .primary-navigation__app-title-link,
    .primary-navigation__link-list {
        /* Enforce full width on mobiles. */
        flex-basis: 100%;
    }

    .primary-navigation__link-list {
        /**
         * Set a different background color.
         * Otherwise, the padding of the title links
         * and the padding of the links look strange.
         */
        background: var(--rptu-petrol);
    }

    .primary-navigation__link-list ul {
        /* Desktop mode renders links on the right side. */
        text-align: left;
    }
}