.footer { width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem; background-color: var(--color-bg-light); /* NOTE: This fixes the partial edges when blur is active */ -webkit-box-shadow: 0 2rem 0 2rem var(--color-bg-light); -moz-box-shadow: 0 2rem 0 2rem var(--color-bg-light); box-shadow: 0 2rem 0 2rem var(--color-bg-light); } .footer > div { flex-grow: 1; flex-shrink: 1; flex-basis: 0px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; } @media only screen and (max-width: 1000px) { .footer > div { flex-basis: 100%; justify-content: center !important; } } .footer > div a { font-size: 1rem; color: var(--theme); } .footer > div a:hover { text-decoration: underline; } .footer .delimiter { color: var(--color-gray); } .footer .brand { justify-content: flex-start; } .footer .legal { justify-content: flex-end; } .footer .brand img { height: 2rem; } .footer .brand .version { color: var(--color-gray); } .footer .lang .selected { font-weight: bold; color: inherit; }