canvas{
   display: block;
   border: 1px solid black;
   margin: 0 auto 0;
   /*width: 90vw;*/
 }

 body{
 text-align: center;
 font-size: 1.5rem;
 height: 90vh;
 }

 button{
   display: inline-block;
   font-size: 1.5rem;
   width: 20rem;
 }

 .slider{
   margin:1.5rem 0 1.5rem;
 }


 .details{
   text-align: left;
 }


/*レンジスライダーを使いやすいように*/
 #magnetic, #mass, #charge, #speed, #angle{
  -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 2.0rem; /* バーの高さ */
  width: 50vw; /* バーの幅 */
  background: #CCCCCC; /*#8acdff;*/ /* バーの背景色 */
  border-radius: 15px; /* バーの両端の丸み */
  border: solid 0px #dff1ff; /* バー周囲の線 */
  display:inline-block;
  vertical-align: sub;
 }

/*レンジスライダーのつまみの設定*/ /* WebKit向けのつまみ */
 #magnetic::-webkit-slider-thumb, #mass::-webkit-slider-thumb, #charge::-webkit-slider-thumb,
 #speed::-webkit-slider-thumb, #angle::-webkit-slider-thumb{
  -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
  background: #FFFFFF;/*#53aeff;*/ /* 背景色 */
  border: 1px solid #888888;
  width: 4rem;/*24px;*/ /* 幅 */
  height: 4rem; /* 高さ */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}