Flex Stylus

@import '../node_modules/nib'



*
    margin 0
    box-sizing inherit
    font-family verdana

html
    box-sizing border-box


body
    // background-image linear-gradient(top, #2376ae 0%, #c16ecf 100%)
    background: linear-gradient(top white black)


a
    color white
    font-weight 100
    letter-spacing 2px
    text-decoration none
    background rgba(0, 0, 0, .2)
    padding 20px 5px
    display inline-block
    width 100%
    text-align center
    transition all 0.5s
a:hover
    background-color rgba(0, 0, 0, 0.3)



.wrapper
    max-width 1000px
    margin 0 auto
    padding 50px
    background-color red


.flex-nav
    ul
        border 1px solid black
        list-style none
        marin 0
        padding 0
        display flex
    li
        flex 1 1 50%
    .social
        flex 1 1 25%



@media all and (max-width 1000px)
    .flex-nav
        ul
            flex-wrap wrap
        li
            flex 1 1 50%
        .social
            flex 1 1 25%

@media all and (max-width 500px)
    .flex-nav
        li
            flex-basis 100%