.root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.root.loaded {
    display: flex;
    flex-direction: column
}

.root>.root-navbar, .root>.root-navbar>.inner {
    height: 64px;
    background: #111;
    color: #eee;
    overflow: hidden
}

.root>.root-navbar>.inner {
    display: flex;
    flex-direction: row
}

.root>.root-navbar>.inner>.collapser-component {
    display: none
}

.root>.root-navbar>.inner>.title-block {
    display: inline-block;
    vertical-align: top;
    height: 64px;
    margin: 0 16px 0 0;
    padding: 0;
    line-height: 64px;
    font-size: 16pt;
    font-weight: 700
}

.root>.root-navbar>.inner>.title-block>.title-image {
    display: inline-block;
    vertical-align: top;
    width: 48px;
    height: 48px;
    margin: 8px 10px 8px 0;
    padding: 0;
    border-radius: 32px
}

.root>.root-navbar>.inner>.nav-block {
    flex-grow: 9999;
    text-align: right
}

.root>.root-navbar>.inner>.nav-block>a {
    display: inline-block;
    vertical-align: middle;
    height: 64px;
    line-height: 64px;
    margin: 0;
    padding: 0 12px;
    border-bottom: 4px solid transparent;
    transition: all .33s;
    font-size: 11pt
}

.root>.root-navbar>.inner>.nav-block>a.current {
    border-color: #007fff
}

.root>.root-navbar>.inner>.nav-block>a:link, .root>.root-navbar>.inner>.nav-block>a:visited {
    color: #fff;
    text-decoration: none
}

.root>.root-navbar>.inner>.nav-block>a:active, .root>.root-navbar>.inner>.nav-block>a:hover {
    border-color: #ccc
}

.root>.root-content {
    box-shadow: inset 0 8px 8px -8px #111;
    flex-grow: 9999;
    width: 100%;
    margin: 0;
    padding: 24px 0
}

.root>.root-content>.ng-scope {
    padding: 0
}

.root>.root-content p {
    text-align: justify
}

.root>.root-content a:link, .root>.root-content a:visited, .root>.root-footer a:link, .root>.root-footer a:visited {
    color: #007fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all .1s
}

.root>.root-content a:active, .root>.root-content a:hover, .root>.root-footer a:active, .root>.root-footer a:hover {
    border-bottom-color: #007fff
}

.root>.root-footer {
    box-shadow: inset 0 8px 8px -8px #111;
    background: #222
}

.root>.root-content>.inner, .root>.root-footer>.inner, .root>.root-navbar>.inner {
    width: 1024px;
    margin: 0 auto
}

.root>.root-footer>.inner {
    padding: 16px 0
}

.root>.root-footer>.inner {
    text-align: center;
    font-size: 10pt
}

.root>.root-footer>.inner>.small {
    color: #666;
    font-size: 9pt
}

.root>.root-footer>.inner>.c3 {
    text-align: center;
    margin-bottom: 8pt;
}

.root>.root-footer>.inner>.c3>span {
    margin: 0;
    padding: 0;
    font-weight: 450;
}

.root>.root-footer>.inner>.c1 {
    text-align: center;
    margin-bottom: 8pt;
}

.root > .root-footer > .inner > .c1 > span + span::before {
    content: '• ';
}

.root>.root-footer, .root>.root-navbar {
    width: 100%;
    margin: 0;
    padding: 0;
    flex-shrink: 0
}

