misuzu/assets/misuzu.css/main.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

[hidden],
.hidden {
    display: none !important;
    visibility: hidden !important;
}

:root {
    --font-size: 12px;
    --line-height: 20px;
    --font-regular: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
    --font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    --site-max-width: 1200px;
    --site-mobile-width: 800px;
    --site-logo: url('/images/logos/imouto-default.png');

    --header-height-desktop: 70px;
    --header-height-mobile: 50px;

    --background-image: initial;
    --background-colour: #111;
    --background-colour-translucent-1: rgba(17, 17, 17, 0.1);
    --background-colour-translucent-2: rgba(17, 17, 17, 0.2);
    --background-colour-translucent-3: rgba(17, 17, 17, 0.3);
    --background-colour-translucent-4: rgba(17, 17, 17, 0.4);
    --background-colour-translucent-5: rgba(17, 17, 17, 0.5);
    --background-colour-translucent-6: rgba(17, 17, 17, 0.6);
    --background-colour-translucent-7: rgba(17, 17, 17, 0.7);
    --background-colour-translucent-8: rgba(17, 17, 17, 0.8);
    --background-colour-translucent-9: rgba(17, 17, 17, 0.9);
    --background-pattern: url('/images/clouds.png') fixed;

    --container-colour: #161616;

    --text-colour: #fff;
    --text-colour-inverted: #000;

    --user-colour: inherit;
    --user-header: url('/images/pixel.png');
    --accent-colour: #8559a5;
    --header-accent-colour: var(--accent-colour);
}

html {
    scrollbar-color: var(--accent-colour) var(--background-colour);
}

.main {
    display: flex;
    flex-direction: column;
    background-image: var(--background-image);
    background-color: var(--background-colour);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-family: var(--font-regular);
    color: var(--text-colour);
    background-attachment: fixed;
    background-position: center center;
}
.main__wrapper {
    max-width: var(--site-max-width);
    width: 100%;
    margin: 0 auto;
    flex: 1 0 auto;
}

.main--bg-blend {
    background-color: var(--accent-colour);
    background-blend-mode: multiply;
}
.main--bg-slide   { animation: background-slide infinite linear 2s; }
.main--bg-cover   { background-size: cover; }
.main--bg-contain { background-size: contain; }
.main--bg-stretch { background-size: 100% 100%; }
.main--bg-tile    { background-size: auto; }

.link {
    color: var(--accent-colour);
    text-decoration: none;
}
.link:hover, .link:focus { text-decoration: underline; }

@comment "convert all of the below into a proper inclusion structure";

@include animations.css;
@include avatar.css;
@include bb.css;
@include confirm.css;
@include container.css;
@include eeprom.css;
@include embed.css;
@include emoticon.css;
@include flags.css;
@include footer.css;
@include header.css;
@include impersonate.css;
@include landing.css;
@include main.css;
@include markdown.css;
@include messagebox.css;
@include navigation.css;
@include pagination.css;
@include permissions.css;
@include warning.css;

@include _input/button.css;
@include _input/checkbox.css;
@include _input/colour.css;
@include _input/select.css;
@include _input/text.css;
@include _input/textarea.css;
@include _input/upload.css;

@include auth/buttons.css;
@include auth/container.css;
@include auth/label.css;
@include auth/login.css;
@include auth/logout.css;
@include auth/register.css;
@include auth/warning.css;

@include changelog/_changelog.css;
@include changelog/change.css;
@include changelog/container.css;
@include changelog/entry.css;
@include changelog/listing.css;
@include changelog/log.css;
@include changelog/pagination.css;

@include comments/comment.css;
@include comments/comments.css;

@include forum/actions.css;
@include forum/categories.css;
@include forum/confirm.css;
@include forum/header.css;
@include forum/leaderboard.css;
@include forum/poll.css;
@include forum/post.css;
@include forum/priority.css;
@include forum/status.css;
@include forum/topics.css;

@include home/landingv2-footer.css;
@include home/landingv2-header.css;
@include home/landingv2.css;

@include manage/_manage.css;
@include manage/blacklist.css;
@include manage/changelog-actions-tags.css;
@include manage/emote.css;
@include manage/emotes.css;
@include manage/navigation.css;
@include manage/role-item.css;
@include manage/roles.css;
@include manage/settings.css;
@include manage/statistic.css;
@include manage/statistics.css;
@include manage/tag.css;
@include manage/tags.css;
@include manage/user-item.css;
@include manage/user.css;
@include manage/users.css;

@include news/container.css;
@include news/feeds.css;
@include news/list.css;
@include news/post.css;
@include news/preview.css;
@include news/sidebar.css;

@include profile/about.css;
@include profile/accounts.css;
@include profile/birthdate.css;
@include profile/forum-activity.css;
@include profile/guidelines.css;
@include profile/header.css;
@include profile/profile.css;
@include profile/relations.css;
@include profile/signature.css;
@include profile/warning.css;

@include search/anchor.css;
@include search/categories.css;
@include search/container.css;
@include search/header.css;
@include search/input.css;
@include search/none.css;

@include settings/account-logs.css;
@include settings/account.css;
@include settings/data.css;
@include settings/login-attempts.css;
@include settings/role.css;
@include settings/sessions.css;
@include settings/settings.css;
@include settings/two-factor.css;

@include user/usercard.css;
@include user/userlist.css;