@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@site-mobile-width: 800px;
@font-size: 12px;
@line-height: 20px;

:root {
    --site-max-width: 1200px;

    --background-image: initial;
    --background-colour: #111;
    --background-colour-translucent: fade(#111, 93%);
    --background-pattern: url('/images/clouds.png') fixed;

    --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);
}

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

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

.main {
    display: flex;
    flex-direction: column;
    background-image: var(--background-image);
    background-color: var(--background-colour);
    font: @font-size/@line-height @mio-font-regular;
    color: var(--text-colour);
    background-attachment: fixed;
    background-position: center center;

    &__wrapper {
        max-width: var(--site-max-width);
        width: 100%;
        margin: 0 auto;
        flex: 1 0 auto;
    }

    &--bg-blend {
        background-color: var(--accent-colour);
        background-blend-mode: multiply;
    }

    &--bg-slide {
        animation: background-slide infinite linear 2s;
    }

    &--bg-cover {
        background-size: cover;
    }

    &--bg-contain {
        background-size: contain;
    }

    &--bg-stretch {
        background-size: 100% 100%;
    }

    &--bg-tile {
        background-size: auto;
    }
}

// Misc
@import "animations";
@import "link";
@import "markdown";

// Input elements
@import "classes/input/button";
@import "classes/input/select";
@import "classes/input/text";
@import "classes/input/textarea";
@import "classes/input/upload";
@import "classes/input/checkbox";

// Base styles
@import "classes/avatar";
@import "classes/container";
@import "classes/flag";
@import "classes/navigation";
@import "classes/pagination";
@import "classes/warning";

// Specific styles
@import "classes/footer";
@import "classes/header";
@import "classes/index";
@import "classes/permissions";
@import "classes/auth";
@import "classes/chat-quote";

// Manage
@import "classes/manage/manage";
@import "classes/manage/navigation";

// Profile
@import "classes/profile/profile";
@import "classes/profile/header";
@import "classes/profile/accounts";
@import "classes/profile/about";
@import "classes/profile/guidelines";
@import "classes/profile/background-settings";

// Changelog
@import "classes/changelog";
@import "classes/changelog-actions-tags";

// Settings
@import "classes/settings/container";
@import "classes/settings/description";
@import "classes/settings/disabled";
@import "classes/settings/pagination";
@import "classes/settings/account";
@import "classes/settings/account-log";
@import "classes/settings/account-logs";
@import "classes/settings/login-attempt";
@import "classes/settings/login-attempts";
@import "classes/settings/session";
@import "classes/settings/sessions";
@import "classes/settings/role";

// News
@import "classes/news/container";
@import "classes/news/list";
@import "classes/news/preview";
@import "classes/news/sidebar";
@import "classes/news/post"; // post needs to be able to override sidebar

// Forums
@import "classes/forum/actions";
@import "classes/forum/categories";
@import "classes/forum/category";
@import "classes/forum/post";
@import "classes/forum/posting";
@import "classes/forum/topic";
@import "classes/forum/topics";
@import "classes/forum/status";
@import "classes/forum/header";

// User stuff
@import "classes/usercard";
@import "classes/userlist";

// Comments
@import "classes/comment"; // entries
@import "classes/comments"; // listing