html, div, body, canvas {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  -webkit-app-region: drag;
  background: black;
  overflow: hidden;
}

#container {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  text-align: center;
//  filter: sepia(1) hue-rotate(230deg) saturate(2); // set mono colour green
}


canvas {
  width:100vw;
  height:100vh;
  -webkit-transition: 1s opacity;
  background: black;
  background-color:black;
  background-size:100vw 100vh;
  filter: blur(6px);
}


splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/splash.jpg);
  background-size: 100vw 100vh;
  background-color:black;
  opacity: 1.0;
   z-index: 1001;
  -webkit-app-region: no-drag;
}


#main {
  position: relative;
  background: black;
  width:100vw;
  height: 100vh;
  text-align: center;
}

.invisible {
  -webkit-transition: 0s opacity;
  opacity: 0;
}

buttonl {
  position: absolute;
  top: 8vh;
  left: 15vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/buttonl.png);
  background-size: 8vh 8vh;
  opacity: 0.8;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

buttonl:hover {
  background-size: 8vh 8vh;
  opacity: 1.0;
}

buttonl:active {
  background-size: 8vh 8vh;
  opacity: 0.2;
  left:2vw;
  top:8vh;
}

buttonr {
  position: absolute;
  top: 8vh;
  left: 75vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/buttonr.png);
  background-size: 8vh 8vh;
  opacity: 0.8;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

buttonr:hover {
  background-size: 8vh 8vh;
  opacity: 1.0;
}

buttonr:active {
  background-size: 8vh 8vh;
  opacity: 0.2;
  left:90vw;
  top:8vh;
}

button {
  position: absolute;
  top: 90vh;
  left: 15vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/button.png);
  background-size: 8vh 8vh;
  opacity: 0.8;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

button:hover {
  background-size: 8vh 8vh;
  opacity: 1.0;
}

button:active {
  background-size: 8vh 8vh;
  opacity: 0.2;
  left:15vw;
  top:90vh;
}

button1 {
  position: absolute;
  top: 90vh;
  left: 35vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/button.png);
  background-size: 8vh 8vh;
  opacity: 0.;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

button1:hover {
  background-size: 8vh 8vh;
  opacity: 1.0;
}

button1:active {
  background-size: 8vh 8vh;
  opacity: 0.2;
}

button2 {
  position: absolute;
  top: 90vh;
  left: 55vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/button.png);
  background-size: 8vh 8vh;
  opacity: 0.8;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

button2:hover {
//  background-size: 8vh 8vh;
  opacity: 1.0;
}

button2:active {
//  background-size: 8vh 8vh;
  opacity: 0.2;
}

button3 {
  position: absolute;
  top: 90vh;
  left: 75vw;
  width: 8vh;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/button.png);
  background-size: 8vh 8vh;
  opacity: 0.8;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

button3:hover {
  background-size: 8vh 8vh;
  opacity: 1.0;
}

button3:active {
  background-size: 8vh 8vh;
  opacity: 0.2;
}