application.css

@import './utils/flow.css';
@import './utils/variables.css';
@import './utils/fonts.css';
@import './utils/animations.css';
@import './components/alerts.css';
@import './components/avatars.css';
@import './components/anchors.css';
@import './components/buttons.css';
@import './components/cards.css';
@import './components/forms.css';
@import './components/groupnavs.css';
@import './components/header.css';
@import './components/icons.css';
@import './components/illustrations.css';
@import './components/stickers.css';
@import './components/layout.css';
@import './components/lines.css';
@import './components/lists.css';
@import './components/modal.css';
@import './components/paragraphs.css';
@import './components/pagination.css';
@import './components/popup.css';
@import './components/sections.css';
@import './components/tags.css';
@import './components/titles.css';
@import './custom/collections.css';
@import './custom/collections-selector.css';
@import './custom/feeds.css';
@import './custom/form-avatar.css';
@import './custom/groups.css';
@import './custom/links.css';
@import './custom/messages.css';
@import './custom/news.css';
@import './custom/profiles.css';
@import './custom/reading-nav.css';
@import './custom/share.css';
@import './custom/topics-selector.css';

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

body {
    margin: 0;
    padding: 0;

    color: var(--color-text);
    font-family: var(--font-family-text);
    font-size: var(--size-base);

    background: linear-gradient(to bottom, var(--color-body), var(--color-purple-1) 420px);
}

*:focus {
    outline: var(--width-border-bold) solid var(--color-purple-4);
}

.sr-only {
    position: absolute;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    width: 1px;
    height: 1px;
}

.js-only {
    display: none;
}

@media (max-width: 799px) {
    .no-mobile {
        display: none;
    }
}

@media (min-width: 800px) {
    .only-mobile {
        display: none;
    }
}

.accessibility-nav {
    position: absolute;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    width: 1px;
    height: 1px;
}

.accessibility-nav:focus {
    top: 0.75rem;
    left: 2rem;

    clip: auto;

    width: auto;
    height: auto;
}

hr {
    width: 50%;
    height: 0.3rem;
    margin: var(--space-larger) auto;

    background: linear-gradient(to right, var(--color-turquoise-2), var(--color-turquoise-4), var(--color-turquoise-2));
    border: none;
    border-radius: 2em;
}

.turbo-progress-bar {
    position: fixed;
    top: 0;

    height: 0.5rem;

    background: linear-gradient(to right, var(--color-turquoise-5), var(--color-purple-5));
}