:root
{
    --transparent-light: #0000003f;
    --transparent-dark: #000000cc;
    --accent: #0f0;
}

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background-image: url('../gfx/background.jpg');
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
}

.fc
{
    display: flex;
    flex-direction: column;
}

.fg
{
    flex-grow: 1;
}

.btn-category
{
    border: none;
    background: transparent;
}

.btn-category > img
{
    width: 85px;
    height: auto;
    background-color: var(--transparent-light);
    border-radius: 50%;
    cursor: pointer;
    transition: all .5s;
}

.btn-category.active > img
{
    width: 50px!important;
    background-color: var(--transparent-dark);
    filter: none!important;
}

#categories
{
    display: flex;
    padding: 0;
    list-style-type: none;
    overflow-x: auto;
    transition: margin .5s;
}

#categories > li
{
    display: flex;
    align-items: center;
}

#workshop
{
    box-sizing: border-box;
    width: 100%;
    max-width: 1140px;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 12vw;
    background-image: url('../gfx/lamp.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#effect
{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 8vw;
    background-image: url('../gfx/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

#visualization
{
    width: 100%;
    max-width: 500px;
    height: auto;
    transform: translateY(25px);
}

@keyframes blink {
    50% {opacity: 0.5;}
}

#visualization.loading
{
    animation: blink 1s linear infinite;
}

#table
{
    min-height: 245px;
    background-image: url('../gfx/table-sm.png');
    background-position-x: center;
    background-size: cover;
}

#menu
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    margin-top: 25px;
}

#category-select-box
{
    margin: 4% 0;
    text-align: center;
}

#category-select-box > span
{
    color: #fff;
    background-color: var(--transparent-light);
    padding: 4px 10px;
    border-radius: 4px;
}

#category-select-box, #menu, #categories, #products
{
    transition: all .5s;
}

#table.menu-active #category-select-box
{
    margin: 0;
    height: 0;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease;
}
  
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

#products
{
    height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--transparent-light);
}

#products > ol
{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
}

#products > ol > li
{
    margin: 0 10px 0 0;
    background-color: var(--transparent-dark);
    border-radius: 4px;
}

.product
{
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 55vw;
    max-width: 250px;
    height: 100%;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.product:hover
{
    border-color: var(--accent);
}

.product-image-box
{
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
}

.product-image
{
    width: auto;
    max-height: 100px;
}

.product-price
{
    position: absolute;
    top: 10px;
    right: 0;
    text-align: right;
    background-color: #fff;
}

.product-name
{
    color: #fff;
    text-align: start;
    margin-top: 5px;
}

#table.menu-active #menu
{
    flex-grow: 0;
}

#table.menu-active #categories
{
    margin-top: 0;
}

#table.menu-active .btn-category>img
{
    width: 40px;
    filter: grayscale(1);
}

#table.menu-active #products
{
    opacity: 1;
    height: auto;
    overflow-x: auto;
    flex-grow: 1;
    padding: 10px;
}

#cta
{
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: var(--transparent-dark);
}

#cta > .btn
{
    border: 1px solid var(--accent);
    font-size: 14px;
    font-weight: bold;
    width: 50%;
    text-transform: uppercase;
    padding: 5px;
}

#cta > .btn-primary
{
    background: var(--accent);
    color: #000;
    margin-right: 5px;
}

#cta > .btn-secondary
{
    margin-left: 5px;
    background: #000;
    color: var(--accent);
}

#product-list-box
{
    position: absolute;
    top: 0;
    left: 0;
}

#product-list-btn
{
    position: relative;
    width: 48px;
    height: 45px;
    padding: 0;
    margin-left: 8px;
    background-color: var(--transparent-dark);
    border: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
}

#product-list-btn > .label
{
    display: none;
}

#product-list-btn > .burger
{
    position: absolute;
    left: 8px;
    width: 32px;
    height: 4px;
    background: #fff;
    border-radius: 2px;
}

#product-list-btn > .first
{
    top: 10px;
}

#product-list-btn > .second
{
    top: 19px;
}

#product-list-btn > .third
{
    top: 28px;
}

#product-list-box.open
{
    width: 100%;
    height: 100%;
    background-color: var(--transparent-dark);
}

#product-list-box.open #product-list
{
    display: block;
}

#product-list
{
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px;
}

.product-list-item
{
    margin: 0 0 10px;
}

.product-list-item > h3
{
    margin: 0;
    font-size: 12px;
    color: #a1a1a1;
}

.product-list-row
{
    display: flex;
    color: #a1a1a1;
}

.product-list-row > .name
{
    width: 75%;
    margin: 0;
}

.product-list-row > .price
{
    width: 15%;
    margin: 0;
}

.product-list-row > .detach
{
    width: 10%;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
}

@media screen and (min-width: 768px)
{
    body
    {
        background-size: auto;
    }

    #workshop
    {
        position: relative;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 0;
        background-size: 75%;
        background-position-x: center;
    }

    #table
    {
        min-height: 275px;
        background-image: url('../gfx/table-lg.png');
    }

    #table.menu-active .btn-category > img
    {
        width: 50px;
    }

    #category-select-box
    {
        margin: 3% 0;
    }

    #effect
    {
        padding: 0;
        margin-top: 8%;
        background-size: initial;
    }

    #visualization
    {
        width: 55%;
    }

    #categories
    {
        overflow-x: initial;
    }

    #categories > li
    {
        flex-basis: 0;
        flex-grow: 1;
        justify-content: center;
        max-width: 100%;
        text-align: center;
    }

    .btn-category > img
    {
        max-width: 100%;
    }

    #cta-box
    {
        position: absolute;
        top: 0;
        right: 8px;
    }

    #cta
    {
        flex-direction: column;
        width: 180px;
    }

    #cta > .btn
    {
        width: 100%;
        margin: 5px 0;
    }

    #product-list-box
    {
        position: relative;
        margin-top: 10px;
    }

    #product-list-box.open #product-list-btn
    {
        background-color: transparent;
    }

    #product-list-btn
    {
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 0;
    }

    #product-list-btn > .burger
    {
        display: none;
    }

    #product-list-btn > .label
    {
        display: block;
        padding: 8px;
        color: #fff;
        text-align: left;
    }
}