<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Input type="list"</title>
	<style type="text/css">
    :root{
      --pie-size:300;
      --pie-bg:#3434AF;
      --red:#ed3457;
      --green:#248991; 
      --orange:#ed8724; 
      --line-color:#cecece;
    }

    .pie,.target {
      border-radius: 100%;
      position: relative;
    }
    .pie {
      height: calc( var(--pie-size,200) * 1px );
      width:  calc( var(--pie-size,200) * 1px );
      background-color:var(--pie-bg,black);
      top:5px;
      left:5px;
    }
    .target {
      height: calc( (var(--pie-size,200) + 10) * 1px );
      width:  calc( (var(--pie-size,200) + 10) * 1px );
      background-color:var(--line-color,grey);
    }

    .references {
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      background-color:var(--line-color);
    }

	</style>
  </head>
  <body>
    <div class="target">
      <div class="pie">

      </div>
    </div>
    <p class="references">
      <a href="https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e">
        HOW TO: Pure CSS pie charts w/ CSS variables
        <i>Create customisable pie charts in ~30 lines of CSS</i>
      </a>
    </p>
  
  </body>
</html>