axonViewer.css

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body{
  display: flex;
  flex-direction: column;
  background-color: #fffbf5;
}

#c {
  display: block;

  width: 75%;
  height: 75%;
  margin: auto;
  margin-bottom: 3%;

  border-radius: 3px;
  box-shadow:  10px 10px 12px -4px rgba(0,0,0,0.35);
}

#globalDisplacement {
  width: 50%;
}

#screenshot {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color:#1e88e5;
  color:white;
  box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.5); 
  border:none;
  cursor: pointer;

  display: flex;

  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

#screenshot:hover {
  background-color:#64b5f6;
  box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.75); 
}

#controls {
  margin: auto;
  width: 75%;
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
}

canvas:focus, input:focus, button:focus{
  outline: none;
}