html, body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
}

html {
  background: rgb(102,102,102);
/*   background: linear-gradient(122deg, rgba(102,102,102,1) 0%, rgba(177,177,177,1) 100%); */
  /* background-repeat: no-repeat; */
  
  width: 100%;
  height: 0vh;
}

canvas {
/*   height: 470;
  width: 270; */
  border:1px solid black;
  background-color: lightgrey;
  margin: 10px;
}

img {
  width: 80px;
  height: auto;
}

#pause {
  float: left;
}

#play {
  float: right;
}

.buttons-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 180%;
}

.top-wrapper, .bottom-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
}

.top-wrapper a, .bottom-wrapper a {
  padding: 0px 10px;
}

.bottom-wrapper {
  margin-top: 30px;
}

.pause-play {
  width: fix-content;
}

#cubeStats {
  position: fixed;
  top: 10px;
  right: 10px;
  
  background-color: rgba(20, 20, 20, 0.4);
  display: flex;
  flex-direction: row;
  
}

#cubeStats > .section {
  padding: 8px;
}

a {
  font-size: 300%;
  font-family: 'Dosis', sans-serif;
}

a:hover {
  cursor: pointer;
}

.pause-play a{
  transition: all ease 0s;
}

.bottom-wrapper a:hover{
  color:black;
}