$asana: #067ab4
$border: #00b7f1
$sborder: #808080
$button: #dcdcdc
$color: #fff
$copyleft: #1aafff
$enlace: #2dde98
$fondo: #2d3743
$green:  #5cb85c
$red: #fc636b
$submit: #3895ea

body
    background: $fondo
    color: $color

a.enlace
    color: $copyleft
    text-decoration: none
    &:hover
        color: $enlace

.contenedor
    .form-search
        display: grid
        grid-gap: 1px
        grid-template-columns: auto auto auto 90px auto
        grid-template-areas: ". search-box search-box search-button ."
        position: relative
        .search-box
            grid-area: search-box
            background: $fondo
            border-bottom: 1px solid $sborder
            border-top: 0px
            border-left: 0px
            border-right: 0px
            border-radius: 0px
            color: $color
        .search-button
            grid-area: search-button
            cursor: pointer
            padding-bottom: 6px
            padding-left: .75em
            padding-right: .75em
            padding-top: 6px
            text-align: center
            white-space: nowrap
            background-color: $button
            border: $border
            color: $fondo
            border-radius: 5px

.contenedor
    margin: auto
    width: 100%
    max-width: 800px
    display: grid
    grid-template-columns: auto
    grid-template-rows: auto auto
    grid-gap: 1rem

    .libreyt
        .row
            display: flex
            width: 80%
            max-width: 400px
            flex-direction: row
            flex-wrap: wrap
            align-items: center
            justify-self: center
            justify-content: center

            .imageyt
                flex: 1 0 30%
                max-width: 40%
                padding: 0px 15px

                img
                    width: 100%
                    vertical-align: middle

            .features
                flex: 0
                min-height: 1px
                max-height: 100%
                position: relative
                padding: 0px 15px

                .yt-titulo
                    font-weight: 700
                    font-size: 1rem
                    line-height: 24px

.contenedor
    .v-download
        ul.download-dropdown-content
            padding-top: 1rem
            padding-bottom: 1rem
            background: black
            border: solid 1px #00b7f1
            li
                a
                    text-decoration: none
                    &:link
                        color: #22aaff

.librevideojs
    width: 90%
    max-width: 700px
    justify-self: center

.mpv
    margin-bottom: .5rem
    margin-top: 0

header
    display: flex
    padding: 20px 0px
    justify-content: center

    a.drm-free
        align-items: center
        height: auto
        opacity: .5
        transition: opacity 150ms

        &:before
            content: url("../images/drm-free.png")
            vertical-align: top
            display: block
            position: absolute
            top: 12px
            left: 12px
            max-width: 120px
            width: 100%

        &:hover
            opacity: 1

h2,h3,h4,h5,h6
    margin-top: 0
    margin-bottom: 0
    line-height: 1.1

hr
    width: 100%

section
    width: 100%

h2
    text-align: center

footer
    p.copyleft
        font-size: 12px
        text-align: center

@media screen and (max-width: 768px)
    header
        a.drm-free
            &:before
                display: none