cohost: add padding on the sides of the screen by knuxify

/* ==UserStyle==
@name         cohost: add padding on the sides of the screen
@version      20220702.07.57
@namespace    userstyles.world/user/knuxify
@description  fixes a small design nitpick: there's no side padding in many places, leaving elements like the logo in the navbar to stick directly to the edges of the screen. this is a lazy fix for that.
@author       knuxify
@license      CC0
==/UserStyle== */

@-moz-document domain("cohost.org") {
/* fixes a small design nitpick: there's no side padding in many places, leaving elements like the logo in the navbar to stick directly to the edges of the screen. this is a lazy fix for that. */

#root > #app > div > header {
    padding: 0 24px;
}

#root > #app > div > div.flex > footer {
    padding:  2rem 24px 5rem 24px;
}

#root > #app > div > div.flex > main{
    padding: 12px 24px;
}

/* if we just slap padding on .container it will break profile pages,
   but will keep other pages (settings, followers etc.) broken. this fixes it. */

#root > #app > div > div.flex > .container > ul {
    margin-left: 24px;
}

/* more missing padding: in the following/follower lists! */
.flex.flex-row.items-center.gap-1 > .min-w-0.flex-shrink.justify-center.gap-0.lg\:flex-row {
    padding: 0 12px;
}
.mt-6.flex.flex-col.gap-4 {
    margin: 16px 0;
}

/* without this, the posts on the timeline get less wide, which can cause small breakage in some posts */
main > .container.gap-16 {
    gap: calc(4rem - 50px);
}
}