body {
      margin:0;
      font-family:Verdana;
      line-height:200%;
      font-size:1.2em;
      background:mediumseagreen;
} 

@font-face { font-family: "OpenDyslexic"; src: url('https://dl.dropboxusercontent.com/s/qfpakpjedhsrdb9/OpenDyslexicAlta-Regular.ttf'); } 

body.active {
    font-family: OpenDyslexic;
 }
 
#selection {
     position:relative;
     width:36%;
     padding:10px 10px 40px 10px;
     border-radius:10px;
     margin:10% auto;
     text-align:center;
     background:white;
   }

.b {
     cursor:pointer;
     background:#888;
     padding:10px;
     height:20px;
     transition:.6s ease-in-out;
     width:50px;
     position:relative;
     margin:0px auto;
     border-radius:30px;
       
}
   
 .slider {
     padding:4px;
     position:absolute;
     background:white;
     box-shadow:2px 2px 10px rgba(0,0,0,.2);
     border-radius:30px;
     width:calc(50% - 10px);
     top:5px;
     transition:.6s ease-in-out;
     left:5px;
     height:calc(100% - 20px);
   }
   
.slider.active {
     transform:translate(26px, 0);
}

.b.active {
     background:mediumseagreen;
  }