.top-bar
    position: fixed
    top: 0px
    left: 0px
    width: 100%
    display: flex
    flex-direction: row
    justify-content: space-between
    flex-wrap: nowrap
    align-content: center
    align-items: center
    background-color: $secondary
    color: $primary

    input, button, select
        background-color: transparent
        color: $primary
        transition: transform 0.5s
        border: 2px solid $primary
        border-radius: 10px
        padding: 10px
        margin-left: 10px
        margin-right: 10px

    input:focus
        transform: scale(1.1)
        outline: 0 !important

    button:hover
        transform: rotate(20deg)

    .left, .right
        margin: 10px

    .left form
        display: flex
        flex-direction: row
        align-items: stretch
        align-content: stretch

.products   
    display: flex
    justify-content: space-evenly
    align-items: center
    align-content: center
    flex-wrap: wrap
    flex-direction: row

    .top-bar-spacing
        width: 100%

    .product
        border: 2px solid $primary
        border-radius: 10px
        padding: 10px
        margin: 10px
        max-width: 500px

        .header
            width: 100%
            display: flex
            flex-direction: row
            align-items: center
            justify-content: space-between

            button
                background-color: $primary
                color: $secondary
                border: none
                padding: 10px
                border-radius: 10px
                margin-left: 5px
                margin-right: 5px
                transition: transform 0.5s

                &:hover
                    transform: rotate(30deg)

        .avairable
            color: green

        .unavairable
            color: red
    
        .image 
            border-radius: 10px
            border: 2px solid $primary
            max-width: 50%
            transition: transform 0.5s

            &:hover
                transform: scale(1.1)

        .author, .barcode
            display: flex
            align-items: center
            align-content: center
            flex-direction: row
            flex-wrap: nowrap

            span:last-child
                margin-left: 5px

        .bottom-container
            display: flex
            align-items: center
            align-content: center
            flex-direction: row
            flex-wrap: nowrap
            justify-content: space-between

    .title
        width: calc(100% - 40px)
        text-align: center
        margin: 20px

        h1
            border: 2px solid $primary
            padding: 10px
            border-radius: 10px
            display: inline