body {
    margin: 0px;
    background-color: black;
}

canvas {
    width: 100%;
    height: 100%;
}

.control-panel {
    display: none;
    /* display: flex; */
    position: absolute;
    --control-panel-size: calc(0.8 * min(100vw, 100vh) / 1.02);
    width: var(--control-panel-size);
    height: var(--control-panel-size);
    top: calc((100vh - var(--control-panel-size)) / 2);
    left: calc((100vw - var(--control-panel-size)) / 2);
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid darkgreen;
    border-radius: 10%;
    overflow: auto;
    align-items: center;
    flex-direction: column;
}

.control-panel > h1 {
    color: black;
    width: 100%;
    text-align: center;
    background-color: darkgreen;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.control-panel > h2 {
    color: green;
}


/* ############################################################ */
/* # gear ##################################################### */

/* https://codepen.io/sketchbookkeeper/pen/jrmYXm */

.gear{
    position: absolute;

    transform-origin: top right;
    /* rotate: 22.5deg; */
    transform: scale(0.16);
    right: 10px;
    top: 10px;

    width: 200px;
    height: 200px;
    margin: auto;
    background: green;
    border-radius: 50%;
    /* animation-name: spin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; */
}

.gear .center{
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10;
    width: 100px;
    height: 100px;
    background: black;
    border-radius: 50%;
}

.tooth{
    position: absolute;
    top: -25px;
    left: 75px;
    z-index: 1;
    width: 45px;
    height: 250px;
    background:green;
}

.tooth:nth-child(2){
    transform: rotate(45deg);
}

.tooth:nth-child(3){
    transform: rotate(90deg);
}

.tooth:nth-child(4){
    transform: rotate(135deg);
}

/* @keyframes spin {
    from {transform: rotate(0deg); }
    to {transform: rotate(360deg);}
} */


/* ############################################################ */
/* # sliders ################################################## */

/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 80%;
    height: 25px; /* Specified height */
    background: black;
    outline: 2px solid darkgreen; /* Remove outline */
    opacity: 0.7;
    /*-webkit-transition: .2s; */
    /* transition: opacity .2s; */
    border-radius: 25px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: green; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%;
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: green; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border: 2px solid green
}


/* ############################################################ */
/* # radio  ################################################### */

/* https://www.codeply.com/go/NKtDpPXv2x */

.radio-item {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 0px 0px 0;
  }
  
  .radio-item input[type='radio'] {
    display: none;
  }
  
  .radio-item label {
    color: green;
    font-weight: normal;
    font-size: 20px;
  }
  
  .radio-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 20%;
    border: 2px solid green;
    background-color: transparent;
     margin-right: 10px;
  }
  
  .radio-item input[type=radio]:checked + label:after {
    border-radius: 10%;
    width: 20px;
    height: 20px;
    position: absolute;
    /* top: 9px;
    left: 10px; */
    top: 7px;
    left: 8px;
    /* margin: 0 5px 0 0; */
    content: " ";
    display: block;
    background: green;
  }