body {
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

#world {
    --world-size: calc(min(100vw, 100vh) / 1.02);

    width: var(--world-size);
    height: var(--world-size);
    background-color: black;
    outline: 2px solid darkgreen;

    overflow: hidden;
    position: relative;
}

.boid {
    --boid-height: calc(var(--world-size) / 80);
    --boid-width: calc(var(--boid-height) / 1.1);

    --x-position: 0.5;
    --y-position: 0.5;
    --rotation: 0;
    
    width: 0;
    height: 0;
    border-left: calc(var(--boid-width) / 2) solid transparent;
    border-right: calc(var(--boid-width) / 2) solid transparent;
    border-bottom: var(--boid-height) solid green;

    position: absolute;
    transform:
        translateX(calc(var(--x-position) * var(--world-size)))
        translateY(calc(var(--y-position) * var(--world-size)))
        translateX(calc(var(--boid-width) / -2))
        translateY(calc(var(--boid-height) / -2))
        rotate(calc(var(--rotation) * 1rad));
}

.control-panel {
    display: none;
    /* display: flex; */
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    right: 10%;
    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;
}