style.css

/**
 * Project style 
 * @author micaellgoms
 */

 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
 
 * {
 	margin: 0;
 	border: 0;
 }

 body {
 	font-family: 'Montserrat', sans-serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	font-weight: bold;
 }

 .title {
 	float: right;
 	margin: 3rem;
 	margin-right: 5rem;
 }

 .title small {
 	font-size: 18px;
 	font-weight: lighter;
 }

 button {
 	font-family: 'Montserrat', sans-serif;
 	cursor: pointer;
 	padding: .2rem;
 	padding-left: 2rem;
 	padding-right: 2rem;
 	background-color: #2A363B;
 	color: #FFF;
 	border-radius: 2rem;
 	font-size: 12px;
 	font-weight: 600;
 	margin: 1rem;
 	margin-top: 1rem;
 	box-shadow: 0px 0px 8px 0px #666;
 	position: absolute;
 	bottom: 1rem;
 	right: 1rem;
 }

 button:hover {
 	background-color: #E84A5F;	
 }

 .reset {
 	background-color: #02A676; 
 }

 .generate {
	 background-color: salmon;
	 right: 8rem; 
 }

 .reset:hover {
 	background-color: #E84A5F;
 }

 .line {
 	bottom: 2.5rem;
 }

 .polygon {
 	bottom: 4rem;
 }

 .circle {
 	bottom: 5.5rem;
 }

 .bezier {
 	bottom: 7rem;
 }

 .real-polygon {
	bottom: 10rem;
	background-color: #666;
 }

 .translation {
	bottom: 13rem;
 }

 .rotation {
	bottom: 14.5rem;
 }

 .escale {
	bottom: 16rem;
 }
 
 .ppoint {
	bottom: 18.5rem;
 }

 .pline {
	bottom: 20rem;
 }

 .ppolygon {
	bottom: 21.5rem;
 }

 .hull {
	bottom: 24.5rem;
 }

 .voronoi {
	bottom: 26rem;
 }

 .delaunay {
	bottom: 27.5rem;
 }

 .info {
	top: 0;
	right: 0;
	bottom: auto;
	box-shadow: none;
	background-color: coral;
	font-size: 12px;
	padding: 10px;
	position: absolute;
	text-decoration: unset;
	color: white;
	font-weight: 800;
	border-bottom-left-radius: 15px;
 }

 .info:hover {
	padding-right: 2rem;
 }

 canvas {
 	box-shadow: 0px 0px 4px 0px #666;
 	cursor: crosshair;
 }

 footer {
 	position: absolute;
 	bottom: .5rem;
 	left: 1rem;
 }