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

    @media only screen and (max-width: 800px) 
        justify-content: space-around

    @media only screen and (max-width: 600px) 
        position: absolute

    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
        box-sizing: border-box

    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
        flex-wrap: wrap
        justify-content: center
        gap: 10px 0px

        @media only screen and (max-width: 500px) 
            input
                width: calc(100% - 20px)

            button, select
                width: calc(50% - 20px)

            button:hover
                transform: rotate(5deg)

.products   
    display: flex
    justify-content: space-evenly
    align-items: stretch
    flex-wrap: wrap
    flex-direction: row
    width: calc(100% - 40px)
    margin: 20px
    gap: 20px

    .top-bar-spacing
        width: 100%

    .product
        border: 2px solid $primary
        border-radius: 10px
        padding: 10px
        margin: 0px
        max-width: 450px
        width: 100%
        box-sizing: border-box

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

            @media only screen and (max-width: 450px) 
                flex-direction: column
                justify-content: center
                margin-bottom: 10px 

            .manage
                display: flex
                flex-direction: row
                justify-content: right
                flex-wrap: wrap
                gap: 10px
                width: 40%
                margin-bottom: 10px

            button
                background-color: $primary
                color: $secondary
                border: none
                padding: 10px
                border-radius: 10px
                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
            gap: 10px

            @media only screen and (max-width: 400px) 
                flex-direction: column

    .title
        width: min(90%, 500px)
        margin-left: calc(50% - min(90%, 500px) / 2)
        margin-right: calc(50% - min(90%, 500px) / 2)
        text-align: center
        border: 2px solid $primary
        padding: 10px
        border-radius: 10px
        box-sizing: border-box

        h1
            display: inline