@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;

@site-max-width: 1200px;
@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: fade(@background-colour, 10%);
@background-colour-translucent-2: fade(@background-colour, 20%);
@background-colour-translucent-3: fade(@background-colour, 30%);
@background-colour-translucent-4: fade(@background-colour, 40%);
@background-colour-translucent-5: fade(@background-colour, 50%);
@background-colour-translucent-6: fade(@background-colour, 60%);
@background-colour-translucent-7: fade(@background-colour, 70%);
@background-colour-translucent-8: fade(@background-colour, 80%);
@background-colour-translucent-9: fade(@background-colour, 90%);
@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: #8559a5;

:root {
    --site-max-width: @site-max-width;
    --site-logo: @site-logo;

    --header-height-desktop: @header-height-desktop;
    --header-height-mobile: @header-height-mobile;

    --background-image: @background-image;
    --background-colour: @background-colour;
    --background-colour-translucent-1: @background-colour-translucent-1;
    --background-colour-translucent-2: @background-colour-translucent-2;
    --background-colour-translucent-3: @background-colour-translucent-3;
    --background-colour-translucent-4: @background-colour-translucent-4;
    --background-colour-translucent-5: @background-colour-translucent-5;
    --background-colour-translucent-6: @background-colour-translucent-6;
    --background-colour-translucent-7: @background-colour-translucent-7;
    --background-colour-translucent-8: @background-colour-translucent-8;
    --background-colour-translucent-9: @background-colour-translucent-9;
    --background-pattern: @background-pattern;

    --container-colour: @container-colour;

    --text-colour: @text-colour;
    --text-colour-inverted: @text-colour-inverted;

    --user-colour: @user-colour;
    --user-header: @user-header;
    --accent-colour: @accent-colour;
    --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%;
}

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

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

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

    &--bg-blend {
        background-color: @accent-colour;
        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;
    }
}

// Just in case.
[hidden] {
    display: none !important;
    visibility: hidden !important;
}

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

// Input elements
@import "input/input";

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

// Specific styles
@import "header";
@import "footer";
@import "permissions";

// Main page styling
@import "home";
@import "landing";

@import "auth/auth";
@import "manage/manage";
@import "profile/profile";

@import "changelog/changelog";
@import "changelog-actions-tags"; // move this into something in the manage dir

@import "settings/settings";
@import "news/news";
@import "forum/forum";

@import "usercard";
@import "userlist";

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

@import "search/search";