:root
{
    --square-width: 150px;
    --square-height: 150px;
    --separator-size: 30px;
}

.portfolioContainer
{
    border-top: 1px solid var(--accent);
    margin-top: 50px;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}

.portfolioContainer>.verticalSeparator
{
    height: var(--square-height);
    width: var(--separator-size);
}

.portfolioContainer>.horizontalSeparator
{
    height: var(--separator-size);
    width: var(--square-width);
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
}

.portfolioContainer>.squareSeparator
{
    height: var(--separator-size);
    width: var(--separator-size);
}

.portfolioContainer>.lineSeparator
{
    height: 1px;
    border-top: 1px solid var(--accent);
    width: 100vw;
}

.portfolioContainer>.lineSeparator.muted
{
    height: 0px;
    border: 0 !important;
}

.portfolioContainer>.item
{
    width: var(--square-width);
    height: var(--square-width);
    background-color: #232323;
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    background-size: 100%;
    background-repeat: no-repeat;
}

.portfolioContainer .img1
{
    background-image: url('/images/portfolio/portfolio_1.png');
}

.portfolioContainer .img2
{
    background-image: url('/images/portfolio/portfolio_2.png');
}

.portfolioContainer .img3
{
    background-image: url('/images/portfolio/portfolio_3.png');
}

.portfolioContainer .img4
{
    background-image: url('/images/portfolio/portfolio_4.png');
}

.portfolioContainer .img5
{
    background-image: url('/images/portfolio/portfolio_5.png');
}

.portfolioContainer .img6
{
    background-image: url('/images/portfolio/portfolio_6.png');
}

.portfolioContainer .img7
{
    background-image: url('/images/portfolio/portfolio_7.png');
}

.portfolioContainer .img8
{
    background-image: url('/images/portfolio/portfolio_8.png');
}

.portfolioContainer .img9
{
    background-image: url('/images/portfolio/portfolio_9.png');
}

@media only screen and (max-width: 998px)
{
    :root
    {
        --separator-size: 15px;
    }

    .bottomFiller
    {
        min-height: 30px;
        height: calc(100vh - 930px) !important;
    }
}

@media (min-width: 992px)
{}