span.toets{
  display:inline-block; 
  border:1px solid black;
  padding: 0px 2px 0px 2px;
  margin:1px;
  border-radius:0.5em;
  min-width:1em;
  text-align:center;
  }

span.shift::before{content:"\21D1 Shift";}
span.ctrl::before{content:"Ctrl";}
span.plus::before{content:"\2795";}
span.minus::before{content:"\2796";}

span.links::after{content:"\2B05";}
span.rechts::after{content:"\27A1";}
span.boven::after{content:"\2B06";}
span.beneden::after{content:"\2B07";}

.fscreen{
    display: inline-block;
    width: 20px;
    height: 20px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E");
}

.kompas{
    display: inline-block;
    width: 20px;
    height: 20px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
}