IcyNet.eu/src/style/main.styl

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;

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
    height: 100vh
    .content
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 40%
        background-color: #ffffff
        padding: 40px

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
    height: 100vh

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

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

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

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

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

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

.twitterLogin
    display: inline-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
    background-color: #99AAB5;
    width: 225px;
    height: 40px;
    padding: 5px 5px;
    display: inline-block;
    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

@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

@media all and (max-width: 500px)
    .logo.small
        font-size: 5vw