body
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    background-color: #1d1d1d;
}
.container
{
    margin: auto;

    max-width: 50%;
    min-width: 600px;

    padding: 20px;
    text-align: center;
    font-family: "Arial", serif;
    border: 2px solid black;
    background-color: #242424;
    color: #eeeeee;
}

.buttonContainer
{
    display: inline-grid;
    grid-template-columns: auto auto auto;
    margin: 5px;
    background-color: #666666;
    border-collapse: collapse;
}

.userButton
{
    min-width: 50px;
    min-height: 50px;
    border: 2px solid black;
    border-collapse: collapse;
}

.shapeButton
{
    cursor: pointer;
}

.solidButton
{
    cursor: pointer;
}

.userInputField
{
    margin: 0;
    width: 50%;
    font-size: 16px;
}

.outputError
{
    color: #ff6969;
    font-size: 24px;
}

.outputWarning
{
    color: orange;
}

.outputSwap
{
    /* color: #3492ba; */
    color: #9ecfff;
    font-size: 24px;
}

.shapeTriangle
{
    background: url("shapes/triangle.png") no-repeat #666666;
    background-size: contain;
}
.shapeSquare
{
    background: url("shapes/square.png") no-repeat #666666;
    background-size: contain;
}
.shapeCircle
{
    background: url("shapes/circle.png") no-repeat #666666;
    background-size: contain;
}

.shapePyramid
{
    background: url("shapes/pyramid.png") no-repeat #666666;
    background-size: contain;
}
.shapeCube
{
    background: url("shapes/cube.png") no-repeat #666666;
    background-size: contain;
}
.shapeSphere
{
    background: url("shapes/sphere.png") no-repeat #666666;
    background-size: contain;
}
.shapePrism
{
    background: url("shapes/prism.png") no-repeat #666666;
    background-size: contain;
}
.shapeCylinder
{
    background: url("shapes/cylinder.png") no-repeat #666666;
    background-size: contain;
}
.shapeCone
{
    background: url("shapes/cone.png") no-repeat #666666;
    background-size: contain;
}

#output
{
    text-align: left;
}