@media (max-width:1200px) {
    .root>.root-content, .root>.root-footer, .root>.root-navbar {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px
    }

    .root>.root-navbar {
        height: auto
    }

    .root>.root-content>.inner, .root>.root-footer>.inner, .root>.root-navbar>.inner {
        width: 100%;
        height: 100%
    }

    .root>.root-footer>.inner>.c1, .root>.root-footer>.inner>.c3 {
        width: 100%;
        text-align: center
    }

    .root>.root-footer>.inner>.c3>span {
        text-align-last: center
    }

    .root>.root-navbar>.inner, .root>.root-navbar>.inner>.nav-block, .root>.root-navbar>.inner>.nav-block>a, .root>.root-navbar>.inner>.title-block {
        display: block
    }

    .root>.root-navbar>.inner>.nav-block>a {
        width: 100%;
        border-bottom: none;
        border-left: 4px solid transparent;
        text-align: left
    }

    .root>.root-navbar>.inner>.menu-collapser-label {
        display: block;
        height: 64px;
        margin: -64px 0 0 0;
        padding: 0;
        line-height: 64px;
        font-size: 16pt;
        text-align: right;
        cursor: pointer
    }

    .root>.root-navbar>.inner>input#menu-collapser~.nav-block {
        height: 0
    }

    .root>.root-navbar>.inner>input#menu-collapser:checked~.nav-block {
        height: auto
    }

    .root>.root-navbar>.inner>input#menu-collapser+label.menu-collapser-label::after {
        display: inline-block;
        font-size: 1.5em;
        line-height: 64px;
        content: ' ≡';
        vertical-align: top
    }

    .root>.root-navbar>.inner>input#menu-collapser:checked+label.menu-collapser-label::after {
        content: ' ×'
    }

    .root>.root-content p {
        text-align-last: center
    }
}

@media (max-width:480px) {
    .root-content>.inner>.ng-scope>h1, .root-content>.inner>.ng-scope>h2 {
        text-align: center
    }

    .root>.root-navbar>.inner>.title-block>img+span {
        display: none
    }

    .root>.root-footer>.inner>.c3 strong {
        display: inline-block;
        width: 100%;
        word-break: break-all
    }
}

.hero-project {
    width: 100%;
    margin: 0 0 24px 0;
    padding: 0;
    display: flex;
    flex-direction: row
}

.hero-project>.icon {
    display: block;
    width: 192px;
    height: 192px;
    margin: 0 32px 0 0;
    padding: 0;
    flex-shrink: 0
}

.hero-project>.data {
    flex-grow: 1
}

.hero-project>.data>h2 {
    display: block;
    margin: 0 0 12px 0;
    padding: 0
}

.hero-project>.data>p {
    text-align: justify
}

.hero-project>.data>.links {
    display: flex;
    flex-direction: row
}

.hero-project>.data>.links>a {
    display: block;
    margin: 0 24px;
    padding: 12px 0;
    border-radius: 8px;
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    border: none;
    background: #2a2a2a;
    color: #ddd;
    transition: .1s all
}

.hero-project>.data>.links>a:first-child {
    margin-left: 0
}

.hero-project>.data>.links>a:last-child {
    margin-right: 0
}

.hero-project>.data>.links>a:active, .hero-project>.data>.links>a:hover {
    background: #3d3d3d
}

.project {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    margin: 0 0 12px 0;
    padding: 0
}

.project[data-index-mod3='0'] {
    padding: 0 16px 0 0
}

.project[data-index-mod3='1'] {
    padding: 0 8px
}

.project[data-index-mod3='2'] {
    padding: 0 0 0 16px
}

.project>.data>h2 {
    text-align: center
}

.project>.data>p {
    text-align: justify;
    text-align-last: center
}

.project>.data>.links>a {
    display: block;
    margin: 0 0 12px 0;
    padding: 12px 0;
    border-radius: 8px;
    text-align: center;
    border: none;
    background: #2a2a2a;
    color: #ddd;
    transition: .1s all
}

.project>.data>.links>a:active, .project>.data>.links>a:hover {
    background: #3d3d3d
}

@media (max-width:1024px) {
    .hero-project {
        display: block
    }

    .hero-project>.icon {
        width: 100%;
        max-width: 192px;
        margin: 0 auto
    }

    .hero-project>.data>h2 {
        text-align: center;
        margin-top: 12px
    }

    .project {
        display: block;
        width: 100%;
        margin: 12px 0;
        padding: 0 !important
    }

    .hero-project>.data>p, .project>.data>p {
        text-align-last: center
    }
}

@media (max-width:639px) {
    .hero-project>.data>.links {
        display: block
    }

    .hero-project>.data>.links>a {
        margin: 6px 0
    }
}

.project-view>.ng-scope>div.image {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center
}

.project-view>.ng-scope>div.image>img.project-logo {
    width: 256px;
    height: 256px;
    margin: 0;
    padding: 0
}

.project-view>.ng-scope>h1 {
    text-align: center
}

.project-view>.ng-scope>p {
    text-align: justify;
    text-align-last: center
}

.project-view>.ng-scope>.links {
    display: flex;
    flex-direction: row;
    width: 66%;
    margin: 0 auto
}

