/*
This file is part of Modular Multiplication WebGL.

Modular Multiplication WebGL is free software: you can redistribute it
and/or modify it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or (at your option)
any later version.

Modular Multiplication WebGL is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Modular 
Multiplication WebGL. If not, see <https://www.gnu.org/licenses/>.
*/

body {
    margin: 0;
    padding: 0;
    font-size: 1.25em;
}

label {
    color: rgb(240, 240, 240);
}

#control_panel{
    padding: 10px 10px;
    background-color: rgba(32, 32, 32, 0.95);
    position: absolute;
    border-radius: 0 0 20px 0;
    line-height: 1.2em;
    max-width: 16em;
}

input[type="number"] {
    width: 9em;
    max-width: 9em;
    font-size: 1.25em;
    margin-bottom: 8px;
    width: 100px;
    border-radius: 8px;
    padding: 2px 5px;
    margin-left: 5px;
    outline: none;
    border: black solid 2px;
}

input[type="number"]:focus {
    border: rgb(25, 118, 210) solid 2px;
}

button {
    font-size: 1.1em;
    border-radius: 9px;
    background-color: rgb(240, 240, 240);
    border: rgb(24, 24, 24) solid 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 10px;
}

button:hover {
    background-color: rgb(210, 210, 210);
}

button:active {
    background-color: rgb(180, 180, 180);
}

canvas {
    display: block;
}

#rotation_label {
    display: inline-block;
    width: 2em;
    text-align: right;
}

input[type="range"] {
  -webkit-appearance: none;
  background: #ffffff;
  height: 6px;
  border-radius: 3px;
  width: 12em;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #202020;
  border-radius: 50%;
  cursor: pointer;
}