// chiptune2.js css

@import compass

// responsive design
$mobile-width: 45rem

@mixin respond-to($media)
    @if $media == desktop
        @media only screen and (min-width: $mobile-width)
            @content
    @else if $media == mobile
        @media only screen and (max-width: $mobile-width)
            @content

// font
@font-face
    font-family: amiga
    src: url('../fonts/amiga4ever_pro2.ttf')
    font-weight: 400

// our design
html, body
    width: 100%
    height: 100%

body
    @include background(linear-gradient(#FF5C00, #FF5A00))

.bg
    width: 100%
    width: calc(100% - 4rem)
    height: 100%
    height: calc(100% - 4rem)
    position: absolute
    top: 2rem
    left: 2rem
    z-index: -90
    &.bg1
        background-image: url('../img/headphones.svg')
        background-repeat: no-repeat
        background-size: contain
        background-position: center

.banner
    width: 100%
    font-family: amiga, sans-serif
    + .banner
        margin-top: 2.4rem

#headline, #demosong, #metadata, #controls, #choosefile
    text-align: center

#info
    max-width: calc(100% - 2.6rem)
    padding: 1.25rem 1.3rem
    background: rgba(20, 20, 20, 0.86)
    color: #f9f9f9

#headline
    max-width: calc(100% - 2rem)
    padding: 1.2rem 1rem
    background: #fff
    color: #232323
    h1
        margin: 0
        @include respond-to(mobile)
            font-size: 3rem
        @include respond-to(desktop)
            font-size: 4.5rem

#demosong
    margin-top: 3rem
    a
        color: #232323
        font-size: 0.7rem

#metadata
    display: block

#choosefile
    input
        padding: 0.5rem
        background: #f7f7f7
        border-radius: 0.35rem
        border: 1px solid rgba(215, 99, 34, 0.78)

#choosefile, #controls
    margin-top: 1.9rem

#demos
    text-align: center
    > div
        display: inline-block
        margin: 0 auto
        text-align: left
        border-radius: 0.35rem
        border: 1px solid rgba(215, 99, 34, 0.78)
        padding: 1rem
        background: #fff
        h2
            margin: 0 0 0.5rem 0
            font-size: 1.3rem
        .song
            display: block
            text-decoration: none
            color: #4C4CBD
            + .song
                margin-top: 0.65rem
            .size
                vertical-align: super
                font-size: 0.6rem
                margin-left: 0.3rem
                &:before
                    content: "("
                &:after
                    content: ")"
    

.control
    width: 5rem
    height: 5rem
    border-radius: 2.5rem
    background-color: rgb(80,80,80)
    display: inline-block
    box-shadow: 0px 9px 0px rgba(50,50,50,1), 0px 9px 25px rgba(0,0,0,.7)
    transition: all .1s ease
    cursor: pointer

    &:active, &.pressed
        box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)

    &#play
        background-image: url('../img/play.svg')
        background-size: 75%
        background-position: 16px 9px
        background-repeat: no-repeat

    &#pause
        background-image: url('../img/pause.svg')
        background-size: 75%
        background-position: center
        background-repeat: no-repeat

    &#loop
        display: none
        + label
            background-image: url('../img/loop.svg')
            background-size: 75%
            background-position: center
            background-repeat: no-repeat
        &:checked + label
            box-shadow: 0px 3px 0px rgba(50,50,50,1), 0px 3px 6px rgba(0,0,0,.7)