.project-view>.ng-scope>.links>a {
    display: block;
    margin: 0 24px;
    padding: 12px 0;
    border-radius: 8px;
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    border: none;
    background: #2a2a2a;
    color: #ddd;
    transition: .1s all
}

.project-view>.ng-scope>.links>a:first-child {
    margin-left: 0
}

.project-view>.ng-scope>.links>a:last-child {
    margin-right: 0
}

.project-view>.ng-scope>.links>a:active, .project-view>.ng-scope>.links>a:hover {
    background: #3d3d3d
}

@media (max-width:1024px) {
    .project-view>.ng-scope>div.image>img.project-logo {
        display: block;
        width: 100%;
        height: auto;
        max-width: 256px
    }

    .project-view>.ng-scope>.links {
        display: block;
        min-width: 240px;
        max-width: 400px
    }

    .project-view>.ng-scope>.links>a {
        margin: 6px 0
    }
}

.bot {
    width: 100%;
    margin: 0 0 24px 0;
    padding: 0;
    display: flex;
    flex-direction: row
}

.bot>.icon {
    display: block;
    width: 192px;
    height: 192px;
    margin: 0 32px 0 0;
    padding: 0;
    flex-shrink: 0
}

.bot>.data {
    flex-grow: 1
}

.bot>.data>h2 {
    display: block;
    margin: 0 0 12px 0;
    padding: 0
}

.bot>.data>p {
    text-align: justify
}

.bot>.data>.links {
    display: flex;
    flex-direction: row
}

.bot>.data>.links>a {
    display: block;
    margin: 0 24px;
    padding: 12px 0;
    border-radius: 8px;
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    border: none;
    background: #2a2a2a;
    color: #ddd;
    transition: .1s all
}

.bot>.data>.links>a:first-child {
    margin-left: 0
}

.bot>.data>.links>a:last-child {
    margin-right: 0
}

.bot>.data>.links>a:active, .bot>.data>.links>a:hover {
    background: #3d3d3d
}

p>a.invite-link {
    border-bottom: none !important
}

@media (max-width:1024px) {
    .bot {
        display: block
    }

    .bot>.icon {
        width: 100%;
        max-width: 192px;
        margin: 0 auto
    }

    .bot>.data>h2 {
        text-align: center;
        margin-top: 12px
    }

    .bot>.data>p {
        text-align-last: center
    }
}

@media (max-width:639px) {
    .bot>.data>.links {
        display: block
    }

    .bot>.data>.links>a {
        margin: 6px 0
    }
}

.discord-bot-view>.ng-scope>div.image {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center
}

.discord-bot-view>.ng-scope>div.image>img.bot-logo {
    width: 384px;
    height: 384px;
    margin: 0;
    padding: 0
}

.discord-bot-view>.ng-scope>h1 {
    text-align: center
}

.discord-bot-view>.ng-scope>p {
    text-align: justify;
    text-align-last: center
}

.discord-bot-view>.ng-scope>.links {
    display: flex;
    flex-direction: row;
    width: 66%;
    margin: 0 auto
}

.discord-bot-view>.ng-scope>.links>a {
    display: block;
    margin: 0 24px;
    padding: 12px 0;
    border-radius: 8px;
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    border: none;
    background: #2a2a2a;
    color: #ddd;
    transition: .1s all
}

.discord-bot-view>.ng-scope>.links>a:first-child {
    margin-left: 0
}

.discord-bot-view>.ng-scope>.links>a:last-child {
    margin-right: 0
}

.discord-bot-view>.ng-scope>.links>a:active, .discord-bot-view>.ng-scope>.links>a:hover {
    background: #3d3d3d
}

span.mono {
    font-family: 'Source Code Pro', Consolas, 'Courier New', monospace;
    background: #2a2a2a
}

.ng-scope:not(:last-child) span.mono::after {
    content: ', ';
    font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
    background: #333
}

@media (max-width:1024px) {
    .discord-bot-view>.ng-scope>div.image>img.bot-logo {
        display: block;
        width: 100%;
        height: auto;
        max-width: 384px
    }

    .discord-bot-view>.ng-scope>.links {
        display: block;
        min-width: 240px;
        max-width: 400px
    }

    .discord-bot-view>.ng-scope>.links>a {
        margin: 6px 0
    }
}