body {
        background-color: #09203f !important;
}

#canvas {
        background-color: white;
        border: 2px solid rgb(124, 124, 124) !important;
        border-radius: 4px;
        margin-left: 3%;
        margin-right: auto;
        display: block;
        box-shadow: 0px 0px 20px 5px rgba(255, 255, 255, 0.4);
}

.control-button {
        background-color: white !important;
        margin: 0.3% !important;
        width: 19.4% !important;
        border: none !important;
        border-radius: 2px !important;
        color: #030b17 !important;
        transition: 0.5s !important;
}

.control-button:focus {
        border: 0px solid black !important;
}

.control-button:hover {
        box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
}

#weights {
        box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
        margin-top: 5%;
}

#right-menu {
        width: 70%;
}

#container {
        width: 100%;
        display: flex;
        justify-content: space-between;
}

@media only screen and (max-width: 1340px) {
        #canvas-div {
                width: 60%;
                margin: auto;
        }

        #right-menu {
                position: absolute;
                bottom: 0;
                margin-left: 15%;
        }
}

#canvas-div {
        width: 40%;
}

.table {
        background-color: white;
        border-radius: 2px;
}

#buttons-div {
        width: 90%;
        margin-left: 5%;
        margin-top: 15%;
}

#heading {
        color: white;
        font-family: Arial, Helvetica, sans-serif !important;
        transition: 0.5s;
        margin-top: 10px;
}

#heading:hover {
        text-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
        cursor: pointer;
        font-size: 3.8em;
}