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;
}

canvas {
  position: absolute;
		background: #202020;
		top: 0%;
		left:0%;
		width: 100%;
		height: 100%;
		box-shadow: 0px 0px 10px white;
		z-index: 990;
	}

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

panel {
  position: absolute;
  top: 7vh;
  left: -50vw;
  width: 25%;
  height: 50%;
  border-radius: 0vh;
  border: inset;
  outline: none;
  background: url(../images/panel.png);
  background-size: 100% 100%;
  opacity: .9;
   z-index: 1005;
  -webkit-app-region: no-drag;
}

foreground {
  position: absolute;
  top: 33vh;
  left: 10vw;
  width: 5vw;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/foreground.png);
  background-size: 5vw 8vh;
  opacity: 1.0;
   z-index: 1010;
  -webkit-app-region: no-drag;
}

rainbow {
  position: absolute;
  top: 33vh;
  left: 16.5vw;
  width: 5vw;
  height: 8vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  marginLeft: "1px";
  background: url(../images/foregroundrainbow.png);
  background-size: 5vw 8vh;
  opacity: 1.0;
   z-index: 1010;
  -webkit-app-region: no-drag;
}

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

bcol {
  position: absolute;
  top: 27vh;
  left: 1vw;
  width: 23vw;
  height: 21vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #000000;
  background-size: 5vw 8vh;
  opacity: 1.0;
   z-index: 1004;
  -webkit-app-region: no-drag;
}

fcol{
  position: absolute;
  top: 29vh;
  left: 8vw;
  width: 15vw;
  height: 17vh;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;

  background-color: #FFFF00;
  background-size: 15vw 17vh;
  opacity: 1.0;
   z-index: 1005;
  -webkit-app-region: no-drag;
}


back {
  position: absolute;
  top: 3vh;
  left: 2vw;
  width: 5vw;
  height: 5vw;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/home.png);
  background-size: 5vw 5vw;
  opacity: 0.9;
   z-index: 1000;
  -webkit-app-region: no-drag;
}

settings {
  position: absolute;
  top: 10vh;
  left: 82vw;
  width: 4vw;
  height: 4vw;
  border-radius: 0vh;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/settings.png);
  background-size: 4vw 4vw;
  opacity: 0.9;
   z-index: 1010;
  -webkit-app-region: no-drag;
}

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

button:hover {
  opacity: 1.0;
}

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

button1:hover {

  opacity: 1.0;
}

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

button2:hover {
  opacity: 1.0;
}


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

button3:hover {
  opacity: 1.0;
}

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

button4:hover {
  opacity: 1.0;
}

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

button5:hover {
  opacity: 1.0;
}

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

button6:hover {
  opacity: 1.0;
}

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

button7:hover {
  opacity: 1.0;
}