/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


@font-face {
  font-family: arrow;
  src: url('Arrows.ttf');
}

body {
  background: #111;
  color: #f8f8f8;
}


canvas {
  background: #f8f8f8;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 1rem;
  display: block;
}

.div-buttons-movement{
  width: 800px;
  height: 800px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  bottom: 816px;
}

.info_text{
  font-size: 30pt;
  margin: auto;
  position: absolute;
  left: 48%;
  top: 10px;
}

.switch_buttons{
  position: absolute;
  top: 150px;
}

.switch_buttons button{
  width: 200px;
  height: 50%;
  font-size: 15pt;
  display: flex;
  justify-content: center;
  background-color: transparent;
  color: #ffffff;
  margin-bottom: 10px;
}

.switch_buttons button:hover{
  background-color: #cccccc;
  color: #000000;
}

.button{
  /*font-family: arrow;*/
  /*color: #cccccc88;*/
  font-size: 50pt;
  background-color: transparent;
  border: none;
  display: none;
}

.button:hover{
  background-color: #e6e3e3;
}

.button:active{
  background-color: #d6d5d5;
}

.button:nth-child(1), .button:nth-child(4){
  width: 800px;
  height: 70px;
  position: absolute;
}

.button:nth-child(2), .button:nth-child(3){
  height: 800px;
  width: 70px;
  position: absolute;
}

.button:nth-child(4){
  top: 730px;
}

.button:nth-child(2){
  left: 730px;
}