body
    margin: 0
    color: black
    font-family: sans-serif
    /*background-color: #82fff4;
    background-image: linear-gradient(-45deg, #80d7ff 25%, transparent 25.5%, transparent 50%, 
        #80d7ff 50.5%, #80d7ff 75%, transparent 75.5%, transparent)
    height: 100vh;
    background-size: 50px 50px;*/
    background: #6fefff
    background: -moz-linear-gradient(top, #6fefff 0%, #53cbf1 51%, #05abe0 100%)
    background: -webkit-linear-gradient(top, #6fefff 0%,#53cbf1 51%,#05abe0 100%)
    background: linear-gradient(to bottom, #6fefff 0%,#53cbf1 51%,#05abe0 100%)

a
    color: green
    text-decoration: none
    &:hover
        text-decoration: underline

.logo
    font-size: 8vw
    font-family: "Open Sans"
    font-weight: bold
    text-transform: uppercase
    text-align: center
    text-shadow: 2px 2px 1px #007104
    color: #00b300
    letter-spacing: 5px
    user-select: none
    cursor: default
    .part1, .part2
        display: inline-block
    .part1
        color: #03A9F4
        text-shadow: 2px 2px 1px #0059a0
        margin-right: 5px
    &.small
        font-size: 30px
        text-align: inherit
        cursor: pointer
        display: inline-block

.mobview
    display: none !important

.navigator
    padding: 0 50px
    transition: background-color 0.1s linear
    background-color: rgb(0, 219, 247)
    z-index: 5
    &.fix
        top: 0
        left: 0
        right: 0
        position: fixed
        background-color: rgba(0, 219, 247, 0.67)

    #navlogo
        &.hidden
            display: none

    ul
        padding: 0
        margin: 0
        display: inline-block
        list-style-type: none
        &.floating
            float: right

    li
        font-size: 30px
        display: inline-block
        height: 68px
        line-height: 2.2
        a
            text-decoration: none
            padding: 20px
            color: #007cde
            font-weight: bold
            text-transform: uppercase
            font-size: 25px
            transition: background-color 0.1s linear
            &:hover
                background-color: rgba(255, 255, 255, 0.25)

section
    font-family: "Open Sans"
    position: relative
    min-height: 100vh
    .content
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 40%
        overflow: auto
        background-color: #ffffff
        padding: 20px
    &#home
        h1
            font-size: 300%
            text-align: center
            color: green
            margin-bottom: 0
        p
            text-align: center;
            font-size: 200%
            color: #0074d0;
            font-weight: bold;

.divboxes
    text-align: center
.divbox
    width: 300px
    display: inline-block
    margin: 20px
    vertical-align: text-top
    .head
        display: block
        font-size: 30px
        .fa
            color: white
            height: 32px
            width: 32px
            padding: 10px
            border-radius: 100px
            margin-right: 15px
        .fa-lock
            background-color: orange
        .fa-github
            background-color: green

footer
    padding: 20px
    background: #e9f6fd
    background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%)
    background: -webkit-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%)
    background: linear-gradient(to bottom, #e9f6fd 0%,#d3eefb 100%)
    border-top: 1px solid #ddd
    text-align: center
    .copyright
        display: inline-block
        text-align: center
        font-size: 90%
        vertical-align: top
        margin-top: 50px
        padding: 15px
        margin-left: 5vw
    .squeebot
        width: 200px

.wrapper
    overflow: hidden
    min-height: 100vh

.document
    overflow: hidden
    min-height: 100vh;
    padding: 50px;
    background-color: #fff;

.tos
    display: inline-block
    width: 60%
    font-size: 120%

//.cssextend:hover > .flexview
//    display: block
//    left: 40%

.g-recaptcha
    margin-top: 10px

ul.flexview
    position: fixed
    right: 0
    left: 100%
    width: auto
    top: 68px
    bottom: 0
    background-color: rgba(53, 53, 53, 0.8)
    z-index: 1
    overflow: hidden
    transition: all 0.1s linear

    .division
        border-top: 1px solid #a7a7a7

    li
        display: block
        min-width: 100px
        a
            display: block
            padding: 5px 20px
            color: #fff
            font-weight: normal
            text-transform: none
    &.extended
        display: block
        left: 40%

code
    white-space: pre

label
    display: block
    margin-top: 20px

input:not([type="submit"])
    padding: 5px
    font-size: 120%
    border-radius: 5px
    border: 1px solid #c1c1c1
    background-color: #f5f5f5
    box-shadow: inset 2px 2px 5px #ddd
    transition: border 0.1s linear

.button, input[type="submit"]
    display: block
    padding: 5px 10px
    background-color: #fbfbfb
    border: 1px solid #c1c1c1
    border-radius: 5px
    font-size: 120%
    margin: 10px 0
    cursor: pointer

.button
    display: inline-block

.boxcont
    .box
        padding: 20px
        margin: auto
        margin-top: 5%
        background-color: #fff
        box-shadow: 5px 5px 15px #868686
        border: 1px solid #ddd
        h1:first-child, h2:first-child, h3:first-child
            margin-top: 0
        .left, .right
            display: inline-block
            width: 50%
        .left
            border-right: 1px solid #ddd
        .right
            float: right
            width: 46%
        &#login
            max-width: 700px
        &#settings
            max-width: 700px
            min-height: 380px
        &#totpcheck
            max-width: 400px
        &#error
            width: 200px

.pgn
    display: inline-block
    margin-left: 10px
    .button
        margin: 0 1px

.pagenum
    display: inline-block
    padding: 10px

.dlbtn 
    display: block
    img
        width: 200px
    &.apple
        img
            width: 175px
            padding: 0 12px

.twitterLogin
    display: block
    padding: 10px
    width: 215px
    margin: 5px 0
    background-color: #fff
    border: 1px solid #ddd
    border-radius: 5px
    text-decoration: none
    i
        color: #03A9F4;
        font-size: 22px;
    span
        color: #000;
        display: inline-block;
        vertical-align: top;
        margin-top: 3px;
        margin-left: 12px;

.discordLogin
    display: block;
    background-color: #99AAB5;
    width: 225px;
    height: 40px;
    padding: 5px 5px;
    border-radius: 5px;
    text-decoration: none
    span
        color: white
        vertical-align: top
        margin-top: 11px
        margin-left: 3px
        display: inline-block
    img
        width: 45px
        display: inline-block

span.divider
    color: #ddd
    margin: 0 5px
    cursor: default

.nobulletin
    list-style-type: none
    padding-left: 2em
    i.fa
        margin-right: 10px

.haveaccess
    color: #0c9a0c
    span
        font-weight: bold
.noaccess
    color: red
    span
        font-weight: bold

.unaffiliated
    font-size: 120%
    text-align: center
    color: #FF5722
    font-weight: bold

.application
    height: 140px
    .picture
        width: 120px
        height: 120px
        position: relative
        display: inline-block
        float: left
        .noicon
            width: 100%
            height: 100%
            text-align: center
            background-color: #40aaff
            color: #fff
            i
                font-size: 500%
                margin-top: 20px
    .info
        margin-left: 130px
        .name
            font-size: 150%
            font-weight: bold
        .description
            font-size: 80%
            font-style: italic
        .url
            display: block
            text-overflow: ellipsis
            overflow: hidden

input.authorize
    background-color: #00b0ff
    font-size: 200%
    color: #fff
    border: 1px solid #2196F3

input.deny
    font-size: 160%
    background-color: #f10
    border: 1px solid #e00000
    color: #fff

input.invalid
    border: 1px solid #f00
    outline: red

#repeatcheck
    color: red
    padding: 10px

.article
    .title
        font-size: 200%
        font-weight: bold
    .author
        font-size: 80%
        color: #565656
    .timestamp
        display: inline-block
    .content
        margin-top: 20px
        margin-bottom: 20px

.newsfeed
    .load
        font-size: 120%
        span
            vertical-align: super
            margin-left: 10px
    .prvarticle
        margin-bottom: 10px
        .title
            font-size: 200%
            display: block
            font-weight: bold
        .timestamp
            font-size: 80%
            color: #565656
        .prvcontent
            margin: 10px 0

.return
    margin-top: 40px

.content
    hr
        border-color: #ffffff
        margin: 20px 0

.option
    display: block

@media all and (max-width: 800px)
    .navigator
        padding: 0 10px
    #navlogo
        display: inline-block !important
    .banner
        display: none
    .fullview 
        display: none !important
    .mobview
        display: inline-block !important
    .logo
        font-size: 10vw
    footer
        .squeebot
            margin: 0
            width: 150px
            margin: auto
            display: block
        .copyright
            margin-left: 0
    .document
        padding: 5px
    .tos
        width: auto
        font-size: 4vw
    .divbox
        font-size: 80%
        .head
            font-size: 120%
            .fa
                width: 15px
                height: 15px
    section#home
        h1
            font-size: 150%
            margin-top: 0
        p
            font-size: 100%
    .box
        .left, .right
            float: initial !important
            display: block !important
            border: 0 !important
            width: fit-content !important
            margin: auto

@media all and (max-width: 500px)
    section
        padding: 10px
    .logo.small
        font-size: 5vw
    .divbox
        margin: 10px 0px